As part of my manual testing, I have tested that all of my features work as expected. Making sure to go through them across all different user types and various screen sizes and devices.
| ID | Test Case | Expected Output |
|---|---|---|
| 1 | Responsive Nav Bar - Full Screen and Mobile | All links have correct hover animation On smaller devices navbar becomes single button drop down All links navigate correctly across various account types |
| 2 | Footer | All links have correct animation All links navigate to correct pages |
| 3 | Search Bar | Search bar returns response for if part or all of a recipe title is entered Search returns response if a particular phrase in the ingredient field is entered Search returns all recipes related to a topic if a topic is entered |
| 4 | Browse Buttons | 'All' button clears the query and returns all recipes Clicking a topic returns all recipes associated with that topic |
| 5 | Pagination | Pagination buttons all function correctly Pagination is still applied when browsing or searching and when moving to the next page the list remains filtered |
| 6 | Recipe Cards | Recipe cards show correct information Link to the correct recipe Display edit and delete buttons only to the author Display time as hr and min correctly |
| 7 | Recipe Page | Displays correct recipe info Like button works for users and redirects non authenticated users Times are calculated and displayed correctly as hr and min Edit and Delete buttons are visible only to the recipe author Information is displayed neatly across various device sizes with none, small and large amounts of information entered User is able to comment if logged in Guest is directed to log in Users cannot use the submit button multiple times Correct comment creator information is displayed Only comment creators can see edit and delete buttons |
| 8 | Create Recipe | Title must be unique Time and Nutrition fields must be positive integer A topic and an allergy field must be selected Image field uploads to cloudinary database Difficulty is a selection of 3 options Intro, Method and Ingredients are CKEditor fields and work correctly Submit button can only be clicked once until processed Form errors are displayed clearly to the user |
| 9 | Delete | User is informed of what they are about to delete Only the correct user is able to delete a recipe or comment User is redirected back if clicking the cancel button Delete method functions correctly and cascades all relations |
| 10 | Profile | Displays correct users avatar and bio Displays placeholder information if blank Only shows update link for the correct user Displays a recipe grid containing only the correct users submitted recipes All features as with the home page recipe grid function correctly |
| 11 | Update Profile | Only the correct user has access to the page Form is processed correctly Image field uploads to cloudinary Bio field character limit is set |
I have also gone over the user stories that I implemented and approached them from a user standpoint to judge if I was happy with the end result.
| ID | Test Case | Result |
|---|---|---|
| 1 | View Recipes | ✓ |
| 2 | Filter By Topic | ✓ |
| 3 | Search | ✓ |
| 4 | See comments and Likes | ✓ |
| 5 | Leave comments and Likes | ✓ |
| 6 | Remove comments and Likes | ✓ |
| 6 | See a users Profile | ✓ |
| 7 | Update Profile | ✓ |
| 8 | Create, Edit and Delete a Recipe | ✓ |
| 9 | All information is clear and easy to read | ✓ |
I also asked my peers for their reviews on the website and made changes accordingly.
Some of the feedback that I implemented:
- The account button in the nav bar looked odd being a different shade to the other two nav buttons.
- The search icon was a little small.
- It would be better if the page loaded at the recipe list rather than the top of the page when searching/browsing.
- A message should be displayed if a search returns nothing.
- Navbar was a bit in the way when reading recipe instructions on smaller devices.
After researching the most commonly used screen resolutions (Screen Resolutions Research Link), I tested the responsive design on all the pages in this project at the resolutions widths of:
As they are very common resolutions. I carried out the tests using a combination of the BrowserStack Responsive Design Tester, Media Genesis RESPONSIVE WEB DESIGN CHECKER and Chrome Dev Tools.
I manually tested the project on the Browsers Firefox (version 94), Chrome (version 96) and Edge (version 95).
I tested the Performance, Accessibility, Best Practices and SEO of the site using Lighthouse in Chrome Developer Tools.
I also wrote a small number of automated python tests to test my views, forms and models. If you wish to run these tests, you will need to swap the databases by swapping the commented out Test database that uses sqlite3 with the postgres database.
DATABASES = {
'default': dj_database_url.parse(os.environ.get('HEROKU_POSTGRESQL_COPPER_URL'))
}
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
# }
I used the W3C Validator to check my HTML
There are a number of Illegal Character errors (spaces) because of the way that the recipe cards are generated and some sections and divs that it believes are unclosed due to using {% include ... %} in my code.
There are also some errors where I have left alt attributes for background images.
Otherwise, the majority of the HTML is valid and no major issues for concern are ever raised.
All CSS was run through the W3C jigsaw validator.
Errors returned were from third party code. The errors were checked and didn't appear to have a negative effect on the performance of the site.
JSHint was used to validate JavaScript, all code passed.
PYLint and Pep8 were used to validate Python code. There are two trailing white spaces that I can't seem to get rid of but otherwise all code passes.