This is a minimal Todo app to demonstrate how to test a Svelte app with Jest and Svelte Testing Library.
You can run npm run dev to try the app out. The server will be listening at http://localhost:3000/.
You can read the companion article - Testing a Svelte app with Jest to learn more about the project set-up.
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
Appcomponent contains the other components. It has a subheading that shows the status of the todos e.g "1 of 3 remaining ". - The
AddTodocomponent contains the form with an text input and button to add new todos to our list. - A
TodoListcomponent, which will is an unordered list of the todos. Each list item contains aTodocomponent. - The
Todocomponent 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.
The coverage is 98%.
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.
