TESTING.md

Testing

Return to README.md file

View live project

View Repository

---

Table of contents

1. Testing User Stories
2. Manual Testing
   1. Common Elements Testing
   2. Page Elements Testing
3. Automated Testing
   • Code Validation
   • Browser Validation
   • Lighthouse Auditing
4. User Testing
5. Note To Accessor

---

---

Testing User Stories

User stories were tested to ensure the needs of the user were being met, with the following results:

General User

1. As a General User, I want to intuitively find recipes on the database.

• Find a Recipe page is visible on all pages througout the site.
• On clicking the Find a Recipe page, users will be able to view all recipes.
• Using the Search Bar helps to pinpoint their search.
• Using the Dropdown menu allows the user to refine their search.

2. As a General User, I want to view the selected recipe's dashboard to get necessary information.

• Users can click either the Recipe Image or Recipe Name to navigate to the recipe's page.
• There, the recipe dashboard will provide all of the necessary information the user will need.

3. As a General User, I want to seek contact information to send useful feedback to Developer / Site Owner.

• On all pages the Footer is visible and conventionally placed.
• Selecting one of the social icons allows the user to connect with the developer by:
  • The Developers LinkedIn page.
  • The Developers GitHub page.
  • The Contact Modal.

Non-Registered User

1. As a Non-Registered User, I want to navigate to Sign-Up page to Register an account.

• A Non-Registered User can click the Sign Up call-to-action button located on the Home Page, or in the Navigation Links to be directed to the Sign Up Page.
• There, they can enter their details and submit their registration.
• On registering, they will be directed to the My Recipes Page.

Registered User

1. As a Registered User, I want to log into my account to gain access to the full functionality of the site.

• Users can click the Login call-to-action button on the Home Page, or in the Navigation Links to be directed to the Login Page.
• There, they can enter their login details.
• Once logged in, they will be directed to their My Recipes page.
• The conditional links will allow the user the full functionality of the site:
  • Create and edit recipes
  • Add or Remove favourites
  • Manage their account

2. As a Registered User, I want to navigate to my user profile to edit my account information.

• On My Recipes Page, My Favourites Page and the user quick-links dropdown menu, the user can navigate to their Edit Profile page.
• There, they can edit their profile image.
  • Their current image will be the default values, and will be displayed in the preview window.
  • When they paste a new image, the image preview window will change to reflect that.
• On clicking Save, they will be directed to My Recipes.
• On clicking Cancel, they will be directed to My Recipes.
• On clicking Account Settings, they will be directed to the Edit Account page.

3. As a Registered User, I want to navigate to my account settings to delete my account information.

• On the Edit Profile page, the user can navigate to Account Settings.
• There, they can edit their password or delete their account.
• On clicking Save, they will be directed to Login.
• On clicking Back, they will be directed to Edit Profile Page.
• On clicking Delete Account, the Delete Modal will open.

4. As a Registered User, I want to navigate to my recipes page to view my uploaded recipes.

• If is user is logging in, they will be directed to My Recipes.
• My Recipes can also be accessed through the Navigation Links or My Favourites page.

5. As a Registered User, I want to navigate to upload page to add my recipe to the database.

• On My Recipes Page, My Favourites Page and the user quicklinks dropdown menu, the user can navigate to the Create Recipe page.

6. As a Registered User, I want to view my own recipe's dashboard to edit recipe as needed.

• If the user is viewing a Recipe Page where they are the recipe's author, the conditional buttons displayed will allow them to edit the recipe.
• Clicking the Edit button will direct the user to the Edit Recipe page.

7. As a Registered User, I want to view my own recipe's dashboard to delete recipe.

• If the user is viewing a Recipe Page where they are the recipe's author, the conditional buttons displayed will allow them to edit or delete the recipe.
• Clicking Delete will open the Delete Modal.

8. As a Registered User, I want to use a save function to save my favourite recipes from other users.

• If the user is viewing a Recipe Page where they are NOT the recipe's author, the conditional buttons displayed will allow them to Add to favourites or Remove from Favourites (depending on whether it is already in their favourites_count).
• Clicking either will redirect the user back to the Recipe Page.

9. As a Registered User, I want to navigate to my favourites page to view the recipes I have saved from other users.

• My Favourites can be accessed through the Navigation Links or My Recipes page.

Administrative Account Holder:

1. As an Administrative Account holder, I want to view any recipe dashboard to edit recipe as needed.

• The Administrative Accounts have 'admin privileges' that allow them to monitor all recipes entered.
• If the Administrative Account holder is viewing a Recipe Page, the conditional buttons displayed will allow them to edit the recipe.
• Clicking Edit will bring them to the Edit Recipe page.

2. As an Administrative Account holder, I want to view any recipe dashboard to delete recipe as needed.

• If the Administrative Account holder is viewing a Recipe Page, the conditional buttons displayed will allow them to delete the recipe.
• Clicking Delete will open the Delete Modal.

3. As an Administrative Account holder, I want to still maintain a save function to save my favourite recipes from other users.

• If the Administrative Account holder is viewing a Recipe Page, the conditional buttons displayed will allow them to Add to favourites or Remove from Favourites.
• Clicking either will redirect the user back to the Recipe Page.

Back to top ⇧

---

Manual Testing

Common Elements Testing

Manual testing was conducted on the following elements that appear on every page:

• Clicking the Logo located on the top-left of the screen will redirect the user back to the Home Page:

  

• Hovering over the Navigation Links will trigger the hover effect, confirming the page the user is on:

  

• Collapsible hamburger button on mobile and tablet devices reveals Navigation menu:

  

• Hovering over the Footer icons will trigger the hover effect, confirming the action the user is about to take:

  

• Clicking the Footer Social Icons opens the Developers social platform in a new tab:

  • GitHub:

  • LinkedIn:

• Clicking the Footer Contact Icon opens the contact modal, with the appropriate user feedback:

  

• Clicking the Disclaimer icon triggers the disclaimer notice:

  

• The user can log out from numerous points:

  • My Recipes:

    

  • My Favourites:

    

  • Quick Links:

    

  • On Mobile Devices:

    

• Recipes can be accessed by clicking:

  • Image

    

  • Name

    

Page Elements Testing

Home Page

Manual testing was conducted on the following elements on the Home Page:

• Using the Carousel Controls, the user can browse the featured recipes (the last four to be uploaded):

  

• Hovering over the Call to Action buttons will provide feedback to the user:

  

• The Responsiveness of the Home Page:

  

Find A Recipe Page

Manual testing was conducted on the following elements on the Find A Recipe Page:

• The Search Bar allows users to enter their search query:

  • When Results are found:

    

  • No Results Found:

    

• The Dropdown Menus allow the user to filter their search:

  • Category Search:

    

  • Difficulty Search:

    

• The Pagination function only displays 6 recipes at a time, allowing the user to browse through pages without suffering from information-overload:

  

• The Responsiveness of the Find A Recipe Page:

  

Sign Up Page

Manual testing was conducted on the following elements on the Sign Up Page:

• User can intuitively create an account:

  

• Clicking Login redirects user to login page:

  

• The Responsiveness of the Sign Up Page:

  

Login Page

Manual testing was conducted on the following elements on the Login Page:

• User can intuitively enter their details to log into their account:

  

• Clicking Sign Up redirects user to registration page:

  

• The Responsiveness of the Login Page:

  

My Recipes Page

Manual testing was conducted on the following elements on the My Recipes Page:

• Hovering over Call to Action buttons provide user feedback:

  

• The Responsiveness of the My Recipes Page:

  

My Favourites Page

Manual testing was conducted on the following elements on the My Favourites Page:

• Hovering over Call to Action buttons provide user feedback:

  

• The Responsiveness of the My Favourites Page:

  

Edit User Page

Manual testing was conducted on the following elements on the Edit User Page:

• User can intuitively edit their profile:

  

• Clicking Cancel redirects user to My Recipes page:

  

• The Responsiveness of the Edit User Page:

  

Edit Accounts Page

Manual testing was conducted on the following elements on the Edit Accounts Page:

• User can intuitively edit their account:

  

• Clicking Back redirects user to Edit Profile page:

  

• Clicking Delete Account opens Delete Modal:

  

• The Responsiveness of the Edit Accounts Page:

  

Create Recipe Page

Manual testing was conducted on the following elements on the Create Recipe Page:

• The creative process for entering recipe details is as follows:

  • Enter Recipe name

    

  • Enter image url, an image preview will be displayed:

    

  • User can use Dropdown menus to refine recipe:

    

  • Add and remove ingredients dynamically:

    

  • Add and remove directions dynamically:

    

• Clicking Save will redirect the user to My Recipes page:

  

• Clicking Cancel will return the user back to the previous page:

  

• The Responsiveness of the Create Recipe Page:

  

Edit Recipe Page

Manual testing was conducted on the following elements on the Edit Recipe Page:

• Current information will be the default value, User can edit as needed:

  

• Clicking Cancel will return the user back to the recipe page:

  

• Clicking Delete opens Delete Modal:

  

• The Responsiveness of the Edit Recipe Page:

  

Recipe Page

Manual testing was conducted on the following elements on the Recipe Page:

• Clicking the Back button will return the user to the previous page:

  

• If the user is not logged in, the Login To Add Favourites Button will redirect them to the Login page:

  

• If the user is not the recipe author, they can add the recipe to, or remove it from their Favourites:

  

• If the user is the author, they can edit or delete the recipe:

  

  • Edit directs to Edit Recipe Page:

    

  • Delete opens the Delete Modal:

    

• The Responsiveness of the Recipe Page:

  

Back to top ⇧

---

Automated Testing

Code Validation

• W3C Markup Validator was used to validate the HTML code used, using the Validate by URI method.

  • All errors that were highlighted were resolved.

• W3C CSS Validator was used to validate the CSS code used with the following result:

  

• JSHint was used to validate the JavaScript and JQuery code used.

  • Errors highlighted in script.js pertain to SweetAlert2 (used for contact form feedback) and jQuery Validation(used for validating contact form) as well as the onclick functions used for image preview and disclaimer:

    

  • There were no errors highlighted in recipe.js file

• PEP8 Online was used to validate Python code.

  • All highlighted errors and warnings were resolved.

Browser Validation

Chrome:

Safari:

Edge:

Opera:

Firefox:

Lighthouse Auditing

Desktop

Page	Performance	Accessibility	Best Practice	SEO
Home Page	86%	100%	80%	100%
Find Recipes	99%	92%	80%	90%
Login	97%	100%	80%	100%
Register	99%	100%	80%	100%
Edit User	99%	100%	80%	100%
Edit Account	99%	100%	80%	100%
My Recipes	97%	100%	80%	100%
My Favourites	98%	100%	80%	90%
Create Recipe	99%	100%	80%	100%
Edit Recipe	98%	90%	80%	100%
Recipe Page	96%	100%	80%	90%

Mobile

Page	Performance	Accessibility	Best Practice	SEO
Home Page	86%	100%	93%	100%
Find Recipes	73%	92%	93%	90%
Login	93%	100%	87%	100%
Register	92%	100%	87%	100%
Edit User	70%	100%	87%	100%
Edit Account	92%	100%	87%	100%
My Recipes	79%	100%	93%	100%
My Favourites	89%	100%	93%	90%
Create Recipe	92%	100%	87%	100%
Edit Recipe	82%	90%	87%	100%
Recipe Page	74%	100%	87%	92%

Breakdown of Results

Page	Error / Warning	Comment
All Pages	Largest Contentful Paint	The images rendered on each page threw this error due to a number of reasons. The developer was able to pre-load their own images rendered using the rel="preload" attribute in HTML and using -webkit-image-set() in CSS (Source). The problem still persists due to the use of third party images throughout the site.
All Pages	Render-blocking resources	This warning stems from the use of emailJS for the contact form. The developer attempted to resolve this issue using the defer attribute within the script tag, but this only created an issue whereby the function sending the email was not called.
Home Page	Tap targets not sized appropriately	Relating to the carousel controls. Issue was resolved by resizing the anchor tag of the controls.
Home Page	Defer offscreen images	This relates to the carousel feature of the home page. The researched solution was to 'lazy-load' the images but that is not an option in this release due to the use of image urls, in lieu of uploads.
My Favourites	Links are not crawlable	Relating to the .page-link class in the Bootstrap Pagination controls.
All Pages	Avoid enormous network payload	This warning relates to the use of external images throughout the site. The payload size fluctuated significantly because of this. The solution to this would be to upload images directly to the site, but this feature is not included in this release
Find Recipes	Size Images	This issue (like many others before) pertains to the use of external images, where the resource size is far greater than the displayed size.
All Pages	Does not use HTTPS	In researching this error, the only conclusive reason for it is the use of mixed content throughout the site.

Back to top ⇧

---

User testing

Family members and friends were asked to review the site and documentation to point out any bugs and/or user experience issues. Their helpful advice throughout the process led to many UX changes in order to create a better experience.

It was through this testing that the following changes were made:
Update to Logo to be more conventionally positioned. The original designs were for a floating logo but that was quickly replaced due to the issues it caused (most notable padding and z-index errors).
Change to Recipe Card font-size and max-length in order to create consistency across all recipes. It was noted that some of the recipe names were longer than others, creating a spacing issue, taking away from the User Experience.
Create conditional buttons for each category in order to better distinguish the differences, giving these graphical cues helped users to visual the category.
Create a 'quick-links' function for users to create a more streamline experience.
Create a separate Accounts Settings page just for changing password or deleting account, in order to avoid the "danger" zone as much as possible.
Create a live image preview window, allowing the user to see the current image on the Edit User and Edit Recipe pages.
A breadcrumbs button on the Recipe page, allowing the users to return to their previous page for convenience.
Create a Search Again button on the Find Recipes search results in order to provide the user with easy return access.

Back to top ⇧

---

Note to Accessor

If you would like to log in, to gain access to the full functionality of the site, a test account has been created (login information provided in Project Submission). This account has recipes already created and favourited, for your convenience.

The developer recommends that you create your own account in order to get the complete experience in using the site. A Recipes File has been created for you to copy and paste a recipe to get the Creating a Recipe experience (without having to search the internet).

---

Back to top ⇧