This is a minimal Todo app to demonstrate how to test a Svelte app with Vitest and Svelte Testing Library.
You can run npm run dev
to try the app out. The server will be listening at http://localhost:3000/.
The app should do the following:
- List todos. When there are no items, the message "Congratulations, all done!" should be shown.
- Allow a user to mark/unmark todos as done. When a todo is done, it is styled differently. The text color is gray and has a strike-through decoration.
- Allow a user to add new todos, but prohibit the addition of an empty todo.
- The
App
component contains the other components. It has a subheading that shows the status of the todos e.g "1 of 3 remaining ". - The
AddTodo
component contains the form with an text input and button to add new todos to our list. - A
TodoList
component, which will is an unordered list of the todos. Each list item contains aTodo
component. - The
Todo
component shows the text of the todo and a checkbox for marking the item as done.
The child components dispatch events up to the App
component to inform it when the data changes from user interaction. For example, Todo
dispatches a toggleTodo
event whenever its checkbox is clicked, this event is forwarded by TodoList
to App
.
The tests are named as <component_name>.spec.js
along side the component it is testing. You can run npm run test
to run the test suites.
The tests operate on the actual DOM nodes, so that the tests are not tied to the implementation details of the framework. The goal is to resemble how the user interacts with the webpage.
To check the coverage, you can run npm run coverage
. The coverage is 100%.
The project is set-up to lint CSS (with stylelint) and JavaScript (with ESLint). You can run npm run lint
to lint both, and npm run lint:fix
to fix any autofixable errors. This is done with the help of npm-run-all
.
Star the repo to help others find it. 🌟
Sponsor me/buy me a coffee to enable me to create more open-source tutorials like this.