TESTING.md

the Recipe Collective Testing

The testing.md file provides an overview of the testing conducted on the Recipe Collective website. It covers code validation, accessibility, performance, testing on various devices, browser compatibility, testing user stories, and user feedback and improvements. Each section describes the tools used, the issues found (if any), and the corresponding test results.

Table of Content

1. Code Validation
   1. HTML Validation
   2. CSS Validation
   3. Python Validation
2. Accessibility
3. Performance
   1. Desktop Performance
   2. Mobile Performance
4. Performing tests on various devices
5. Browser compability
6. Manual Testing
   1. Testing user stories
   2. User Experience and Improvements
   3. Full testing
7. Summary

Code Validation

HTML Validation

W3C Markup Validation is a service provided by the W3C that allows you to validate your HTML code against the official specifications. It checks for syntax errors, improper tag usage, and other issues that may affect the structure and semantics of your web pages. Validating your HTML code with W3C Markup Validation helps ensure that your pages are well-formed and adhere to web standards

All pages passed through the validation and the code was pasted in and I used a filter to remove issues related to the Django templating system.

See filter

Tested	Result	View Result	Pass
base	No errors	Screenshot of result	✅
index	No errors	Screenshot of result	✅
about	No errors	Screenshot of result	✅
register	No errors	Screenshot of result	✅
login	No errors	Screenshot of result	✅
profile	No errors	Screenshot of result	✅
logout	No errors	Screenshot of result	✅
home	No errors	Screenshot of result	✅
myrecipes	No errors	Screenshot of result	✅
favorites	No errors	Screenshot of result	✅
cookbook_links	No errors	Screenshot of result	✅
list_card	No errors	Screenshot of result	✅
pagination	No errors	Screenshot of result	✅
recipe_form	No errors	Screenshot of result	✅
recipe_detail	No errors	Screenshot of result	✅
recipe_confirmation_delete	No errors	Screenshot of result	✅

CSS Validation

W3C Jigsaw is a tool provided by the World Wide Web Consortium (W3C) that allows you to validate and check the correctness of your HTML and CSS code. It helps ensure that your web pages comply with the standards set by the W3C, promoting interoperability and accessibility.

Tested	Result	View Result	Pass
CSS file	No errors	Result	✅
Whole webpage	When validating the page as a whole, the validator shows some errors linked to Bootstrap v5.0. When validating just my own custom CSS	Result	✅

Python Validation

PEP 8 is a style guide for writing Python code to ensure consistency and readability. It provides guidelines on how to format code, naming conventions for variables and functions, and other best practices. Following PEP 8 helps to improve code quality, readability, and maintainability.

The settings file had one URL that was too long, while the other lines exceeding the recommended length were automatically generated by Django.All other files had no errors and were clear of any issues.

Note: The specific details and validation results for each file can be viewed by expanding the corresponding sections.

Tested	Result	View Result	Pass
settings	One URL was too long, while the other lines that exceeded the recommended length were automatically generated by Django.		✅
views	All clear, no errors found		✅
cookbook/models	29: E501 line too long (108 > 79 characters) - URL for default image		✅
cookbook/views	All clear, no errors found		✅
users/forms	All clear, no errors found		✅
users/models	One line too long because of URL		✅
users/signals	All clear, no errors found		✅
users/views	All clear, no errors found		✅

Back to the top

Accessibility

The WAVE Web Accessibility Evaluation Tool was used to assess the accessibility of the website. WAVE helps identify potential accessibility issues and provides guidance on how to improve the accessibility of web content.

During the evaluation, the following issues were identified:

• Errors: The website generated 5 errors, which are related to the Bootstrap footer.

• Contrast Warning: I received a contrast warning for my primary button, which has white text against a brownish background. It's worth noting that I intentionally chose this design with white text, as it aligns with my overall aesthetic and branding. While I understand that using black text for better readability on the button, I have decided to maintain the white text as a deliberate design choice.

• Redundant Link Alert: The tool flagged one alert for a redundant link. This alert is due to the tool misinterpreting the {{}} inserted URL pages, mistakenly assuming they are duplicate links. I want to clarify that these links are not going to the same place. This alert does not impact the functionality or accessibility of my website.

By using the WAVE tool, I gained valuable insights into the accessibility of my website. While I have chosen not to address certain errors at this time, I remain committed to creating an inclusive user experience and will continue to explore ways to improve accessibility in the future.

Back to the top

Performance

The Recipe Collective website was tested using Google Lighthouse in Google Chrome Developer Tools. The performance scores were evaluated for both desktop and mobile devices. Here are the summarized results:

Desktop Performance

• Average performance score: 92/100
• The majority of pages received scores above 90/100, indicating excellent performance.
• The Logout page received a score of 85/100 due to preventing back/forward cache restoration, which is intentional to maintain security.

Tested	Performance Score	View Result	Pass
index	98 / 100	Screenshot of result	✅
about	98 / 100	Screenshot of result	✅
sign up	98 / 100	Screenshot of result	✅
login	98 / 100	Screenshot of result	✅
profile	94 / 100	Screenshot of result	✅
logout	85 / 100	Screenshot of result	✅
cookbook	83 / 100	Screenshot of result	✅
my recipes	95 / 100	Screenshot of result	✅
my favorites	99 / 100	Screenshot of result	✅
recipe details	98 / 100	Screenshot of result	✅
add recipe	92 / 100	Screenshot of result	✅
update recipe	95 / 100	Screenshot of result	✅
delete recipe	98 / 100	Screenshot of result	✅

Mobile Performance

• Average performance score: 77/100
• The pages showed slightly lower performance compared to desktop, but still maintained a satisfactory score.
• The Logout page received a score of 71/100 due to preventing back/forward cache restoration, which is intentional to maintain security.

Tested	Performance	View Result	Pass
index	77 / 100	Screenshot of result	✅
about	76 / 100	Screenshot of result	✅
sign up	77 / 100	Screenshot of result	✅
login	72 / 100	Screenshot of result	✅
profile	71 / 100	Screenshot of result	✅
logout	71 / 100	Screenshot of result	✅
cookbook	80 / 100	Screenshot of result	✅
my recipes	77 / 100	Screenshot of result	✅
my favorites	88 / 100	Screenshot of result	✅
recipe details	72 / 100	Screenshot of result	✅
add recipe	73 / 100	Screenshot of result	✅
update recipe	72 / 100	Screenshot of result	✅
delete recipe	72 / 100	Screenshot of result	✅

Overall, the Recipe Collective website performed well in terms of performance, providing a smooth user experience on both desktop and mobile devices.

Back to the top

Performing tests on various devices

The website was tested on the following devices:

• Samsung Galaxy Note S20 ultra
• Samsung Galaxy Note S22 ultra
• Apple iPhone 12
• OnePlus 8

In addition, the website was tested using Google Chrome Developer Tools Device Toggeling option for all available device options.

Back to the top

Browser compability

The website was tested on the following browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Egde

Back to the top

Manual Testing

Testing user stories

As a first-time user...

User Story	Action	Expected Result	Pass
I can create an account so that I can save my recipes	Click on the "Signup" navigation link or the signup button on the landing page	The user should be redirected to the signup form	✅
I want to be able to access the About page so that I can learn more about the purpose, features, and benefits of the Recipe Collective without needing to create an account	Click on the "About" button in the navigation bar on the landing page	The user should be directed to the About page	✅

As a returning user...

User Story	Action	Expected Result	Pass
I can log in to my account	Press the login button either on the landing page or in the navbar	The user should be directed to the login page	✅
I can log out of my account	Press the profile button and then select the logout option	The user should be logged out of their account	✅
I can go to my profile page so that I can see my saved recipes and personal information	Press the profile button on the right side of the navbar and then on Profile in the drop down menu	The user should be redirected to their profile page	✅
I want to be able to navigate through a long list of recipes using pagination so that I can view and interact with the list easily	Scroll down to the bottom of the Cookbook, My Recipes, or Favorites section	If there are more than 9 recipes, pagination is displayed to navigate through the list	✅
I can view all recipes so that I can find new recipes to try	Click on the "Cookbook" link in the navigation bar	The user is directed to the recipe list view	✅
I can click on a recipe so that I can get all details and instructions about it	Click on the recipe title or the info button	The user is taken to the recipe detail page	✅
I can save recipes that I find in my own "cookbook" so that I can find them easily in the future	Click on the heart icon on the upper right part of the recipe detail page	The recipe is added to the favorites page, and a flash message appears confirming that it has been saved to favorites	✅
I can add a new recipe so that I can share it with others and save it for myself	Press the profile button and then "Add recipe in the dropdown navigation bar	The user is directed to the recipe form	✅
I can edit my own recipes so that I can update them if needed	Click on the "Update" button in the upper right corner of the recipe detail page	The user is directed to the recipe form to update the recipe	✅
I can delete my own recipe so that I can remove them if wanted	Click the delete button on the recipe detail page	The user is taken to a confirmation page to confirm the deletion of the recipe. Upon confirming, the recipe is deleted	✅
I can comment on a recipe so that share my thoughts and suggestions	Scroll down to the comment form on the recipe detail card and add a comment	The comment is successfully added	✅

As a site owner...

User Story	Action	Expected Result	Pass
I can view and manage user accounts to ensure the security and integrity of the site and its users	Access the Django admin section and navigate to the user management section	The admin section displays all users and their associated information. The owner can perform actions such as deleting users and managing their comments	✅
I can view and manage recipes to maintain a high standard of content and ensure the quality of the recipes on the site	Access the admin page and navigate to the recipe management section	The admin page allows the owner to view and manage all recipes, ensuring the quality and standards of the content	✅

Back to the top

User Experience and improvements

I conducted user testing with 10 individuals to gather feedback on their experience using the website. I asked them to perform the following tasks and provide feedback on their experience:

• Create an account
• Update the profile
• Add a recipe (1 or more)
• Update a recipe
• Delete a recipe
• Mark a recipe as a favorite
• Comment on a recipe
• Test links

Each participant was encouraged to provide feedback and report any issues or improvements they encountered during the testing process. Below is the feedback/issues reported.

Feature	Feedback	Result	Pass
Navbar	Some users found the initial profile icon (chef's hat) unclear. Both color and icon was changed to make it more clear that this is a button for the user profile section	Screenshot of result	✅
Scrolling Recipes	Some users found the sticky footer annoying. The sticky footer was removed, resulting in a better scrolling experience for recipes.	Removed the sticky-bottom to footer which gives a better experience when scrolling the recipes in the cookbook	✅

Full testing

Navbar unauthorized user

Feature	Expected Outcome	Testing Performed	Result	Pass
Logo	Redirects to index.page	Clicked on logo	index page loads	✅
About	Redirects to the about page with login and sign up buttons	Clicked on link "About"	about page loads and shows the login and signup buttons	✅
Login	Redirects to the login page	clicked on link "Login"	loads the login page and form	✅
Sign up	Redirects to to the signup page and form	clicked on the link "Sign up"	loads the sign up page and form	✅

Navbar authorized user

Feature	Expected Outcome	Testing Performed	Result	Pass
Logo	Redirects to the collective cookbook	Clicked on logo	the collective cookbook page loads	✅
About	Redirects to the about page with buttons to "Cookbook" and "My Favorites"	Clicked on link "About"	about page with links to "Cookbook" and "My Favorites" loads	✅
Meal Planner	Link not working	Clicked on link	Nothing happens	✅
Profile image/icon	Triggers the dropdown menu	Clicked on image	The dropdown menu is displayed	✅

Profile drop down menu

Feature	Expected Outcome	Testing Performed	Result	Pass
Profile	Redirects to the profile page with the user's information and editable form	Clicked on "Profile" link	The profile page loads, displaying the user's information and an editable form	✅
Add Recipe	Redirects to the "Add Recipe" page with the recipe submission form	Clicked on "Add Recipe" link	The "Add Recipe" page loads, displaying the recipe submission form	✅
My Recipes	Redirects to the page displaying the user's uploaded recipes	Clicked on the "My Recipes" link	The "My Recipes" page loads, showing the user's uploaded recipes	✅
Favorite Recipes	Redirects to the page displaying the user's favorite recipes	Clicked on the "Favorite Recipes" link	The "Favorite Recipes" page loads, displaying the user's favorite recipes	✅
Logout	Logs out the user and displays a confirmation message	Clicked on "Logout"	The user is successfully logged out and redirected to a page confirming the logout	✅

Index page

Feature	Expected Outcome	Testing Performed	Result	Pass
Sign up button	Redirects to the signup page with a registration form	Clicked on the "Sign up" button	The signup page and form are successfully loaded	✅
Login button	Redirects to the login page	Clicked on the "Login" button	The login page is successfully loaded	✅

About page unauthorized user

Feature	Expected Outcome	Testing Performed	Result	Pass
Sign up button	Redirects to the signup page with a registration form	Clicked on the "Sign up" button	The signup page and form are successfully loaded	✅
Login button	Redirects to the login page	Clicked on the "Login" button	The login page is successfully loaded	✅

About page authorized user

Feature	Expected Outcome	Testing Performed	Result	Pass
Cookbook button	Redirects to the collective cookbook page	Clicked on the "Cookbook" button	The collective cookbook page is successfully loaded	✅
My Favorites button	Redirects to the page that displays the user's favorite recipes, or shows a prompt to add recipes if there are no favorites	Clicked on the "My Favorites" button	The favorite page is successfully loaded and displays the prompt when no favorite recipes are added	✅

Sign up page

Feature	Expected Outcome	Testing Performed	Result	Pass
Username	Field is required and should be a valid username format	Tested with empty field, invalid format	Error message displayed prompting the user to provide a valid username	✅
Email	Field is required and should be a valid email format	Tested with empty field, invalid format	Error message displayed prompting the user to provide a valid email address	✅
Password	Field is required and should meet password criteria	Tested with empty field, invalid criteria	Error message displayed prompting the user to provide a valid password	✅
Password confirmation	Field is required and should match the entered password	Tested with empty field, mismatched passwords	Error message displayed prompting the user to confirm the password correctly	✅
Sign up button	If the form is valid, the user is redirected to the login page with a flash message confirming successful registration and a prompt to login. If the form is not valid, an error message is displayed.	Clicked the button with valid and non-valid formats	The button functions as expected, redirecting to the appropriate pages and displaying the corresponding messages	✅
Login text link	Redirects to the login page	Clicked on the "Login" link	The login page and form were successfully loaded	✅

Login page

Feature	Expected Outcome	Testing Performed	Result	Pass
Username	The user enters a username	Tested with valid and unvalid username input	The username field accepts and saves the valid input. If invalid it displays an error message	✅
Password	The user enters a password	Tested with valid and unvalidd password input	The password field functions correctly, allowing the user to input a valid password and displays an error message when not valid	✅
Sign up text link	Clicking the text link redirects to the sign-up page	Clicked on the "Sign up" text link	Successfully redirected to the sign-up page with the registration form	✅
Login	If the login form is valid, the user is logged in and redirected to the appropriate page. If the form is not valid, an error message is displayed.	Tested with valid and invalid login form input	The login button functions correctly, logging in the user with valid credentials and displaying error messages for invalid credentials	✅

Update profile page

Feature	Expected Outcome	Testing Performed	Result	Pass
Update	When changes are made and the "Update" button is clicked, the changes should be saved, the user should be redirected to the updated form, and a flash message should confirm the update	Made changes and clicked on the "Update" button	Changes were successfully saved, redirected to the updated form, and a flash message confirmed the update	✅

the Cookbook pages

Feature	Expected Outcome	Testing Performed	Result	Pass
All recipes button	Redirects to the page displaying all recipes	Clicked on "All recipes" button	Successfully redirected to the page displaying all recipes	✅
My recipes button	Redirects to the page displaying user's recipes	Clicked on "My recipes" button	Successfully redirected to the page displaying user's recipes	✅
Favorite recipes button	Redirects to the page displaying favorite recipes or prompt to add favorites if none	Clicked on "Favorite recipes" button	Successfully redirected to the page displaying favorite recipes	✅
Prompt to add favorites	Link redirects to the Collective cookbook page	Clicked on the "Collective cookbook" text link	Successfully redirected to the Collective cookbook page	✅
Add recipe button	Redirects to the page with the recipe creation form	Clicked on "Add recipe" button	Successfully redirected to the page with the recipe creation form	✅
Prompt to add a recipe	Link redirects to the add a recipe form	Clicked on the "add a recipe" text link	Successfully redirected to the add a recipe form	✅
Recipe card title link	Redirects to the recipe detail page	Clicked on the title link of a recipe card	Successfully redirected to the recipe detail page	✅
Recipe card info button	Redirects to the recipe detail page	Clicked on the info button of a recipe card	Successfully redirected to the recipe detail page	✅
Pagination	Displays pagination if more than 9 recipes	Added more than 9 recipes to the list	Pagination is displayed showing the correct number of pages	✅
Page buttons on pagination	Navigates to the correct page	Clicked on page number/next/previous buttons in pagination	Successfully navigated to the correct page based on the button clicked	✅

Recipe Detail page

Feature	Expected Outcome	Testing Performed	Result	Pass
Comment	The comment is displayed with the date and username	Added a comment	The comment is successfully displayed with the corresponding date and username	✅
Update button	Only shown on the user's own recipes. Takes the user to the recipe form with pre-filled fields	Clicked on the update button	Only shown on user's recipes and successfully redirected to the recipe form with the fields pre-filled	✅
Delete button	Only shown on the user's own recipes. Redirects to the delete confirmation page	Clicked on the delete button	Only shown on user's recipes and successfully redirected to the delete confirmation page	✅
Heart icon	Only shown if the recipe is not the user's own recipe. Toggles between adding to favorites and removing from favorites. Displays flash messages to confirm the action	Toggled the heart icon	Successfully toggled between adding to favorites and removing from favorites. Flash messages confirm the action	✅

Update recipe page

Feature	Expected Outcome	Testing Performed	Result	Pass
Update	When changes are made and the "Update" button is clicked, the changes should be saved, the user should be redirected to the recipe detail page, and a flash message should confirm the update	Made changes and clicked on the "Update" button	Changes were successfully saved, redirected to the recipe detail page, and a flash message confirmed the update	✅

Delete recipe page

Feature	Expected Outcome	Testing Performed	Result	Pass
Delete button	Deletes the recipe and redirects to the collective recipe page	Clicked on the delete button	The recipe was successfully deleted and I was redirected to the collective recipe page	✅
Cancel button	Redirects to the recipe detail page	Clicked on the Cancel button	Successfully redirected to the recipe detail page	✅

Back to the top

Summary

Overall, the Recipe Collective website performed well in in all testings. The issues identified were acknowledged, and some were not addressed at the time due to design choices.