Core: Check if each functionality of a TODO list app is working.
Test Case
Implementation Details
Add items
🔹Type some tasks in text-input.
🔸Each item should appear inside todo-list.
Rename items
🔹Double click on any item .view. This should replace the inner elements with an input element [data-testid=text-input].
🔹Clear the input element and type something new.
🔸Selected item should have the new name.
Delete items
🔹Hover on an item, so that the destroy button reveals itself.
🔹Click on the X.
🔸Total count of todo-items should decrease by one.
Toggling items
Check items
🔹Check the todo-item-toggle button for couple of items.
🔸Each of those checked items should have the completed class.
Uncheck items
🔹Uncheck items that already have completed class.
🔸None of the todo-item should have the completed class now.
Validation: Check if the inputs are being validated before appending to the list.
Test Case
Implementation Details
Add valid items
🔹Type these into the input box: "", "a", "ab".
🔸First two should not be added to the todo-list.
🔸Last text should be added to the list.
Rename valid items
🔹Select any item from the list.
🔹Try to rename the current item with these: "", "a", "item 2".
🔸Only the final attempt should be successfull.
Allow special characters
🔹Add texts that has [", ', /, &, <, >] in it.
🔸The text in todo-item should appear as expected.
Extra spaces
Remove Leading spaces
🔹Enter a text with a lot of spaces appended before it.
🔹Rename it with any other text that has leading space.
🔸In both cases, the text should not start with spaces.
Remove Trailing spaces
🔹Enter a text with a lot of spaces appended after it.
🔹Rename it with any other text that has trailing space.
🔸In both cases, the text should not end with spaces.
Remove Wide spaces
🔹Enter a text that has more than one space between two words.
🔹Rename it with any other text with wide space.
🔸In both cases, the text should not have repeated spaces.
Behaviour: Check if other components are working as expected.
Test Case
Implementation Details
Before adding any item
Show heading
🔸Inside header, a <h1> element should exist with text: 'todos'.
Show input
🔸A text input field should be visible.
Hide items
🔸The todo-list should be empty.
Hide toggle-all button
🔸toggle-all button should not be found in DOM.
Hide footer
🔸Footer should not exist in DOM.
After adding a few items
Show items
🔸Each item should be displayed in order.
Show toggle-all button
🔸toggle-all should be visible and clickable.
Use toggle-all button
Check all items
🔹Click on toggle-all button.
🔸All items should be checked out.
Unheck all items
🔹Click on toggle-all button again.
🔸All items should be unchecked now.
Test footer components
Show footer components
🔸todo-count should be visible.
🔸Each footer-navigation link: 'All', 'Active', 'Completed' should be visible.
🔸clear-all button should be visible.
Todo counter
🔸Count should be equal to the total number of items.
🔹Add a new item to the list.
🔸Count should increase by 1.
🔹Rename an item from the list.
🔸Count should be unchanged.
🔹Check all items (either manually or click toggle-all button).
🔸Count should be 0.
🔹Uncheck 1 item.
🔸Count should be 1.
🔹Delete a checked item.
🔸Count should be unchanged.
🔹Delete the unchecked item.
🔸Count should be 0 again.
Navigation buttons
🔹Click Active button.
🔸todo-list should not be empty.
🔹Click Completed button.
🔸todo-list should be empty.
🔹Click All button.
🔸todo-list should not be empty.
🔹Check all items / Click toggle-all button.
🔸todo-list should not be empty.
🔹Click Completed button.
🔸todo-list should not be empty.
🔹Click Active button.
🔸todo-list should be empty.
Clear Completed button
🔸Initially the clear-completed button should be disabled.
🔹Check all items / Click toggle-all button.
🔸Now the button should not be disabled anymore, and todo-list should have some items.
🔹Click clear-completed button.
🔸todo-list should be empty after that.
Component Tests:
Component: footer.jsx
Tests Cases:
should not render footer
should render footer
[child component - todo counter]
should show 1 item left
should show 0 or 1+ items left
[child component - navigation buttons]
All button should redirect to /#
Active button should redirect to /#/active
Completed button should redirect to /#/completed
[child component - clear completed button]
should be disabled
should clear completed items on click
Component: header.jsx
Tests Cases:
should render the header
should render the input field
input field should correctly handle adding items
Component: input.jsx
Tests Cases:
should render and autofocus input field
should show the label
should take input with valid length
should parse the sanitized text before showing
Component: item.jsx
Tests Cases:
toggle button should work properly
label should work properly
input field should work properly
destroy button should work properly
Component: main.jsx
Tests Cases:
should show all items
should show active items only
should show completed items only
should show toggle-all button when there are visible items
should toggle all items when clicked on toggle-all button
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent