Skip to content

Latest commit

 

History

History
404 lines (214 loc) · 27.6 KB

TESTING.md

File metadata and controls

404 lines (214 loc) · 27.6 KB

TESTING

Html

— Code Validation —

As the HTML code is completed on all HTML files, a code validation test is carried out by using W3C Markup Validation Service, which is a validator by the World Wide Web Consortium that allows checking HTML and XHTML documents for well-formed markup, to check any warnings and errors.

Home Page (index.html): [10 Errors & 5 Warnings] *Some duplicated errors and warning and they are not repeated below

  1. Error: Element hr not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

        Solve the error by putting hr in <li>

  1. Error: Attribute alt not allowed on element a at this point.

        Solve the error by using title instead of alt

  1. Error: Bad value button for attribute type on element a: Subtype missing.

        Solve the error by removing type="button"

  1. Error: Element a is missing required attribute href.

        Solve the error by solving error No. 3

  1. Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

        Solve the warning by using div instead of section

  1. Error: Stray start tag tr.

        Solve the error by using Django form .as_p

  1. Error: Stray start tag th.

        Solve the error by using Django form .as_p

  1. Error: Stray start tag td.

        Solve the error by using Django form .as_p

  1. Warning: The type attribute is unnecessary for JavaScript resources.

        Solve the warning by removing type attribute

Products Page (products.html): [0 Errors & 2 Warnings] *Some duplicated errors and warning and they are not repeated below

  1. Warning: The type attribute is unnecessary for JavaScript resources.

        Solve the warning by removing type attribute

Product Detail Page (product_detail.html): [0 Errors & 0 Warnings]

Add Product Page (add_product.html): [3 Errors & 0 Warnings]

  1. Error: Duplicate attribute id.

        Solve the error by removing id="new-image"

  1. Error: Element p not allowed as child of element strong in this context. (Suppressing further errors from this subtree.)

        Solve the error by removing strong element

  1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

        Solve the error by using {% for field in form %}

Edit Product Page (edit_product.html): [3 Errors & 0 Warnings]

  1. Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

        Solve the error by putting alt attribute

  1. Error: Duplicate attribute id.

        Solve the error by removing id="new-image"

  1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

        Solve the error by using {% for field in form %}

Shopping Cart Page Desktop Size (cart.html): [20 Errors & 16 Warnings] *Some duplicated errors and warning and they are not repeated below

  1. Error: td start tag in table body.

        Solve the error by putting {% for item in cart_items %} above <tr> tag. Solve the error for Free golf balls by putting <td> tags in <tr> tag

  1. Error: Duplicate ID ###

        Solve the error by using class instead of id

  1. Warning: The first occurrence of ID ### was here.

        Solve the error by using class instead of id

  1. Error: No p element in scope but a p end tag seen.

        Solve the error by removing additional </p> tag

Shopping Cart Page Mobile Size (cart.html): [16 Errors & 16 Warnings] *Repeated errors and warnings of Duplicate ID and The first occurence of ID was here

  1. Error: Duplicate ID ###

        Solve the error by using class instead of id

  1. Warning: The first occurrence of ID ### was here.

        Solve the error by using class instead of id

Checkout Page (checkout.html): [1 Errors & 0 Warnings]

  1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

        Solve the error by removing for="id-save-info" attribute from the label

Checkout Success Page (checkout_success.html): [0 Errors & 0 Warnings]

Allauth Account Pages (signup.html, login.html, logout.html, password_reset): [0 Errors & 0 Warnings]

Note
Check only core pages of Allauth templates but as they are Django package, presume no errors or warnings on other Allauth pages

Toast Messages (toast_error.html, toast_info.html, toast_success.html, toast_warning.html): [0 Errors & 0 Warnings]

404 and 500 Pages (404.html, 500.html): [0 Errors & 0 Warnings]

Note
Check only 404 page but they have the same structure so presume no errors or warnings on 500 page

Profile & Order History Page (profile.html, profile_order_history): [0 Errors & 0 Warnings]

— Form Validation —

There are some forms on the website. Some of them are validated by front-end (e.g. @ mark for email input) and some by back-end (e.g. existing user name). A manual test is carried out to see if the validations and form functions work properly.

Search Form

The form takes any texts including special characters (e.g. £, @, [ etc) so there is no form validation for this and the search is processed when the search button is clicked as long as there is a text in the input box. It works fine when a key word exists in product names or descriptions, and when it does not it shows 0 result. When there is no text in the input field, then it displays an error message. The search function is available on all the pages and it works from anywhere on the page.

Subscribe To Newsletter Form

The form is available on all the pages on the website so try to submit an email from a few different pages to make sure it works. All the emails are submitted from any page and saved in the database so it works fine. If the email has no @ mark, it gives a warning message that @ mark must be included. There should not be duplicated emails in the system so if the email address already exists, it displays an error message.

Register and Login Forms

Users must be unique so if the email address or username already exists in the database, it displays an error message for register page. Also, when the passwords do not match, it displays an error message. This is similar for the login page that if the email or user name does not exist in the database, it displays an error message and if password is incorrect, it also displays an error message.

Add Product, Checkout and Stripe Form

When mandatory fields are not filled in or the form is invalid, it displays an error message. For credit card details, it is validated by Stripe and if it is invalid details, it displays an error message.

Note
{% csrf_token %} which is a secure random token is used to prevent CSRF attacks on all the forms. (and unless there is {% csrf_token %}POST method will not work)
Based on the manual test, all the forms on the website work properly

— Quality —

A quality check test is carried out by using Lighthouse, which is an open-source and one of the automated DevTools for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO.

Home Page (index.html)

Products Page (products.html)

Product Details Page (products/<product id>.html)

Cart Page (cart.html)

Checkout Page (checkout.html)

Profile Page (profile.html)

Note
Improve Accessibility on those pages by adding aria-label on button elements that have no text and by not using headlines (h5 & h6) for Heading elements are not in a sequentially-descending order error. Accessibility is now improved on all the pages and 90 plus scores show on the pages, except the checkout page which still shows 88 because there are many fields that have no label for the fields and that brings down the score (There are no labels deliberately to keep the neat style)
There are some issues on Performance especially low scores on mobile size. The main issues are caused by the type and size of images, unused CSS and JavaScript CDNs. I recall having the same issues on my previous project that I could not improve the Performance. (e.g. When changing the size or type of the image, it causes another type of error and when trying to limit the use of CDNs, Bootstrap and JavaScript do not work on certain pages) Ideally, the score should be more than 90 for all the categories on both mobile and desktop sizes and anything below should be looked at and improved as much as possible, however, as almost coming to the end of the project and I am afraid of breaking something by trying to improve the Performance, I decide to leave it as it is.

Css

— Code Validation —

As the CSS code is completed, a code validation test is carried out by using W3C CSS Validation Service, which is a validator by the World Wide Web Consortium that allows checking Cascading Style Sheets, to make sure that CSS complies with the standards set by the World Wide Web Consortium.

base.css, cart.css, checkout.css, index.css, products.css and profile.css are tested and there are no errors on any of CSS files.

Note
There are some warnings related to WebKit, which is one of web browser rendering engines, for base.css, index.css and product.css. By looking at the Stack Overflow post and a Code Institue Slack threads, no further actions are required so decide to leave as it is

JavaScript

— Code Validation —

As the JavaScript code is completed, a code validation test is carried out by using JSHint, which is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules.

quantity_input_script.html (js code in cart app), stripe_elements.js, quantity_input_script.html (js code in product app), countryfield.js and js script on cart.html are tested. There is a warning of 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). so solve the warning by putting /*jshint esversion: 6 */.
$ shows on all the files as an undefined variable but this is jQuery symbol so can be ignored. Stripe on stripe_elements.js shows as an undefined variable but this comes from Stripe document so it can be ignored.

Python

— Code Validation —

As Python code is completed, a code validation test is carried out by using PEP8 (Python Enhancement Proposal) online to see if the code meets guidelines and best practices for the readability and consistency of Python code.

Below is the list of py files that are customised and checked by the validator.

eagle-golf Product

  • asgi.py, settings.py, urls.py and wsgi.py: There is line too long error and it is all fixed

cart App

  • apps.py, contexts.py, urls.py and views.py: There are trailing whitespace, two blank lines, no newline at end of file, line too long warnings and errors, and they are all fixed

checkout App

  • init.py, admin.py, apps.py, forms.py, models.py, signals.py, urls.py, views.py, webhook_handler.py and webhooks.py: There are no newline at end of file, trailing whitespace, line too long, too many blank lines, at least two spaces before inline comment, expected 2 blank lines, blank line contains whitespace warnings and errors and they are all fixed

home App

  • admin.py, apps.py, contexts.py, forms.py, models.py, urls.py and views.py: There are trailing whitespace, no newline at end of file and line too long warnings and errors and they are all fixed

products App

  • admin.py, apps.py, forms.py, models.py, urls.py, views.py and widgits.py: There are no newline at end of file, line too long, blank line contains whitespace warnings and errors and they are all fixed

profiles App

  • apps.py, forms.py, models.py, urls.py, and views.py: There are no newline at end of file, line too long and trailing whitespace warnings and errors and they are all fixed

Note
All Python code complies with PEP8 guidance except 4 Allauth Password Validators that cannot be broken into separate lines

— Functions —

There are some functionalities, which are run by views.py file in each app (in some cases by contexts.py), on the website. A manual test is carried out to see if these functions work as expected.

cart App:

  • View Cart: Products in the cart can be viewed by clicking the cart icon or a process your order button ✔
  • Add Cart: Products can be added from the product page by clicking an add to shopping cart button. If the same product has different sizes (and right or left for golf clubs), they are added separately ✔
  • Adjust Cart: Products can be adjusted in the cart. Change the quantity of the product and remove it ✔
  • Special Offer: Free Golf Balls appear for any order €250 or more. This is not run by views.py but should work when the total purchase is €250 or more ✔
  • Display: Price per product, discount price and total value including shipping cost show based on the products in the cart ✔

checkout App:

  • Checkout: Checkout is done by completing the form & credit card details and clicking a complete order button. Products in the cart can be views by clicking the cart icon or a process your order button ✔
  • Checkout Success: When the order is completed, it creates an order in the database and saves the info. It also shows checkout success page for users ✔
  • Confirmation email: When the order is succeeded (means payment in Stripe goes through), a confirmation email is sent ✔
  • Stripe: When the order is completed, it creates a record of payment_intent, charge.succeeded and payment_intent.succeeded ✔

home App:

  • Subscribe to our newsletter: When a unique and valid email is submitted, it saves in the database with Subscribed = True status ✔

products App:

  • Product Display: Products are displayed by group of categories, category, brand, sale products and all products. They can be sorted by price, category and product name both ascending and descending order. Products can be searched by a keyword ✔
  • Product Details Display: Product details can be viewed by clicking an image of the product. It displays product category, ID, description, price, size (if applicable), discount price (if applicable) ✔
  • Product Add, Edit and Delete: Only authorised user (admin) is allowed to do these ✔

profile App:

  • Profile: Access to the profile page where users can update the personal details and access to the order history ✔
  • Profile (Admin): For admin user, Edit and Delete buttons appear on each product and there is a page for Adding product ✔

Defensive Programme

There are some pages that only authorised users have access to. This is to test and confirm that non-authorised users have no access to these pages.

  • Profile page: Only logged in users have access to the profile page. When /profile/ is typed on URL, unless users are logged in, users are directed to the login page

  • Add Product page: Only admin has access to the page. When /products/add/ is typed on URL, if users are not logged in, users are directed to the login page. If users are logged in, then users are directed to the home page with an error message unless Admin user

  • Edit Product page and Delete product function: Same as "Add Product"

  • Order History: Only the user who purchased the product has access to the order history. When the order history URL is typed and if users are not the user who purchased the product, the users are redirected to the profile page with an error message

Web Browser

— Visibilities and functionalities —

The website is available on the major web browsers, such as Chrome, Safari, Firefox, Opera and Microsoft Edge. To make sure all the visual contents are shown and functions work properly on those browsers, the below tests are carried out on all of them. *Except Chrom that is used to build the website

  1. Open the website on the browser to do a visual test. Look at all the pages to see if everything appears as expected (both desktop and mobile sizes)
  2. Try all the functions outlined on the Python Functions test
Python Functions

Python Functions


Note
All the above visibilities and functions work without any problem on each browser, except a small issue on Firefox that browser default input display causes an issue on Firefox so it is fixed by making it inactive by putting input[type=number] {-moz-appearance: textfield;} on base.css

UX

— Evidence Of Achieving The Website From UX Point Of View —

There are some key features to achieve the primary goals of the website from user's point of view (both shoppers and the owner) and this is to confirm that all the features planned on Strategy and Scope Planes are implemented on the website based on the tests carried out in the testing section.

Strategy Plane

image

Strategy Plane

image

Unsolved Issues

There are a few issues in the project that are addressed to get them solved however they remain unsolved issues due to a lack of my current skill and/or time

Low Performance on Mobile Size

  • Cannot improve it because of my current skillset (that may need to plan and build the website from the Performance point of view) and time. Hope to have the skillset in the near future as I continue learning

Increment and Decrement Buttons

  • For the products that have a size and all golf clubs that have right and left, increment & decrement buttons are not disabled. If id is used for this, one of them works but the other one does not (and id cannot be used for duplicate id error on html validation). If class is used, when one of them is disabled, another one is also disabled. By setting a unique class, this would work but do not know how to implement this in JavaScript using Django template and it is not a major issue, leave it as an unsolved issue

Sorting Products By Price Including Discounted Price

  • Sort function on the product pages, it sorts by the original price but it does not consider the discount price. Therefore, some products do not look like sorted by price correctly. The original price field and discount price field are in the different tables so they cannot be directly compared so this cannot be solved unless the current database structure is changed

Save Delivery Info On Checkout

  • On the checkout page, logged in users can save the delivery info if they wish to. There is a check box as an option, however even the box is unticked, the details are saved for some reason. Looked at the code but cannot figure out why this happens, and as it is not a major issue, leave it as an unsolved issue

Register Page

  • On the Register page, the user name, which is the second field, is auto-focused. When open the page, the first field, which is an email address, should be auto-focused. Try to fix this but no access to forms.py for the Register page as it is Allauth package, and as it is not a major issue, leave it as an unsolved issue

Full Name

  • For registered users, when they go to the checkout page, they see some fields are pre-filled if they update Default Delivery Information on the profile page. There is a full name field that picks up the first name and last name of users personal info. To retrieve the data from the fields, users must input the details. Try to get first name and last name at the time of registration but cannot add these fields as they are controlled by Allauth. Try to add first name and last name fields on the profile page but that causes some issues on Stripe. It is not a major issue, decide to leave it as an unsolved issue

Error Message of Subscribe to Newsletter Form

  • During the final checking of the website before submission, notice that when the "Update Information" button is clicked, the error message for Subscribe to Newsletters comes up. Check contexts.py in the Home App that has Subscribe to Newsletters function and views.py in the Profile App that has Update Information function to see if there are any errors on them, like the same variable being used and that might cause the issue. Cannot find any obvious errors on them and not sure how to solve the problem so post it to Code Institute slack. Get feedback to suggest something wrong with it but not the solution so contact tutor support. It is confirmed that when the "Update Information" button is clicked, Subscribe to Newsletters function is NOT working (meaning both Update Information and Subscribe to Newsletters functions are working independently and correctly) and the tutor thinks a browser is causing the issue but cannot identify it. Try to use a different browser but get the same result. Look for the solution or similar issues on the internet but cannot find it. Approx. 4 hours of time is spent but cannot identify and solve the issue, decided to leave it as an unsolved issue

Note
Strangely enough, this only happens with the "Update Information" button on the Profile page. There is a form that does a POST action on the Product Details page, and when the button is clicked, no error message comes up