Back to README.md
- Testing User Stories
- Code validation
- Manual feature testing
- Accessibility testing
- Automated testing
- Bugs
Table of contents generated with readme-toc
Each user story has a list of acceptance criteria, which are the expected outcomes when the story is tested. An issue is only closed if manual testing confirms that the acceptance criteria are fulfilled.
The commits corresponding to each User Story are linked in each the GitHuB Issue.
An overview of implemented and tested User Stories can be seen in the Google Sheet containing User Stories.
All User Stories in the MVP have been implemented and work as intended.
Issues outside the MVP that were not completed for the first release of the project but still intend to be done in further development work are gathered under the label v2 in GitHub Issues.
All rendered pages of the project were validated with the W3C HTML validator. No errors or warnings were found.
All screenshots of HTML validation can be found in this folder.
Note
Info messages regarding trailing slashes are disregarded, since these are extensively used in React development.
Note
The Landing page and the Kanban page share the same URL, and are conditionally rendered depending on login status
Note
The Landing page and the Kanban page share the same URL, and are conditionally rendered depending on login status
The validated page includes comments.
All custom css files were validated with Jigsaw, which uncovered a few minor issue that were corrected (see the commits in #154).
The resulting code passed without errors or warnings for all files.
In addition, each JS file was manually checked for comment coverage and unused code at the end of development (#154).
EsLint was used throughout development to validate the code. No errors or warnings are present in the project.
In addition, each JS file was manually checked for comment coverage, and formatted with the Prettier extension for VS Code at the end of development (#155).
| Action | Expected result | Result |
|---|---|---|
| page loads | hamburger icon not visible & nav links visible | ✅ |
| Signin link clicked | Signin page loaded | ✅ |
| # link clicked | # page loaded | ✅ |
| logo and brand name clicked | landing page loaded | ✅ |
Click to play video
01-navigation-bar-user-not-logged-in.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | hamburger icon visible logo and brand name visible nav links not visible |
✅ |
| hamburger icon clicked | nav bar opens | ✅ |
| hamburger icon clicked again OR user clicks outside the nav bar |
nav bar closes | ✅ |
Click to play video
02-navigation-bar-mobil-user.-not-logged-in.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | copyright info visible GitHub icon visible LinkedIn icon visible |
✅ |
| GitHub icon clicked | GitHub profile opens in new tab | ✅ |
| LinkedIn icon clicked | LinkedIn profile opens in new tab | ✅ |
Click to play video
03-footer-manual-testing.mp4
This page is only available to logged out users.
| Action | Expected result | Result |
|---|---|---|
| page loads | Welcome text visible # link visible Signin link visible landing background image visible |
✅ |
Click to play video
This page is only available to logged out users.
| Action | Expected result | Result |
|---|---|---|
| # page loads | # text visible Signin link visible email field visible username field visible password field visible password (again) field visible # button visible |
✅ |
| Signin link clicked | Signin page loads | ✅ |
| # button clicked any field empty |
validation message appears | ✅ |
| # button clicked password fields don't match OR password does not conform to rules |
validation message appears | ✅ |
| # button clicked username already exists |
validation message appears | ✅ |
| # button clicked all fields filled correctly |
user is signed up Signin page loads |
✅ |
Click to play video
05-#-page-manual-testing.mp4
This page is only available to logged out users.
| Action | Expected result | Result |
|---|---|---|
| page loads | Signin text visible # link visible username field visible password field visible # link visible signin background image visible |
✅ |
| # link clicked | # page loaded | ✅ |
| Signin button clicked any field empty |
validation message appears | ✅ |
| Signin button clicked both fields filled credentials not correct |
validation message appears | ✅ |
| Signin button clicked both fields filled credentials correct |
user is signed in Task Kanban page loads navigation bar icons change |
✅ |
Click to play video
06-signin-page-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | hamburger icon not visible & nav links visible | ✅ |
| plus icon clicked | TaskCreate Form loaded | ✅ |
| boards icon clicked | Task Kanban page loaded | ✅ |
| list icon clicked | Task list page loaded | ✅ |
| sign out icon clicked | user is signed out & navigation bar icons change | ✅ |
| logo and brand name clicked | Task Kanban page loaded | ✅ |
Click to play video
07-navigation-bar-user-logged-in.mp4
Tabbed filtering of tasks is enabled on the following pages:
| Action | Expected result | Result |
|---|---|---|
| Task Kanban or Task List page loads | 4 tabs visible: assigned to, watched by & created by the logged-in user, "all tasks" | ✅ |
| Profile Detail page loads | 3 tabs visible: assigned to, watched by & created by the viewed user | ✅ |
| page loads | search field is visible | ✅ |
| page loads | assigned to tab content is visible | ✅ |
| page loads | user-specific tabs have a task count in parentheses next in their label | ✅ |
| user clicks on a tab | that tasks's content becomes visible without having to reload the page | ✅ |
| user watches/unwatches a task | tab counts and contents update without having to reload the page | ✅ |
| Kanban only: user deletes a task |
tab counts and contents update without having to reload the page | ✅ |
Click to play video
08-task-tabs-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | tasks appear in tabbed task list format | ✅ |
| page loads | 3 columns visible on each tab: To Do, In Progress & Done, with tasks sorted accordingly | ✅ |
| page loads | Teammates link appears next to the search bar | ✅ |
| page loads | Infinite Scroll is active in each column | ✅ |
| page loads | each task card's color is set according to task prioriy | ✅ |
| page loads | vertical dots icon visible for each task owned by the logged-in user | ✅ |
| vertical dots icon clicked | pencil and trashcan icons appear | ✅ |
| user clicks outside edit/delete menu | pencil and trashcan icons disappear | ✅ |
| pencil icon clicked | Task Edit Form opens | ✅ |
| trashcan icon clicked | task deletion modal opens | ✅ |
| Teammates link clicked | Profile List page opens | ✅ |
Click to play video
09-task-kanban-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | tasks appear in tabbed task list format | ✅ |
| page loads | Teammates list appears to the right of to the task list showing user picture and conditional name |
✅ |
| page loads | the logged-in user does not appear in the Teammates list | ✅ |
| page loads | Infinite Scroll is active in task list | ✅ |
| page loads | Infinite Scroll is active in Teammates list | ✅ |
| page loads | each task card's color is set according to task prioriy | ✅ |
| page loads | vertical dots icon visible for each task owned by the logged-in user | ✅ |
| vertical dots icon clicked | pencil and trashcan icons appear | ✅ |
| user clicks outside edit/delete menu | pencil and trashcan icons disappear | ✅ |
| pencil icon clicked | Task Edit Form opens | ✅ |
| trashcan icon clicked | task deletion modal opens | ✅ |
| Teammates link clicked | Profile List page opens | ✅ |
| user avatar in Teammates list clicked | Profile Detail page for corresponding user opens | ✅ |
Click to play video
10-task-list-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| Task Detail page loads | assignee or "not assigned" visible status visible priority visible title visible excerpt visible (if any) due date visible watch icon visible description visible (if any) "last updated on" visible "created on" visible created by visible image visible (if any) comment field visible comments visible (if any) |
✅ |
| logged in user owns task | vertical dots icon visible on top right | ✅ |
| vertical dots icon clicked | pencil and trashcan icons appear | ✅ |
| user clicks outside edit/delete menu | pencil and trashcan icons disappear | ✅ |
| pencil icon clicked | Task Edit Form opens | ✅ |
| trashcan icon clicked | task deletion modal opens | ✅ |
Click to play video
11-task-detail-manual-testing.mp4
A search bar appears on the Task List, Task Kanban and Profile Detail pages.
The contents of Task objects can be searched. Fields searched are:
- title
- excerpt
- description
- assignee
- owner
| Action | Expected result | Result |
|---|---|---|
| page loads | search bar visible | ✅ |
| user types in search bar | tasks are filtered with a few second's delay after the user starts typing | ✅ |
| there are tasks matching the search string | only the matching tasks are listed from the active tab | ✅ |
| there are no tasks matching the search string | information message appears with "not found" asset | ✅ |
| user click on another tab | search bar content & search result fintering is cleared | ✅ |
Click to play video
12-task-search-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | empty task create form visible | ✅ |
| title field empty | create button disabled instruction text shown below button |
✅ |
| title field filled | create button enabled instruction text below button disappears |
✅ |
| cancel button clicked | new task not created confirmation message appears |
✅ |
| create button clicked | new task created confirmation message appears |
✅ |
Click to play video
13-task-create-form-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | task edit form visible, populated with task data | ✅ |
| title field filled | save button enabled instruction text below button not shown |
✅ |
| title field content is deleted | save button disabled instruction text shown below button |
✅ |
| title field filled again | save button enabled instruction text below button disappears |
✅ |
| cancel button clicked | task data not updated confirmation message appears |
✅ |
| save button clicked | task data updated confirmation message appears |
✅ |
Click to play video
14-task-edit-form-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| cancel button clicked on delete modal | delete modal closes task is not deleted confirmation message appears |
✅ |
| delete button clicked on delete modal | task is deleted user is redirected to Kanban page confirmation message appears |
✅ |
Click to play video
15-task-deletion-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| Task Detail page loads | comment field visible comment button visible |
✅ |
| logged in user has previous comments | vertical dots icon visible for each comment belonging to the user | ✅ |
| comment button clicked comment field empty |
comment button is disabled | ✅ |
| comment button clicked comment field not empty |
comment appears in comment list vertical dots icon appears next to comment confirmation message appears |
✅ |
| vertical dots icon clicked | pencil and trashcan icons appear | ✅ |
| user clicks outside edit/delete menu | pencil and trashcan icons disappear | ✅ |
| pencil icon clicked | comment text filled into comment field save & cancel buttons appear |
✅ |
| cancel button clicked | comment text not updated confirmation message appears |
✅ |
| save button clicked | comment text updated confirmation message appears |
✅ |
| trashcan icon clicked | comment is deleted confirmation message appears |
✅ |
Click to play video
16-comments-manual-testing.mp4
The watch/unwatch functionality is available in every Task view apart from the Task Create & Edit Forms.
| Action | Expected result | Result |
|---|---|---|
| page loads | watch icon is visible on task card watcher count visible on task card |
✅ |
| user hovers over eye outline icon | "watch" tooltip appears | ✅ |
| user hovers over solid eye icon | "unwatch" tooltip appears | ✅ |
| user clicks eye outline icon | watcher count increases by one icon changes to solid eye watched tab updated accordingly |
✅ |
| user clicks solid eye icon | watcher count decreases by one icon changes to eye outline watched tab updated accordingly |
✅ |
Click to play video
17-watchers-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | Teammates list appears in full page view displaying each user's picture, conditional name, pronouns (if any), role (if any) | ✅ |
| page loads | the logged-in user does not appear in the list | ✅ |
| page loads | Infinite Scroll is active in Teammates list | ✅ |
| user avatar in Teammates list clicked | Profile Detail page for corresponding user opens | ✅ |
Click to play video
18-profile-list-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads & profile belongs to logged-in user | profile details appear | ✅ |
| page loads & profile doesn't belong to logged-in user | avatar, conditional name & any filled-in profile fields appear | ✅ |
| page loads | tasks related to the user appear in a tabbed task list format | ✅ |
| logged in user owns profile | pencil icon visible on top right | ✅ |
| pencil icon clicked | pencil with notepad, id card & key icons appear with corresponding descriptions | ✅ |
| user clicks outside edit menu | pencil with notepad, id card & key icons and corresponding descriptions disappear | ✅ |
| pencil with notepad icon clicked | Profile Edit Form opens | ✅ |
| id card icon clicked | Username Edit form opens | ✅ |
| key icon clicked | Password Edit form opens | ✅ |
| page loads | Teammates list appears to the right of to the task list showing user picture and conditional name |
✅ |
| page loads | the logged-in user does not appear in the Teammates list | ✅ |
| page loads | Infinite Scroll is active in Teammates list | ✅ |
| Teammates link clicked | Profile List page opens | ✅ |
| user avatar in Teammates list clicked | Profile Detail page for corresponding user opens | ✅ |
Click to play video
19-profile-detail-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | profile edit form visible, filled with existing data | ✅ |
| cancel button clicked | profile data not updated confirmation message appears |
✅ |
| save button clicked | profile data updated confirmation message appears |
✅ |
Click to play video
20-profile-edit-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | username edit form visible, filled with existing username | ✅ |
| cancel button clicked | username not updated confirmation message appears |
✅ |
| save button clicked & username is not valid | validation message appears | ✅ |
| save button clicked & username is valid | username updated confirmation message appears |
✅ |
Click to play video
21-username-edit-manual-testing.mp4
| Action | Expected result | Result |
|---|---|---|
| page loads | password edit form visible | ✅ |
| cancel button clicked | password not updated confirmation message appears |
✅ |
| save button clicked & password fields are empty | validation message appears | ✅ |
| save button clicked & passwords do not match | validation message appears | ✅ |
| save button clicked & passwords are not valid | validation message appears | ✅ |
| save button clicked & passwords match and are valid | password updated confirmation message appears |
✅ |
Click to play video
22-password-edit-manual-testing.mp4
Infinite scroll is used to load the next page of data from the API. It is used for the following components
| Action | Expected result | Result |
|---|---|---|
| page loads | first 10 objects in a list are loaded the objects appearing on the page can be less because of filtering |
✅ |
| scrolls down within the component | another page of objects is loaded | ✅ |
| there are no more objects to load | and end message appears after the list | ✅ |
Click to play video
23-infinite-scroll-manual-testing.mp4
Notification messages are used to confirm CRUD actions in the following components:
| Action | Expected result | Result |
|---|---|---|
| notification is triggered | notification appears in the top right corner | ✅ |
| user clicks notification | notification disappears right after click | ✅ |
| user does not click notification | notification disappears when the timer bar runs out | ✅ |
Click to play video
24-notifications-manual-testing.mp4
The following pages have been tested with Lighthouse emulating both a mobile and a desktop use case:
- landing page
- signin page
- # page
- task kanban page
- task list page
- task detail page
- task create page
- task edit page
- profile list page
- profile detail page
The accessibility audits uncovered some minor issues with color contrasts and heading precedence. These were all corrected (see the commits of the corresponding Issue), so that the final accessibility audit result for all pages tested is 100%.
All accessibility reports can be found in this folder.
In addition to Lighthouse, color contrasts were also tested with the WebAIM Contrast Checker. This was especially important given that tasks have multiple color schemes conditionally rendered depending on their priority.
Where contrast did not meet at least AA standard, the colors were changed.
As pointed out by my mentor, the orange color of the navbar icons does not need to reach high contrast with the background, since it is always accompanied by a corresponding text indicating where the nav link leads.
| color name | HEX code |
|---|---|
| very-dark-high | #531D04 |
| dark-high | #D7410F |
| light-high | #f7ddcf |
| color name | HEX code |
|---|---|
| very-dark-med | #530E0E |
| dark-med | #992319 |
| light-med | #FBEDE5 |
| color name | HEX code |
|---|---|
| very-dark-low | #07565A |
| dark-low | #0A8385 |
| light-low | #D1FAF3 |
| color name | HEX code |
|---|---|
| light-neutral | #F9FAFC |
| white | #FFFFFF |
| light-gray | #dadadf |
| gray | #242a3d |
| color 1 | color 2 | contrast | WCAG AA/AAA | Comment |
|---|---|---|---|---|
| very-dark-high | white | 13.58:1 | AAA | |
| very-dark-high | light-high | 10.48:1 | AAA |
|very-dark-high |light-neutral |13:01:1 |AAA| | |dark-high |white |4.51:1 |AA | Only used for large text| |dark-high |light-high |3.48:1 |AA|Only used for icon|
| color 1 | color 2 | contrast | WCAG AA/AAA | Comment |
|---|---|---|---|---|
| very-dark-med | white | 14.61:1 | AAA | |
| very-dark-med | light-med | 12.76:1 | AAA |
|dark-med |white |8.04:1 |AAA | Only used for large text| |dark-med |light-med |7.03:1 |AAA|Only used for icon|
| color 1 | color 2 | contrast | WCAG AA/AAA | Comment |
|---|---|---|---|---|
| very-dark-low | white | 8.44:1 | AAA | |
| very-dark-low | light-low | 7.5:1 | AAA |
|dark-low |white |4.56:1 |AA | Only used for large text| |dark-low |light-low |4.06 :1 |AA|Only used for icon|
As all pages containing task or profile data should only be accessible to Logged-in Users in this app, I decided to focus automated testing on this aspect.
In addition to implementing the tests for Avatar and Signout link being in the NavBar for Logged-in Users, I have also implemented tests for the Task Create, Task Kanban and Task List links.
All automated tests pass without error.
All bugs are tracked in GitHub Issues.
Known bugs are listed in GitHub Issues.
Solved bugs are listed in GitHub Issues.
- 3 401 (unauthorized) errors on mount/refresh
- 401 when visiting the Signin or # pages
- 400 errors when sending incorrect form data
- a 401 (unauthorized) error when refreshing the access token