TESTING.md

Back to README.md.

Table of Contents

• Testing User Stories
• Code validation
  • HTML validation
    • Home page validation
    • Home page paginated validation
    • Home page filtered validation
    • Home page filtered paginated validation
    • Home page filtered with no results validation
    • Search page validation
    • Search page with no results
    • Search page with paginated link validation
    • Signup: known issue
    • Signin validation
    • Signout validation
    • Confirm email validation
    • Community validation
    • Profile detail validation
  • CSS validation
  • JavaScript validation
    • comments.js: known issue
    • filter.js validation
    • themes.js validation
  • Python validation
    • collection app Python validation
      • admin.py
      • forms.py
      • models.py
      • test_forms.py
      • test_views.py
      • urls.py
      • views.py
      • urls.py
    • community app Python validation
      • admin.py
      • models.py
      • views.py
      • urls.py
  • Project-level Python validation
    • settings.py
    • urls.py
• Manual feature testing
  • Collection/recipes manual testing
    • Navigation bar | desktop
    • Navigation bar | mobile
    • User bar | if user signed in
    • User bar | if user not signed in
    • Footer
    • Home page
    • Recipe detail page
    • Search results page
    • Pagination links
  • Community manual testing
    • Community page
    • Profile detail page
  • Authentication manual testing
    • Signin page
    • Signout page
    • Signup page
    • Email sent page
    • Confirm email page
    • Password reset page
    • Change password page
• Accessibility testing
  • Lighthouse
  • Color contrasts
    • Color specifications
      • Orange theme specifications
      • Blue theme specifications
      • Green theme specifications
      • Neutral color specifications
    • Orange theme contrast check
    • Blue theme contrast check
    • Green theme contrast check
• Automated testing
• Bugs
  • Known bugs
  • Solved bugs

Table of contents generated with readme-toc

Testing User Stories

At the end of the development process, a final check was made on the list of initially planned User Stories to document which ones have been completed.

The results are summarized in the following table (click here for the original Sheet):

As the table shows, all User Stories marked as part of the MVP (priority must have) have been completed, along with a significant number of User Stories that were outside the scope of the MVP.

The Epic Manage own About info and its User Stories were marked as duplicates of the ones relating to User Profiles.

The Epics Manage own ingredient quantities and Manage own recipes have been implemented in the Admin panel by restricting the objects that Staff users have access to. As this functionality was not part of the MVP, and the allotted time did not allow for completion of all User Stories, implementing the same functionality in the UI was deemed outside the scope of the current version.

Work items that were not part of the initial planning phase and were adding during the course of development as requirements became clarified are as follows:

• The Epic Manage own ingredients (Collaborators) and its User Stories
• The Epic Recipe attributes and its User Stories
• the color theme selection functionality
• restricted Staff access to the Admin panel

Code validation

HTML validation

Home page validation

Validation found no errors or warnings.

Home page paginated validation

Validation found no errors or warnings.

Home page filtered validation

Validation found no errors or warnings.

Home page filtered paginated validation

Validation found no errors or warnings.

Home page filtered with no results validation

Validation found no errors or warnings.

Search page validation

Validation found no errors or warnings.

Search page with no results

Validation found no errors or warnings.

Search page with paginated link validation

Validation found no errors or warnings.

Signup: known issue

The Allauth template for Signup.html has a known issue that produces validation errors. Since this is a problem with the framework code, and not the custom code written for this project, and it does not affect the functionality of the app, this was not corrected.

Signin validation

Validation found no errors or warnings.

Signout validation

Validation found no errors or warnings.

Confirm email validation

Validation found no errors or warnings.

Community validation

Validation found no errors or warnings.

Profile detail validation

Validation found no errors or warnings.

CSS validation

style.css was validated with Jigsaw and passed without errors or warnings.

JavaScript validation

All self-written JavaScript files were validated with JSHint. No errors were found apart from the known issue below.

comments.js: known issue

The file comments.js (which is identical to the one used in the walkthrough project) produces the following error during JS validation:

1 undefined variable
bootstrap

filter.js validation

Validation found no issues.

themes.js validation

Validation found no issues.

Python validation

All self-written or modified Python files in the project were validated with the Code Institute PEP8 Linter. No errors were found.

collection app Python validation

admin.py

Validation found no issues.

forms.py

models.py

Validation found no issues.

test_forms.py

Validation found no issues.

test_views.py

Validation found no issues.

urls.py

Validation found no issues.

views.py

Validation found no issues.

urls.py

Validation found no issues.

community app Python validation

admin.py

Validation found no issues.

models.py

Validation found no issues.

views.py

Validation found no issues.

urls.py

Validation found no issues.

Project-level Python validation

settings.py

Validation found no issues.

urls.py

Validation found no issues.

Manual feature testing

Collection/recipes manual testing

Navigation bar | desktop

Action	Expected result	Result
page loads	hamburger icon not visible logo and brand name visible brand text visible nav links visible Search bar visible color selector visible	✅
color selector changed	page color scheme changes persistently	✅
Community link clicked	Community page loaded	✅
Recipes link clicked	Home page loaded	✅
Search button clicked	Search page loaded	✅
logo and brand name clicked	home page loaded	✅

Click to play video

navigation-bar-desktop.mp4

Navigation bar | mobile

Action	Expected result	Result
page loads	hamburger icon visible logo and brand name visible brand text not visible nav links not visible Search bar not visible color selector not visible	✅
hamburger icon clicked	Search bar and color selector revealed	✅
hamburger icon clicked again	Search bar and color selector hidden	✅

Click to play video

navigation-bar-mobile.mp4

User bar | if user signed in

Action	Expected result	Result
page loads	"Welcome, user!" visible "You are not logged in" not visible Signout link visible	✅
Signout link clicked	Signout page loaded	✅

Click to play video

user-bar-if-user-signed-in.mp4

User bar | if user not signed in

Action	Expected result	Result
page loads	"Welcome, user!" not visible "You are not logged in" visible Signin link visible	✅
Signin link clicked	Signin page loaded	✅
Signup link clicked	Signup page loaded	✅

Click to play video

user-bar-if-user-not-signed-in.mp4

Footer

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

footer.mp4

Home page

Displays the list of recipes

Action	Expected result	Result
home page loads	filters visible recipe cards visible pagination visible	✅
filter changed	result count visible recipe list is filtered	✅
result count > 6	pagination visible	✅
any recipe card clicked	corresponding recipe detail page loads	✅

Click to play video

home-filter.mp4

Recipe detail page

Action	Expected result	Result
recipe detail page loads	title visible author visible attributes visible (if any) ingredients visible (if any) image visible total time, prep time & cook time visible instructions visible comments visible (if any)	✅
user not logged in	"Sign in to leave a comment"	✅
user logged in	comment field visible comment field & button visible own pending comments visible	✅
user logged in user has comments	Edit & Delete button visible for each comment	✅
comment button clicked comment field empty	"Please fill in this field"	✅
comment button clicked comment field not empty	comment appears as unapproved edit & delete buttons appear	✅
Edit button clicked	comment text filled into comment field Submit button changes to Update	✅
Update button clicked	comment text updated comment set to unapproved	✅
Delete button clicked	delete modal pops up	✅
Close button clicked on delete modal	delete modal closes comment remains	✅
Delete button clicked on delete modal	comment is deleted confirmation message appears	✅

Click to play video

recipe-detail-page-not-logged-in.mp4

Click to play video

recipe-detail-page-logged-in.mp4

Search results page

Action	Expected result	Result
Search page loaded	result count visible recipe list is filtered	✅
result count > 6	pagination visible	✅

Click to play video

search-results-page.mp4

Pagination links

Action	Expected result	Result
more recipes/results exist	Next button visible	✅
previous results exist	Prev button visible	✅
Next button clicked	next page of results is loaded	✅
Prev button clicked	previous page of results is loaded	✅

Click to play video

pagination-links.mp4

Community manual testing

Community page

Displays the list of profiles

Action	Expected result	Result
Community page loads	profile cards visible	✅
any profile card clicked	corresponding profile detail page loads	✅

Profile detail page

Action	Expected result	Result
Profile detail page loads	name or username visible status visible pronouns visible (if any) neurodiversity visible (if any) about text visible (if any)	✅

Click to play video

community-page.mp4

Authentication manual testing

Signin page

Action	Expected result	Result
Signin page loads	Signin text visible Signup link visible username field visible password field visible Signup button visible password reset link visible	✅
Signup link clicked	Signup page loaded	✅
password reset link clicked	password reset page loaded	✅
Signin button clicked any field empty	"Please fill in this field"	✅
Signin button clicked noth fields filled credentials not correct	"The username and/or password you specified are not correct."	✅
Signin button clicked both fields filled credentials correct email not confirmed	user is signed in Email sent page loads confirmation email sent	✅
Signin button clicked both fields filled credentials correct email confirmed	user is signed in home page loads	✅

Click to play video

signin-page.mp4

Signout page

Action	Expected result	Result
Signout page loads	Signout text visible Signout button visible	✅
Signout button clicked	user signed out home page loads	✅

Click to play video

signout-page.mp4

Signup page

Action	Expected result	Result
Signup page loads	Signup text visible Signin link visible email field visible username field visible password field visible password rules visible password (again) field visible Signup button visible password reset link visible	✅
Signin link clicked	Signin page loaded	✅
password reset link clicked	password reset page loaded	✅
Signup button clicked any field empty	"Please fill in this field"	✅
Signup button clicked email field has no @	"Please include an @..."	✅
Signup button clicked password fields don't match OR password does not conform to rules	password fields get emptied	✅
Signup button clicked email already registered	"A user with that username already exists"	✅
Signup button clicked all fields filled correctly	user is signed up Email sent page loads verification email sent to user	✅
user clicks link in verification email	Confirm email page loads

Click to play video

signup-page-1.mp4

Email sent page

Action	Expected result	Result
Email sent page loads	confirmation email sent to user	✅

Signup confirmation email

Confirm email page

Action	Expected result	Result
Confirm email page loads	confirm text visible confirm button visible	✅
confirm button clicked	registration confirmed Signin page loads	✅

Click to play video

confirm-email-page.mp4

Password reset page

Action	Expected result	Result
password reset page loads	reset text visible email field visible reset button visible	✅
reset button clicked email not valid	"email not valid"
reset button clicked email valid email not in database	reset confirmation page loads "we have no record of you" email sent	✅
reset button clicked email valid email in database	reset confirmation page loads password reset email sent	✅
reset link in email clicked	change password page shown	✅

Click to play video

password-reset-page-1.mp4

Password reset email sent to unregistered user

Password reset email sent to registered user

Change password page

Action	Expected result	Result
change password loads	change password text visible new password field visible new password again field visible change password button visible	✅
change password button clicked only 1 password field filled	"Please fill out this field"	✅
change password button clicked passwords don't match	"You must type the same password each time"	✅
change password button clicked passwords match	"Your password is now changed"	✅

Click to play video

change-password-page.mp4

Accessibility testing

Lighthouse

The following pages have been tested with Lighthouse emulating both a mobile and a desktop use case:

• home / recipe list
• home / recipe list with paginated link
• home / recipe list filtered
• home / recipe list filtered with no results
• home / recipe list filtered with paginated link
• search
• search with no results
• search with paginated link
• register / /signup
• signin
• signout /logoutconfirm
• confirm-email (when an unvalidated user tries to log in)
• community / profile list
• profile detail

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. Reports starting with 100 are the final ones, while those with lower numbers are earlier reports whose issues have been corrected.

Color contrasts

In addition to Lighthouse, color contrasts were also tested with the WebAIM Contrast Checker. This was especially important given that the project has multiple color schemes.

Color specifications

Orange theme specifications

color name	HEX code
very-dark-orange	#531D04
dark-orange	#D7410F
med-orange	#FD7E14
light-orange	#f7ddcf

Blue theme specifications

color name	HEX code
very-dark-blue	#08374F
dark-blue	#0F6895
med-blue	#20A6E9
light-blue	#BFE6F7

Green theme specifications

color name	HEX code
very-dark-green	#084f37
dark-green	#1b871d
med-green	#7ef075
light-green	#ceedcc

Neutral color specifications

color name	HEX code
light-neutral	#F9FAFC
white	#FFFFFF

Orange theme contrast check

color 1	color 2	contrast	WCAG AA/AAA	Comment
very-dark-orange	white	13.58:1	AAA
very-dark-orange	light-orange	10.48:1	AAA
very-dark-orange	med-orange	5.28:1	AA	Only used for large text
very-dark-orange	light-neutral	13:01:1	AAA
dark-orange	white	4.51:1	AA
dark-orange	light-orange	3.48:1	AA	Only used for large text

Blue theme contrast check

color 1	color 2	contrast	WCAG AA/AAA	Comment
very-dark-blue	white	12.57:1	AAA
very-dark-blue	light-blue	10.48:1	AAA
very-dark-blue	med-blue	4.6:1	AAA	Only used for large text
very-dark-blue	light-neutral	12.04:1	AAA
dark-blue	white	6.11:1	AA
dark-blue	light-blue	4.62:1	AAA	Only used for large text

Green theme contrast check

color 1	color 2	contrast	WCAG AA/AAA	Comment
very-dark-green	white	9.61:1	AAA
very-dark-green	light-green	7.6:1	AAA
very-dark-green	med-green	6.68:1	AAA	Only used for large text
very-dark-green	light-neutral	9.2:1	AAA
dark-green	white	4.63:1	AA
dark-green	light-green	3.66 :1	AAA	Only used for large text

Automated testing

Automated tests were written for the following test cases:

collection/test_forms:

• comment form is valid
• comment form is invalid

collection/test_views:

• render recipe detail page with comment form
• successful comment submission
• successful comment editing
• unsuccessful comment editing
• successful comment deletion
• unsuccessful comment deletion

All automated tests pass without issues.

Bugs

All bugs are tracked in GitHub Issues.

Known bugs

Known bugs are listed in GitHub Issues.

Solved bugs

Solved bugs are listed in GitHub Issues.