Manual testing was used to test navigation, responsiveness on different screen sizes, database operations (Create, Read, Update and Delete) and application functions.
All information from each page on the app should be viewable on all screen sizes from small mobile phone, to tablet sized devices up to very large monitor screens.
The Materialize grid system was used to ensure data displayed in a satisfactory manner on vaious screen sizes. CSS was used to make images responsive and create appropriate behavour within the 'card' element provided by materialize.
On Chrome Developer Tools the following devices were emulated to check responsiveness:
- Moto G4 (smallest phone screen width available)
- Pixel XL
- iPhone X
- iPad
These physical devices were also used for testing:
- Macbook Pro 15-inch retina screen
- HP e233 23-inch monitor
- Samsung S10e
- iPhone SE2020
Le Munch adapts to most tested screen sizes and devices and displays as expected but on very small screen widths there were some issues. Samsung fold device when emulated on google dev tools made some contact link jump to a new line. This was not deemed to be too big an issue as the dev tools only show 1 half of the screen. It is assumed that this would display correctly on the device.
Display correctly in any browser users are likely to use.
Tested site on the following browsers:
- Chrome - Desktop and Mobile
- Firefox - Desktop and Mobile
- Opera - Dekstop and Mobile
- Safari - Desktop and Mobile
- DuckDuckGo - Mobile
No obvious bugs were detected in any of the tested browsers. ✔️
- Indeterminate time loading bar from materialize displays a the top of the page when page is loading and disappears when correct information has all loaded ✔️
- Click on Home, App Logo, Sign in and Sign Up navigation links to confirm correct redirection to the correct pages ✔️
- Hover display when cursor is above nav link ✔️
- Burger menu icon displays on small and medium sized screens ✔️
- Clicking Burger icon triggers visibility of the side navigation menu for small and medium sized screens ✔️
- Verify that the the appropriate navigation bar is displayed ✔️
- Social Media icons display for twitter, instagram and facebook. Clicking these takes user to the appropriate site ✔️
- Copyright information displays in the bottom left and contact link displays in the bottom right ✔️
- Displays on larger screens functions, 'change user password', 'edit usder data' and 'logout' ✔️
- Clicking on 'change user password', 'edit user data' takes you to the correct screen ✔️
- Clicking logout takes user back to the index/splash page and logs them out. Feedback is provided to user via a message ✔️
- Burger icon displays on smaller screens to give access to user admin functions, 'change user password', 'edit user data' and 'logout' ✔️
- Hovering over Vertical sidenav elements on larger screens provides user feedback ✔️
- Displays on all screens when user is logged in ✔️
- Displays 'my recipes', 'browse' and 'search' functions and clicking on these take you to the correct page ✔️
- Hovering over green 'profile' navbar options provides user feedback ✔️
- Current screen green 'profile' navbar option is highlighted ✔️
- UX information to introduce new users to the site displays correctly ✔️
- Top 3 most popular recipes display in order with most 'likes' at the top ✔️
- View recipe link works correctly and takes user to the correct page ✔️
- Feedback to user generated when hovering over view recipe link ✔️
- Register button displays and when clicked takes user to Registration page ✔️
- Feedback to user generated when hovering over Register button ✔️
- Header text displays ✔️
- Username and password inputs display and go red if not filled in as they are required ✔️
- Submit button displays and clicking proceeds with log in ✔️
- Invite to register for new users displays with 'here' changing colour on hover ✔️
- If there are any issues the user is provided with feedback via a flash message
- Header text displays ✔️
- Username, email, password and confirm password inputs display and go red if not filled in as they are required ✔️
- Submit button displays and clicking proceeds with registration ✔️
- If there are any issues the user is provided with feedback via a flash message ✔️
- Header text displays with personalised user information ✔️
- Old password, new password and confirm password inputs display and go red if not filled in as they are required ✔️
- Cancel button displays and clicking takes customer back to profile without taking any action ✔️
- Submit button displays and clicking proceeds with password change. User feedback is provided that the password has been changed when the user is directed back to the profile page ✔️
- Header text displays ✔️
- Username and email inputs display. They are pre-populated with current user information and go red if not filled in as they are required ✔️
- Cancel button displays and clicking takes customer back to profile without taking any action ✔️
- Submit button displays and clicking proceeds with edit of data. User feedback is provided that the information has been changed when the user is directed back to the profile page ✔️
- If user has just logged in 'login successful' displayed ✔️
- Personalised greeting for user displays with instructions on how to use page ✔️
- If user has no recipes message is displayed inviting them to add recipe ✔️
- Add recipe button displays and hovering over it provides information on what clicking the button does ✔️
- If user has recipes uploaded to database they display in card form in order with the newest at the top. User can scroll down to access older recipes ✔️
- If the user has provided a picture URL is displays the picture in the recipe card if not it uses a static image not displayed picture ✔️
- A description of the recipe and the number of likes it has are displayed ✔️
- View recipe and edit recipe links display in the recipe card. Clicking the links displays the correct page. Hovering over the links provides user feedback ✔️
- Instructions on how to use page display at the top ✔️
- Add recipe button displays and hovering over it provides information on what clicking the button does ✔️
- Sort by buttons 'Newest' and 'Likes' display. 'Newest' is highlighted as the default which displays the recipes in date order descending with the newest at the top ✔️
- Clicking 'likes' sort the recipes in descending order and those with the most likes are at the top ✔️
- All recipes uploaded to database they display in card form. The user and scroll down to view recipes ✔️
- Picture URL is displays the picture in the recipe card if not it uses a static image not displayed picture ✔️
- A description of the recipe, the number of likes it has and who created it are displayed ✔️
- In the recipe card, view recipe is displayed for all users and edit recipe is displayed if the current user created the recipe. Clicking the links displays the correct page. Hovering over the links provides user feedback ✔️
- Instructions on how to use page display at the top ✔️
- Search input displays and goes red if not filled in as it is required ✔️
- Submit button displays and clicking proceeds with search ✔️
- If search is successful a message displays informing the user and recipes are displayed in the same format as on the browse page. User can use the form to search again ✔️
- If search is unsuccessful a message displays informing the user and they can use the form to search again. Message invites them to do so ✔️
- Picture URL is displays the picture in the recipe card if not it uses a static image not displayed picture ✔️
- A description of the recipe, its type, the number of likes it has, whether the current user likes it and who created it are displayed ✔️
- The ingredients and method steps are displayed below other recipe elements ✔️
- Back button is displayed and clicking it takes the user back to the profile page ✔️
- Floating action button is displayed in the bottom right corner and hovering over it (clicking on smaller screens) provides the user with options to click. Hovering over the option will tell the user what the button does ✔️
- From the floating action button the user can edit the current recipe, like the current recipe, add a new recipe or delete the current recipe ✔️
- Clicking add or edit from the floating action button takes the user to the crrrect screen ✔️
- Clicking like from the floating action button keeps them on the view page and increases the number of likes the recipe has. Clicking like again will unlike the recipe and user will be provided with feedback telling them this if they hover over the button. Like button also displays lighter when current user likes the recipe ✔️
- Header text displays ✔️
- Recipe type input displays and go red if not filled in as it is required. Options are called from the recipe type database ✔️
- Name, description, ingredients and method steps inputs display and go red if not filled in as they are required ✔️
- Picture input can be left blank or URL for an uploaded picture can be entered in the correct format ✔️
- Instructions on how to upload a picture to a 3rd party resource are included and clicking the link takes the user to a site where they can obtain an appropriate file from a picture they upload ✔️
- Add buttons for ingredient and step are displayed if user wants to increase the number of these elements dynamically ✔️
- Remove buttons for ingredient and step are displayed if user wants to decrease the number of these elements dynamically ✔️
- Submit button displays and clicking proceeds with adding recipe. User feedback is provided that it has been successful when they are routed to the profile page ✔️
- Cancel button displays and clicking takes customer back to profile without taking any action ✔️
- Header text displays ✔️
- All inputs pre-populated with information from the database for the current fields ✔️
- Information displays in the same way as above for the add recipe funtion including add and remove buttons for ingredients and method steps ✔️
- Remove buttons for ingredient and step are displayed if user wants to decrease the number of these elements dynamically ✔️
- Submit button displays and clicking proceeds with editing recipe. User feedback is provided that it has been successful when they are routed to the profile page ✔️
- Cancel button displays and clicking takes customer back to profile without taking any action ✔️
- Header text displays ✔️
- Name, email, password and query inputs display and go red if not filled in as they are required ✔️
- Submit button displays and clicking proceeds with sending contact email to the app admin. Users are routed back to the profile screen and provided with feedback that their request has been sent ✔️
- Error message displays with error type ✔️
- User can still use nav elements within the app ✔️
Below is a table showing some (but by no means all) the bugs encountered in this project and how they were fixed.
| Bug | Fix |
|---|---|
| Not connecting to database to show user info | Correct database not used in MongoURI. Updated |
| Not displaying recipe type names in add recipe page | Incorrect syntax when attempting to call type name from database |
| Not redirecting to profile page correctly after adding recipe | Redirect syntax not in the correct format to read session cookie data |
| Showing edit and delete recipe buttons on browse page for all users | Added if statement checking if user in recipe database is user in session |
| Recipe link options displaying in a disjointed way on small screens | Removed right align class and now they appear more uniform |
| User delete function works on my recipes page but not on browse page | User variable being used was for user was 'session.user' which did not access the database for the user so no database actions could be completed. Had to refactor the routes using this variable to call the database. |
| Error page brought up when edit recipe was clicked after going back to profile in home | Same issue as previous bug and same fix |
| Previous user variable fix only worked for user delete function but broke edit recipe function | Changed back to session user variable for edit recipe and delete recipe |
| Delete user function didn't work correctly again | I had moved the modal for this to base.html which created an error when routing to signin.html as the user variable was not define. I moved the modal content to profile.html and browse.html and this fixed the issue. Now routes correctly back to signin page after user is deleted. |
| Delete recipe modals where only coming up for one recipe even when button was clicked for other recipes | Appears to be an issue with materialize modals. Stopped using materialize modal for delete recipe. The problem lies with the fact that there are multiple identical html elements and the modal only selects the first one. |
| When user was edited the profile screen did not display any recipes | I was using the database user as the variable for the profile instead of the session user so the jinja tmeplate was not calling the correct information from the database |
| On add recipe screen there was whitespace present in the recipe description textarea | Put the html tag on one line which fixed issue |
| Change password function does not upadte database when both new passwords match | new_password id not called correcly as there was a rogue space |
| Add ingredient and remove ingredient buttons weren't working on edit recipe screen | Had a class name wrong so the javascript function wasn't calling correctly |
| When like/unlike button is clicked by user it continues to decrement below zero | The likes database was not being called accurately with both user data and recipe data resulting in errors |
| Browse, view recipe and profile pages did not display recipe information in a user friendly manner on all devices | Refactored HTML code and simplfied using materialize grid |
| Side nav in all pages which display has been moved while putting splash page in. It does not show correctly at the side of the page as it should. It is currently in 1 line at the top | Changed div row and column structure until I got the layout i was looking for |
| Contact mails not working correctly when contact form was submitted | Had to allow gmail to use less secure apps and enable 'display unlock captcha' in settings |
| Contact emails only work for 1 day then you are again required to use the 'display unlock catcha' in google security settings | Switched to Amazon SES SMTP relay server |
| if username is edited then user attempts to hit home button or any user related actions a 404 is returned | updated session user variable in edit username function as this was causing 404 as session user was still using old username |
| if username is edited then recipe collection is not updated with new username so user loses their recipes | recipe collection of user now updated when username is changed |
| If user edits username then their likes do not follow them | amended user_edit function to update username in likes collection |
Raw code from the following pages were run through w3c HTML validator without any errors or warnings:
- Index page
- Main profile page
- Browse page
- Add recipe page
- Search page
- Edit recipe page
- View recipe page
- Sign in page
- Sign up page
- Change password
- Edit user data
- Contact form
Custom static CSS file run through w3c CSS validator without any issues.
PDFs of expanded Google Lighthouse testing for Performance, Accessability, Best Practices and Search Engine Optimisation can be found here