All HTML code was validated using the W3C Markup Validation Service regularly during the development process. The HTML Source Code was regularly viewed for each page using Google Chrome (right click, View page source) and passed through the W3C Markup Validation Service.
The following error was found during the final HTML validation check:
- A stray closing i tag was found in the Product View template. This was removed, the HTML was revalidated and passed.
All HTML code now passes validation with no errors or warnings. See HTML Validation Reports
Custom CSS styling was validated using the W3C CSS Validation Service.
No errors were generated. 10 "unknown vendor extension" warnings were generated. See CSS Validation Report.
The warnings are related to the 10 global variables declared at the top of the Custom CSS.
The warnings are generated because the W3C CSS Validation Service
does not currently support CSS global variable declaration and are not considered to be an issue.
See Github Link.
The JavaScript Event Handler Module was validated using the JSHint static code analysis tool, and passed without errors or warnings. See JavaScript Event Handler Module Validation. Due to the lack of complexity of JavaScript code implemented on the project, Automated Unit Testing of the JavaScript code was considered unecessary. All JavaScript event handlers in the event handler module have been thoroughly manually tested as part of the Manual Testing process.
All Python Code was thoroughly tested at the command line during the development process, and has been validated using Flake 8.
One F401 error was generated on the Application Python module file concerning the env module being imported but not used. This is not considered to be a problem as env is only being imported in the testing environment to initialise the environmental variables, and is not imported in the production version of the site. See Python Code Flake8 Validation.
Python Unit Testing was also implemented using the unittest python unit testing framework.
mongomock was used to create a "mock" of the Mongo DB to carry out a selection of Unit Tests on. Please note that
due to time constraints, not all functions and routes have been fully tested. A total of 9 Unit Tests have been created in the FreeFrom Test Python module.
All 9 Unit Tests pass without errors, see Python Unit Test Results.
Performance and Quality was tested with the Lighthouse extension for Google Chrome.
Initial Lighthouse scores were:
- Performance 84%
- Accessibility 90%
- Best Practices 93%
- SEO 94%
See Initial Lighthouse Report.
To improve Accesibility, the name and aria-label atttributes were added to the Search and Add buttons as required on the Home page.
To improve Best Practices and Performance, the FreeFrom logo was re-sized to 94px x 100px and compressed using the GIMP and RIOT image manipulation and optimisation tools and the defer attribute was added to the script HTML tags, to defer loading of the JavaScript files.
Final Lighthouse scores were:
- Performance 86%
- Accessibility 98%
- Best Practices 100%
- SEO 94%
Note that the slightly lower performance score of 86% is due to render blocking resources (mainly from Bootstrap) and unused CSS (also from Bootstrap). To improve performance, consideration should be given in a Future Development Phase to optimising Bootstrap and DataTables by only importing the required components. See this Link for further information.
- As a User, I would like to be able to register on the site.
The user is able to Register on the site using the Register form, which can be accessed from Home Page Alert Links or from the Sign In form. Once the Register form has been populated and the Form Validation and checking has been passed, the user is registered on the database, redirected back to the Home page, and notified with a message at the top of the screen. The Home Page Alert is updated to remove the Sign In and Register links and shows the User Name of the signed in user. The Navigation Menu shows a link to Sign Out:
- As a User, I would like to be able to sign in to the site.
The user is able to Sign In to the site using the Sign In form which can be accessed from Home Page Alert Links or from the Sign In link on the Navigation Menu. The Sign In form also has a link to the Register form. Once the Sign In form has been populated and the Form Validation and checking has been passed, the user is signed in, redirected back to the Home page, and notified with a message at the top of the screen. The Home Page Alert is updated to remove the Sign In and Register links and shows the User Name of the signed in user. The Navigation Menu shows a link to Sign Out:
- As a User, I would like to be able to sign out of the site.
If the user is Signed In, the Navigation Menu shows a link to Sign Out. If the link is clicked, the user is redirected back to the Home page and notified with a message at the top of the screen:
- As a User, I am searching for a product which is free from one or more allergens.
The user is able to optionally type part or all of a Product name into the Search input and may also optionally select the Category and Allergens to Search based on. Products are returned into the product list below. Each product can be viewed in more detail by clicking on the Product Name Link in the Product Results Table. The Search also works if no details are input (all products are returned into the product list). Screen prints showing the results of various typical product searches are shown below:
- As a User, I have found a product which is free from one or more allergens, and I want to add it to the database.
If the user is Signed In, they may add a product to the database using the Add button on the Home page. Once the Form Validation and checking has been passed, the new Product is added to the database and the user is redirected to the Product View page, and notified with a message at the top of the screen:
- As a User, I have tried a product and would like to rate it.
- As a User, I have tried a product and would like to review it.
If the user is Signed In, they may rate and review products on the Product View page. Once the Form Validation and checking has been passed and the review and rating has been succesfully added, the user is notified with a message at the top of the screen:
- As a User, I would like to edit an existing product. If the user is Signed In, they may Edit a product by clicking the Edit Product button from the Product View page. The Product Edit form is presented, and once the Form Validation and checking has been passed and the product has been successfully updated, the user is redirected to the Product View page for the updated Product, and is notified with a message at the top of the screen:
- As a User, I would like to delete an existing product. If the user is Signed In, they may Delete a product that they have added. If the user is Signed In with Admin privileges, they may Delete any product from the database. The Product Delete feature is accessed from the Product Edit form, using the Delete button. If the Delete button is clicked, the user is asked to confirm that they want to Delete the Product. If the user clicks Cancel, they are redirected back to the Product Edit form. If the user clicks Delete, the product is deleted from the database and the user is redirected to the Home page and notified with a message at the top of the screen:
- As a User, I would like to add a new product category. If the user is Signed In and has Admin privileges, the Categories menu is shown in the Navigation Menu. The user can pick Add Category from the Categories Menu and populate the new Category name in the form input. Once the form has passed Form Validation and checking and the new Category has been succesfully added, the user is redirected to the Home page and is notified with a message at the top of the screen:
- As a User, I would like to edit an existing product category. If the user is Signed In and has Admin privileges, the Categories menu is shown in the Navigation Menu. The user can pick Edit Category from the Categories Menu, pick the Category to edit from the Category Selector and populate the new Category name in the form input. Once the form has passed Form Validation and checking and the Category has been succesfully edited, the user is redirected to the Home page and is notified with a message at the top of the screen:
- As a User, I would like to delete an existing product category. If the user is Signed In and has Admin privileges, the Categories menu is shown in the Navigation Menu. The user can pick Delete Category from the Categories Menu, and pick the Category name to delete from the Category Selector. If the Delete button is clicked, the user is asked to confirm that they want to Delete the Category. If the user clicks Cancel, they are redirected back to the Category Delete form. If the user clicks Delete, the Category is deleted from the database, the user is redirected to the Home page and is notified with a message at the top of the screen:
- As a User, I would like to add a new allergen.
If the user is Signed In and has Admin privileges, the Allergens menu is shown in the Navigation Menu. The user can pick Add Allergen from the Allergens Menu and populate the new Allergen name in the form input. Once the form has passed Form Validation and checking and the new Allergen has been added, the user is redirected to the Home page and is notified with a message at the top of the screen:
- As a User, I would like to edit an existing allergen.
If the user is Signed In and has Admin privileges, the Allergens menu is shown in the Navigation Menu.
The user can pick Edit Allergen from the Allergen Menu, pick the Allergen to edit from the Allergen Seelctor
and populate the new Allergen name in the form input. Once the form has passed Form Validation and checking and the Allergen has been succesfully edited, the user is notified with a message at the top of the screen:
- As a User, I would like to delete an existing allergen. If the user is Signed In and has Admin privileges, the Allergens menu is shown in the Navigation Menu. The user can pick Delete Allergen from the Allergens Menu, and pick the Allergen name to delete from the Allergen Selector. If the Delete button is clicked, the user is asked to confirm that they want to Delete the Allergen. If the user clicks Cancel, they are redirected back to the Allergen Delete form. If the user clicks Delete, the Allergen is deleted from the database and the user is notified with a message at the top of the screen:
- As a User, I would like to be able to contact the developer.
The user may access the Contact Form from the Footer Link. If the user is Signed In, their email address is populated automatically. Once the user has populated the Contact Form and the form has passed Form Validation and checking and has been succesfully submitted, a message is displayed at the top of the screen:
The site has been manually tested thoroughly over a 3 week period. See Bugs Fixed During Testing for bugs uncovered and fixed during the manual testing process. Please note that an account with Admin privileges has been created for testing purposes. This will facilitate testing of features which require Admin privileges. The username is testadmin1 and the password is testadmin1.
The following Features have been explicitly tested:
- FreeFrom logo link has been tested and links to home page if selected:
- Home Page Alert Links have been tested and function correctly including hover styling, linking to Sign In and Register pages:
- Navigation Menu has been tested and works as intended. When user is not Signed In, Home and Sign in links are displayed and the links function correctly. If user is Signed In but does not have Admin privileges, Home and Sign Out links are displayed and function correctly. If user is Signed In and has Admin privileges, Home, Allergens, Categories, and Sign Out links are displayed and function correctly. Allergens and Categories drop down menus function correctly. Navigation Menu Hover Styling has been implemented and is working as intended:
- Search Input, has been tested and functions correctly, allowing user to optionally input product search criteria to filter search results:
- Category Selector has been tested and functions correctly, allowing user to optionally select category to filter search results:
- Search Button functions correctly (including hover styling) and returns matched products in the Product Results Table. Resizes if user is not signed in and add button is not displayed:
- Add Button functions correctly (including hover styling) and links to the Product Add form. Only shown if user is signed in:
- Allergen Selector functions correctly and allows user to optionally select allergens to filter search results:
- Product Results Table functions correctly and displays product search results as expected. Product name link has been tested and links to Product View page:
- Sign In functions correctly (including Form Validation and button Hover Styling) and enables user to sign in. Link to Register functions correctly (including hover styling):
- Register form functions correctly (including Form Validation and button Hover Styling) and allows user to register:
- Product View functions correctly and displays product details. If user is not Signed In, displays links to Sign In and
Register forms. Links function correctly (including hover styling).
If user is signed in, Review and Rating inputs and buttons are displayed as intended and function
correctly (including form validation and hover styling).
Add button functions as intended (including Form Validation and hover styling), enabling user to review and rate product.
Add button text functions as intended and is changed to Update if the user has already reviewed the product.
Update button functions as intended (including form validation and hover styling) and updates review and rating if the product has already been reviewed by the user.
Edit Product button is displayed if user is Signed In and functions correctly (including hover styling), linking to Product Edit page.
Add Product button is displayed if user is Signed In and functions correctly (including hover styling), to Product Add page.
User reviews are displayed as intended below in the User Reviews Table:
- Product Edit form functions correctly (including Form Validation and button Hover Styling). Delete button is shown if the product has been added by the signed in User, or if the signed in User has Admin privileges:
- Product Delete Confirm form functions correctly (including button Hover Styling):
- Product Add form functions correctly (including Form Validation and button Hover Styling):
- Allergen Add form functions correctly (including Form Validation and button Hover Styling):
- Allergen Edit form functions correctly (including Form Validation and button Hover Styling):
- Allergen Delete form functions correctly (including Form Validation and button Hover Styling):
- Allergen Delete Confirm form functions correctly (including button Hover Styling):
- Category Add form functions correctly (including Form Validation and button Hover Styling):
- Category Edit form functions correctly (including Form Validation and button Hover Styling):
- Category Delete form functions correctly (including Form Validation and button Hover Styling):
- Category Delete Confirm form functions correctly (including button Hover Styling):
- Footer Contact Developer Link functions correctly (including Hover Styling) and links to Contact Developer form:
- Footer GitHub Link functions correctly (including Hover Styling) and links to developer page on GitHub:
- Contact Developer form functions correctly (including Form Validation and button Hover Styling), enabling developer to be contacted by email:
- Error Page functions correctly and returns a customised error message and link to the Home page if an error is encountered. Link hover styling functions correctly:
Validation for all Forms implemented using WTForms and Python has been
thoroughly manually tested. See Form Validation Testing Screen Prints, a selection of which are shown below:
- Responsive design has been tested by using Chrome DevTools to emulate viewing the website on a number of devices with varying screen dimensions, including iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 plus, iPhone 11, iPad, iPad Pro, Moto G4, Galaxy S5, Surface Duo, Galaxy Fold, Widescreen Laptop and Desktop PC. See Responsive Design Testing screen prints, a selection of which are shown below:
- Responsive design was then further tested using the
Responsive Viewer
plug in for chrome. This emulates viewing the website on a large number of devices,
including iPhone XR, iPhone XS Max, iPhone XS, iPhone X, Galaxy S9 Plus, Galaxy S8 Plus, Galaxy S9, Note 8, Note S8, Pixel 3 and Pixel 3XL.
See Responsive Design Testing screen prints, a selection of which are also shown below:
The following Responsive features were specifically tested:
- The Navigation Menu collapses as intended to an icon on small devices less than 768 pixels wide:
- The Search Input, Category Selector, Search Button and Add Button stack as intended on small devices less than 768 pixels wide.
- The Product Results Table and User Reviews Table columns collapse on smaller devices as intended:
The website was tested on the following browsers and operating systems, using a combination of manual testing across various devices and the Browserstack emulator:
- Google Chrome (Windows 10, Android 11 and Mac OS Big Sur).
- Microsoft Edge (Windows 10 and Mac OS Big Sur).
- Microsoft Internet Explorer 11 (Windows 10).
- Safari (Mac OS Big Sur and iOS).
- Firefox (Windows 10 and Mac OS Big Sur).
- Opera (Windows 10 and Mac OS Big Sur).
No issues were uncovered during Browser Compatibility Testing.
- Search Input, Category Selector, and Allergen Selector now populate with previously selected values when search results are displayed.
- Product Results Table, Allergen Selector and Category Selector are now sorted in alphabetic order.
- A missing CSS class was added to the Edit Product button.
- A bug was fixed where Products rating one star were not correctly displayed in the Product Results Table.
- On the Product View form, newly added user Reviews and Ratings are now added or updated in the Reviews Table after hitting the Add or Update button.
- The Product Add route was updated to redirect to the Product View of the successfully added product.
- The Category Edit and Allergen Edit routes were updated to populate the Category or Allergen selector with previously selected values if the Edit form fails Validation or Checking.
- There are no known bugs remaining.