Readme navigation links: 🧭
- 📕 View Readme documentation
- 🎨 View Design documentation
- 🚀 View Deployment documentation (Local & Production)
- ✨ View Features documentation
- 🔓 View Security documentation
The testing documentation offers a thorough walkthrough of the website's testing procedures and functionality. It includes screenshots from various testing stages for visual guidance. This essential resource assists individuals looking to delve deeper into the testing aspects of the website. It's arranged into multiple sections, each emphasising a specific testing procedure or function. The sections included are:
- Code Validation
- Browser Compatibility
- Responsiveness
- Lighthouse Audit
- User Story Testing
- Automated Testing
- Bugs
- Unfixed Bugs
For Code Validation, I have used the following tools: 🛠️
- W3C HTML Validator Validates HTML code
- Jigsaw CSS Validator Validates CSS code
- PEP8 CI Python Linter Validates Python code
- JShint JavaScript Validator Validates JavaScript code
- Eslint for JavaScript linting
- Ruff python linter for Python linting & formatting
- Pycharm Code Inspections for Python linting (use pep8 style guide)
I have employed the W3C Markup Validation Service, which is the recommended tool for validating all of my HTML files. The validation process ensures accuracy and adherence to industry standards. To access the validator, please visit the following URL: W3C Markup Validation Service.
Important
HTML validation info messages
I utilised the prettier formatter to properly format the HTML, which leads to the inclusion of trailing slashes at the conclusion of tags. It is important to note that while this may prompt an informational message in HTML validation reports, it does not constitute an error.
Page | W3C URL | Screenshot | Notes |
---|---|---|---|
About us | W3C | No warnings | |
Contact Us | W3C | No warnings | |
FAQS | W3C | No warnings | |
Privacy Policy | W3C | No warnings | |
Products | W3C | No warnings | |
Product Detail | W3C | No warnings | |
Profile Account | Validated by input | No warnings | |
Profile Account Delivery Information | Validated by input | Error fixed on commit: b7a681d334ea03bb01ecee84cb5f1b5faa403d9c | |
Profile Account Orders | Validated by input | No warnings |
I have employed the CSS Jigsaw Validator, which is the recommended tool for validating all of my CSS files. The validation process ensures accuracy and adherence to industry standards. To access the validator, please visit the following URL: CSS Jigsaw Validator.
Important
CSS validation errors:
This project uses Tailwind CSS, which is a utility-first CSS framework. As such, the css is compiled & minified into one css file with Vite. CSS validation has returned 56 CSS parsing errors. This issue is a result of the final ccs build using Tailwindcss. The maintainer of TailwindCSS has discussed this issue and provided a solution; however, the recommended fix cannot be used as it is causing issues with the styles used within the application. Remove --tw- variables from universal selector #7317
File | Jigsaw URL | Screenshot | Notes |
---|---|---|---|
main.css Navigate to file | Jigsaw | Fail: (61) Errors. These errors are due to the --tw- variables from universal mentioned above. |
I have used the recommended JShint Validator to validate all of my JS files along with ESLint for JavaScript linting.
If using modern JavaScript (ES6) methods, then make sure to include the following line at the very top of every single JavaScript file (this should remain in your files for submission):
Note
ESLint Configuration
/* jshint esversion: 11 */
& /* jshint asi: true */
have been added to the top of each JS file for assessment purposes. This allows the JShint validator to recognize modern ES6 methods, such as:
let
, const
, template literals
, arrow functions (=>)
, etc.
File | Screenshot | Notes |
---|---|---|
main.js Navigate to file | Pass: No Errors | |
stripe.js Navigate to file | Pass: No Errors | |
wishlist.js Navigate to file | Pass: No Errors | |
wishlist_append_to_dialog.js Navigate to file | Pass: No Errors | |
Build file main.js Located in ~/static/dist/ directory | Pass: No Errors | |
Build file stripe.js Located in ~/static/dist/ directory | Pass: No Errors | |
Build file wishlist.js Located in ~/static/dist/ directory | Pass: No Errors |
I have utilised the Ruff Python linter
to validate and format all of my Python files according to the PEP8 standards.
This was done in conjunction with the PyCharm IDE.
Additionally,
I employed the recommended PEP8 CI Python Linter
to validate all files excluding diregtories in the tests & migrations folders, as well as __init__.py
files.
Important
Testing Python Code
Folders excluded from testing include: tests & migrations.
Files excluded from testing include: __init__.py
files.
Status | Filename | Result Text |
---|---|---|
Pass | ./apps/home/apps.py | All clear, no errors found |
Pass | ./apps/home/urls.py | All clear, no errors found |
Pass | ./apps/home/views.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/models.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/apps.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/admin.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/utils.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/urls.py | All clear, no errors found |
Pass | ./apps/ecommerce/products/views.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/signals.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/apps.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/webhook_handler.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/webhooks.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/urls.py | All clear, no errors found |
Pass | ./apps/ecommerce/checkout/views.py | All clear, no errors found |
Pass | ./apps/ecommerce/cart/apps.py | All clear, no errors found |
Pass | ./apps/ecommerce/cart/context_processors.py | All clear, no errors found |
Pass | ./apps/ecommerce/cart/urls.py | All clear, no errors found |
Pass | ./apps/ecommerce/cart/views.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/models.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/apps.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/forms.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/admin.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/tests.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/urls.py | All clear, no errors found |
Pass | ./apps/ecommerce/orders/views.py | All clear, no errors found |
Pass | ./apps/ecommerce/wishlist/models.py | All clear, no errors found |
Pass | ./apps/ecommerce/wishlist/apps.py | All clear, no errors found |
Pass | ./apps/ecommerce/wishlist/forms.py | All clear, no errors found |
Pass | ./apps/ecommerce/wishlist/urls.py | All clear, no errors found |
Pass | ./apps/ecommerce/wishlist/views.py | All clear, no errors found |
Pass | ./apps/customer_support/apps.py | All clear, no errors found |
Pass | ./apps/customer_support/forms.py | All clear, no errors found |
Pass | ./apps/customer_support/context_processors.py | All clear, no errors found |
Pass | ./apps/customer_support/urls.py | All clear, no errors found |
Pass | ./apps/customer_support/views.py | All clear, no errors found |
Pass | ./apps/subscriptions/models.py | All clear, no errors found |
Pass | ./apps/subscriptions/apps.py | All clear, no errors found |
Pass | ./apps/subscriptions/forms.py | All clear, no errors found |
Pass | ./apps/subscriptions/admin.py | All clear, no errors found |
Pass | ./apps/subscriptions/urls.py | All clear, no errors found |
Pass | ./apps/subscriptions/views.py | All clear, no errors found |
Pass | ./apps/accounts/signals.py | All clear, no errors found |
Pass | ./apps/accounts/models.py | All clear, no errors found |
Pass | ./apps/accounts/apps.py | All clear, no errors found |
Pass | ./apps/accounts/forms.py | All clear, no errors found |
Pass | ./apps/accounts/admin.py | All clear, no errors found |
Pass | ./apps/accounts/urls.py | All clear, no errors found |
Pass | ./apps/accounts/views.py | All clear, no errors found |
Pass | ./apps/marketing/models.py | All clear, no errors found |
Pass | ./apps/marketing/apps.py | All clear, no errors found |
Pass | ./apps/marketing/admin.py | All clear, no errors found |
Important
Extended Python Validation screenshots and links
The following table contains links to the PEP8 CI Python Linter validation results for each file.
View detailed testing with screenshots with CI Python Linter links
Status | Filename | Screenshot | Result | CI URL |
---|---|---|---|---|
Pass | ./apps/home/apps.py | All clear, no errors found | Link | |
Pass | ./apps/home/urls.py | All clear, no errors found | Link | |
Pass | ./apps/home/views.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/models.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/apps.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/admin.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/utils.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/urls.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/products/views.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/signals.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/apps.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/webhook_handler.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/webhooks.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/urls.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/checkout/views.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/cart/apps.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/cart/context_processors.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/cart/urls.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/cart/views.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/models.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/apps.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/forms.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/admin.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/tests.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/urls.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/orders/views.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/wishlist/models.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/wishlist/apps.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/wishlist/forms.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/wishlist/urls.py | All clear, no errors found | Link | |
Pass | ./apps/ecommerce/wishlist/views.py | All clear, no errors found | Link | |
Pass | ./apps/customer_support/apps.py | All clear, no errors found | Link | |
Pass | ./apps/customer_support/forms.py | All clear, no errors found | Link | |
Pass | ./apps/customer_support/context_processors.py | All clear, no errors found | Link | |
Pass | ./apps/customer_support/urls.py | All clear, no errors found | Link | |
Pass | ./apps/customer_support/views.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/models.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/apps.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/forms.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/admin.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/urls.py | All clear, no errors found | Link | |
Pass | ./apps/subscriptions/views.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/signals.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/models.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/apps.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/forms.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/admin.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/urls.py | All clear, no errors found | Link | |
Pass | ./apps/accounts/views.py | All clear, no errors found | Link | |
Pass | ./apps/marketing/models.py | All clear, no errors found | Link | |
Pass | ./apps/marketing/apps.py | All clear, no errors found | Link | |
Pass | ./apps/marketing/admin.py | All clear, no errors found | Link |
Important
Django settings.py
The Django settings.py file comes with 4 lines that are quite long, and will throw the E501 line too long
error.
This is default behavior, but can be fixed by adding # noqa
to the end of those lines.
AUTH_PASSWORD_VALIDATORS = [
{
"NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator", # noqa
},
{
"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator", # noqa
},
{
"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator", # noqa
},
{
"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator", # noqa
},
]
Note
Browser Screenshots
Screenshots of the deployed project on various browsers can be found in the docs/testing/browser-testing directory.
Due to the large number of screenshots,
the browsers have been categorized based on their types
and can be accessed in the dropdown menu below view detailed screenshots
.
Nearly all pages have been tested on mobile & desktop in Chrome, Firefox & Safari.
I have tested my deployed project on multiple browsers to check for compatibility issues. The browsers tested were:
- Chrome Version 121.0.6115.2 (Official Build) dev (arm64)
View detailed screenshots for Chrome
- Firefox (Developer Edition) Version 121.056 (64-bit)
View detailed screenshots for Firefox
- Safari Version 17.1 (19616.2.9.11.7)
View detailed screenshots for Safari
Device testing was conducted using the Polypane browser app, which allows for testing on multiple devices simultaneously.
The three sizes tested were:
- Mobile (320px)
- Tablet (500px)
- Desktop (12580px)
Important
Lighthouse Audit The primary cause of performance issues can be attributed to the Stripe.js file and the static files obtained from the AWS S3 bucket. The Stripe.js file is essential for enabling Stripe payment functionality, while the static files from AWS are necessary for the proper functioning of CSS, JavaScript, and image files.
I have conducted a series of Lighthouse Audits on my application. The Lighthouse Audit is a tool that is built into the Chrome DevTools. It is used to measure the performance, accessibility, best practices and SEO of a website.
Note
The Lighthouse Audit was conducted on the following pages: Screenshots of the Lighthouse Audit results can be found in the docs/testing/lighthouse directory.
- About us
- Cart
- Contact us
- FAQS
- Home
- Products
- Product Detail
- Profile
- Profile Delivery Information
- Profile Orders
- Privacy Policy
- Register
- Sign In
- Terms and Conditions
- Wishlist
During the development of the Elite Fitness website, I utilised User Story Testing. This approach placed emphasis on the end user's perspective, ensuring that the website's development and validation corresponded with practical, real-world requirements.
I categorised the user stories into three segments: • New Customers • Returning Customers • Site Administrators
This categorisation provides a comprehensive overview of each accomplished user story. Each story is presented with the following structure:
- The User Story: This describes the specific task or functionality from the perspective of the end user.
- Requirement Met: Here, I state whether the proposed functionality or attribute has been successfully implemented.
- Screenshot: Visual proof of the implemented attribute or functionality is provided through a screenshot.
This structure ensures a systematic and user-centred approach to our website development process.
I have conducted a series of automated tests on my application.
I fully acknowledge and understand that, in a real-world scenario, an extensive set of additional tests would be more comprehensive.
I have used Django's built-in unit testing framework to test the application functionality.
In order to run the tests, I ran the following command in the terminal each time:
python3 manage.py test name-of-app
To create the coverage report, I would then run the following commands:
coverage run --source=name-of-app manage.py test
coverage report
To see the HTML version of the reports, and find out whether some pieces of code were missing, I ran the following commands:
coverage html
python3 -m http.server
Important
Unit Test Issues Apart from the previously mentioned Django tests, I have formulated a series of unit tests for diverse applications. Unfortunately, due to project-imposed time constraints, I was unable to generate unit tests for all applications.
To the best of my knowledge, there are no bugs present in my application.