testing.md

Testing

Contents

• Validator Testing
• LightHouse Testing
• Testing for user strories
• Manually Testing
• Responsiveness Testing
• Bugs and solutions

Validator Testing

HTML

I used W3C Markup Validation Service to test my html code.

Because the code is written using Jinja templates, I had to use "view page source" code by right clicking each live page, and run that code through the validator.

I got the following errors :

I fixed this error by replace the <span> element with li, and add custom css to style it.

I fixed this error by adding an alt attribute to all <img> element.

This is an error due to Jinjia templates, the loop caused duplicated id.

CSS

I have used the W3C CSS Validation Service to validate my CSS code. An error was found see below. ⬇️

I fixed this error by using margin instead of margin-block.

The result came back clear! ⬇️

Javascript

I used JSHint to validate my Javascript code. I have got three unused variables, see the error message below. ⬇️

I checked them, inputare unnessary, so I deleted it.

The "goBack" function are used in HTML as onlick method. See below ⬇️

The same issue for the creatInput function, it has been called in HTML code. See below ⬇️

Python

I checked my app.py file using PEP8 online, errors shows below ⬇️

In order to fix the errors, I had to disable Pylance.

LightHouse Testing

After validating all codes, I ran the site through Chrome LightHouse. The initial scores were below: ⬇️

Taking the feedback into account, I have looked into the recommedations and improved the code:

Performance

• Reduced some image size

Accessibility

• Changed footer content color for a sufficient contrast ratio

• Made sure heading element in descending order

• Add alt attribute to all img element

SEO

• Add meta description and http-equiv

All of the above changes brought up the score. Although there are still many area to be improve, I am happy with the score for now, and will bare in mind with all the recommendations for future references.

Testing for user stories

As a general user:

• I want to be able to see recipes without having to register an account.

Without register an account, users can browse recipes casually.⬆️

• I want to be able to search recipe with certain ingredients.

• I want to search by specific categories, ie. detox, kids friendly, weight loss etc.

Users are able to search recipes by entering ingredients keyword.⬆️

• I want to be able to share my recipe with other people.

Once the user create an account, they can upload their own recipes to share with the community.⬆️

• I want to have an account so I can come back, add, edit or delete my recipe.

There is an option to create an account, once that is done, the user can come back upload, edit or delete recipes of their own.⬆️

As a first time user:

• I want to know what the website is about.

The headline and benefits cards gives the first time visitor an idea what the website is about.⬆️

• I want to have a little taste about how the recipe looks like, is it something I am looking for.

• I want to explore around to get to know the place.

The users would be able to click "view recipe" see for format of a full recipe.⬆️

As a returning user:

• I want to be able to log into my accout.

• I want to add recipe to pre-determined categories.

• I want to have access to the recipe I uploaded.

• I want to be able to edit or delete my own recipe anytime if I want to.

  

The users are able to upload, edit or delete their own recipes.⬆️

As the site owner/admin:

• I want to be able to add new categories to the site.

Admin can manage the smoothies categoies.⬆️

• I want the new category to be added and displayed as a certain way to go with the flow of the entire site.

• I want to be able to edit the pre-existing categories.

• I want to be able to delete any categories.

The above images shows those functionalities. ⬆️

Manually Testing

base.html

home.html

all_recipes.html

register.html

log_in.html

my_recipes.html

add_recipe.html

edit_recipe.html

full_recipe.html

categories.html

add_category.html

edit_category.html

Responsiveness Testing

The website was tested on a variety of devices:

• MacBook Air

• Dell laptop

• Sumsung Galaxy tab A10.1

• Sumsung Galaxy S10

• Huawei P10

• Sumsung A125F

• Iphone 5

The website was viewed by different browsers:

• Google Chrome

• Mozilla Firefox

• Opera

• Microsoft Edge

• Safari

Responsive Viewer

Bugs and solutions

Edit Recipe Issue

During testing I encountered an issue with editing the recipe. When I was in the editing page, cilck update button when make no changes, all the recipe ingredients and method will be wipped out returns blank.

It was caused by the nameattribute have a blank space. With the ingredients input fields I didn't give name attribute to all the input fields either.

Delete Recipe/Category Issue

When delete a recipe, it didn't matter which recipe delete button I clicked, it always deletes the first recipe on the page.

It was caused by the loop through of the confrim deletion modal.

I fixed this bug with give a looping id to the modal and delete button, see the code below.⬇️ but because of the looping id, I couln't style it in style sheet, so instead, I did it in Html with the style attribute.

The same happened with delete category function, I fixed it with the same approach.

Edit Recipe Category won't display

When I testing edit recipe function, the smoothie category were't display accordingly. Instead showing the correct category, it always shows the first category in the database.

I know it was the data wasn't bonding correctly in the html page. It was because I used ObjectId method for category name. I changed the code to {% if category._id == recipe.category_name %}, and that solved the problem.