Shop K-Beauty Testing Results

Automated Testing and Validation

HTML Validation

I used W3C Markup Validation Service to validate all the HTML files by direct input:

Page	Result	Validation Details & Screenshots
'templates/home/index.html'	0 error and 0 warning	Homepage
'templates/products/products.html'	0 error and 0 warning	Products Page - New
'templates/products/add_product.html'	0 error and 0 warning	Add a Product Page
'templates/products/edit_product.html'	0 error and 0 warning	Edit a Product Page
'templates/products/product_detail.html'	0 error and 0 warning	Product Detail Page
'templates/products/brands.html'	0 error and 0 warning	Brands Page
'templates/products/brand_detail.html'	0 error and 0 warning	Brand Detail Page
'templates/products/add_brand.html'	0 error and 0 warning	Add Brand Page
'templates/products/edit_brand.html'	0 error and 0 warning	Edit Brand Page
'templates/reviews/add_review.html'	0 error and 0 warning	Add Review Page
'templates/reviews/edit_review.html'	0 error and 0 warning	Edit Review Page
'templates/reviews/review_detail.html'	0 error and 0 warning	Review Detail Page
'templates/reviews/reviews.html'	0 error and 0 warning	Reviews Page
'templates/bag/bag.html'	0 error and 0 warning	Bag Page
'templates/checkout/checkout.html'	0 error and 0 warning	Checkout Page
'templates/checkout/checkout_success.html'	0 error and 0 warning	Checkout Success Page
'templates/allauth/account/login.html'	0 error and 0 warning	Log In Page
'templates/allauth/account/signup.html'	0 error and 0 warning	Sign Up Page
'templates/profiles/profile.html'	0 error and 0 warning	Profile Page
'templates/home/privacy_policy.html'	0 error and 0 warning	Privacy Policy Page
'templates/home/terms_and_conditions.html'	0 error and 0 warning	Terms & Conditions Page
'templates/home/return_and_refund_policy.html'	0 error and 0 warning	Return & Refund Policy Page
'templates/home/shipping_policy.html'	0 error and 0 warning	Shipping Policy Page
'templates/home/skincare_tips.html'	0 error and 0 warning	Skincare Tips Page
'templates/wishlist/wishlist.html'	0 error and 0 warning	Wishlist Page
404 page	0 error and 0 warning	404 page

CSS Validation

I used W3C CSS Validation Service to validate all CSS files by direct input.

File	Result	Test Details & Screenshots
checkout/static/checkout/css/checkout.css	Pass	checkout.css
profiles/static/profiles/css/profiles.css	Pass	profile.css
reviews/static/reviews/css/reviews.css	Pass	reviews.css
static/css/base.css	Pass	base.css

JavaScript Validation

I used JSHint to validate all JavaScript and JQuery files

Page	Result	Test Details & Screenshots
bag/templates/bag/includes/scroll_to_top_script.html	0 errors, 0 warnings	scrollToTop script
bag/templates/bag/includes/quantity_update_remove_script.html	0 errors, 0 warnings	updateQuantity and removeItem and reload script
home/templates/home/includes/show_hide_brands_list_script.html	0 errors, 0 warnings	show and hide list of brands on click script
home/templates/home/includes/pass_data_from_backend_to_js_script.html	0 errors, 0 warnings	safely passing data from backend to JavaScript script
home/templates/home/includes/pass_data_from_backend_to_js_script.html	0 errors, 0 warnings	JQuery for the sort selector box
products/templates/products/includes/quantity_input_script.html	0 errors, 7 warnings	Quantity Input Script
profiles/static/profiles/js/countryfield.js	0 errors, 0 warnings	countryfield script
products/templates/products/includes/new_image_widget_script.html	0 errors, 0 warnings	new image widget script

Python Validation

At the project inception, I installed PyCodeStyle in my IDE and throughout the development, I was using it to test and fix the errors as they appear. I also used Code Institute's Python Linter to lint my Python code.

File	Result	Validation Details & Screenshots
custom_storages.py	All clear, no errors found	custom_storages.py
SHOP_KBEAUTY
shop_kbeauty/settings.py	All clear, no errors found	settings.py validation
shop_kbeauty/urls.py	All clear, no errors found	urls.py validation
shop_kbeauty/wsgi.py	All clear, no errors found	wsgi.py validation
BAG APP
bag/templatestags/bag_tools.py	All clear, no errors found	bag_tools.py validation
bag/apps.py	All clear, no errors found	apps.py validation
bag/contexts.py	All clear, no errors found	contexts.py validation
bag/urls.py	All clear, no errors found	urls.py validation
bag/views.py	All clear, no errors found	views.py validation
bag/tests/test_views.py	All clear, no errors found	bag/tests/test_views.py validation
CHECKOUT APP
checkout/admin.py	All clear, no errors found	admin.py validation
checkout/apps.py	All clear, no errors found	apps.py validation
checkout/forms.py	All clear, no errors found	forms.py validation
checkout/models.py	All clear, no errors found	models.py validation
checkout/signals.py	All clear, no errors found	signals.py validation
checkout/urls.py	All clear, no errors found	urls.py validation
checkout/views.py	All clear, no errors found	views.py validation
checkout/webhook_handler.py	All clear, no errors found	webhook_handler.py validation
checkout/webhooks.py	All clear, no errors found	webhooks.py validation
checkout/tests/test_forms.py	All clear, no errors found	test_forms.py validation
checkout/tests/test_models.py	All clear, no errors found	test_models.py validation
checkout/tests/test_views.py	All clear, no errors found	test_views.py validation
HOME APP
home/apps.py	All clear, no errors found	apps.py validation
home/urls.py	All clear, no errors found	urls.py validation
home/views.py	All clear, no errors found	views.py validation
home/tests/test_views.py	All clear, no errors found	test_views.py validation
PRODUCTS APP
products/admin.py	All clear, no errors found	admin.py validation
products/apps.py	All clear, no errors found	apps.py validation
products/forms.py	All clear, no errors found	forms.py validation
products/models.py	All clear, no errors found	models.py validation
products/urls.py	All clear, no errors found	urls.py validation
products/views.py	All clear, no errors found	views.py validation
products/widgets.py	All clear, no errors found	widgets.py validation
products/tests/test_forms.py	All clear, no errors found	test_forms.py validation
products/tests/test_models.py	All clear, no errors found	test_models.py validation
products/tests/test_views.py	All clear, no errors found	test_views.py validation
PROFILES APP
profiles/apps.py	All clear, no errors found	apps.py validation
profiles/forms.py	All clear, no errors found	forms.py validation
profiles/models.py	All clear, no errors found	models.py validation
profiles/urls.py	All clear, no errors found	urls.py validation
profiles/views.py	All clear, no errors found	views.py validation
profiles/tests/test_views.py	All clear, no errors found	test_views.py validation
REVIEWS APP
reviews/admin.py	All clear, no errors found	admin.py validation
reviews/apps.py	All clear, no errors found	apps.py validation
reviews/forms.py	All clear, no errors found	forms.py validation
reviews/models.py	All clear, no errors found	models.py validation
reviews/urls.py	All clear, no errors found	urls.py validation
reviews/views.py	All clear, no errors found	views.py validation
reviews/tests/test_models.py	All clear, no errors found	test_models.py validation
reviews/tests/test_views.py	All clear, no errors found	test_views.py validation
WISHLIST APP
wishlist/admin.py	All clear, no errors found	admin.py validation
wishlist/apps.py	All clear, no errors found	apps.py validation
wishlist/models.py	All clear, no errors found	models.py validation
wishlist/urls.py	All clear, no errors found	urls.py validation
wishlist/views.py	All clear, no errors found	views.py validation
wishlist/tests/test_views.py	All clear, no errors found	test_views.py validation

Lighthouse Report

Chrome DevTools' Lighthouse was used to test the performance, accessibility, best practices and SEO of the site

Desktop

Page	Performance (%)	Accessibility (%)	Best Practices (%)	SEO (%)	If score is below 90%
'index.html'	98	97	100	100	Scores are above 90% on average
'products.html' - Before multiple testing for possible solutions	57	97	100	100	Extensive efforts were done to improve the Performance score for desktop by converting all images from png to next-gen webp and moving the Google font link from base.html to base.css. Shop K-Beauty currently has 100 products being rendered on this page. The opportunities suggested by Lighthouse to potentially improve the score point to reduce initial server response time and serve static assets with an efficient cache policy all point to third-party libraries and services. As a student project, I am only using Heroku's free dynos with ElephantSQL's free Postgres database and Amazon's free tier S3 to host the media and static files. Reading up on how to improve the performance of the application, Heroku suggests using production-suitable Dynos and Postgres DB, but these are not free. Meanwhile, Amazon S3's cache control is not working, despite using the same source code from the Boutique Ado walkthrough. Further development time is required to investigate Amazon's File Cache and/or Amazon CloudFront. Meanwhile, when I validated the same product page but filtered to show only all specials, the results improved from Performance: 57% to Performance: 80%!.
'products.html' - After aspect ratio corrections and reducing DOM size testings	56	97	100	100	In an effort to improve the Performance score, I cut in half the image width and size, ie, from original 250px by 300px (aspect ratio of 5:6), I reduced both width and height to 125px by 150px. This did not help increase the score. I also attempted to fix the excessive DOM size by minimizing child elements from: `<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 mx-3 mb-5">` to: `div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 my-3">` . This effort did not make a dent in achieving the objective of improving the Performance score for desktop version of the products page. I since reverted these changes to the styling, as a personal preference to show more columns of products in a row for larger screens. The opportunities and diagnostics again referred to third-party libraries as potential source for improvement.
'product_detail.html'	95	98	100	100	Scores are above 90% on average
'bag.html'	95	98	100	100	Scores are above 90% on average
'checkout.html'	88	94	100	100	Aside from the opportunities identified by Lighthouse to optimise the checkout page performance, the desktop score may be futher improved by adding an explicit width and height for the image elements. After numerous testing on how best to achieve this, I deemed it best left for now as numerous attempts to fix this resulted in distorted display of an image as it seems to conflict with Bootstrap4's `w-100` attribute, unless I add width and height sizing for every single possible media query. This should be looked into though in the next sprint.
'checkout_success.html'	94	97	100	100	Scores are above 90% on average
'brands.html'	92	98	100	100	Scores are above 90% on average
'brand_detail.html'	94	97	100	100	Scores are above 90% on average
'wishlist.html'	96	100	92	90	Scores are above 90% on average

Mobile

Page	Performance (%)	Accessibility (%)	Best Practices (%)	SEO (%)	If score is below 90%
'index.html'	79	93	92	98	Extensive efforts were done to improve the Performance score for mobile by converting all images that appear on the index page (incl the largest contentful paint - hero image) from png to webp and setting explicit height and width to them. The opportunities to increase the score suggested by Lighthouse such as eliminating render-blocking resources and reduce unused JS point to third-party libraries: Bootstrap, JQuery and Stripe.
'products.html'	49	97	100	99	Unfortunately, the the image resize and the multiple testing to reduce excessive DIM size (see desktop for products page) did not improve performance on mobile version. The opportunities suggested by Lighthouse include reduce initial server response time, use HTTP/2, eliminate render blocking resources (stripe (biggest render blocking resource), bootstrap, base.css-amazonaws, fontawesome, jquery and popper. These are third-party libraries and resources and are needed to make the site work. The diagnostics suggested to serve static assets with an efficient cache policy and to avoid an excessive DOM size. As mentioned earlier, Amazon S3's cache control is not working, despite using the same source code from the Boutique Ado walkthrough. Further development time is required to investigate Amazon's File Cache and/or Amazon CloudFront. Meanwhile, for the next sprint, reducing the excessive DOM size should be a priority.
'product_detail.html'	76	98	100	97	Per the Opportunities and Diagnostics from Lighthouse, the main cause of the low Performance score are again like the ones discussed above.
'bag.html'	80	97	100	94	Same as above, the Performance score is affected by third-party libraries and resources, as evidenced by this screenshot.
'checkout.html'	75	94	100	97	Aside from the opportunities identified by Lighthouse to optimise the checkout page performance, the mobile score may be futher improved by adding an explicit width and height for the image elements. After numerous testing on how best to achieve this, I deemed it best left for now as numerous attempts to fix this resulted in distorted display of an image as it seems to conflict with Bootstrap4's w-100 attribute, unless I add width and height sizing for every single possible media query. This should be looked into though in the next sprint.
'checkout_success.html'	73	97	100	93	This is a page with no image being rendered, that had plagued me previously in other pages and that had been fixed, as much as possible. But again, the mobile Performance score – as evidenced by the opportunities and diagnostics – is affected by third-party libraries and resources, which are required for the site's applications to work.
'brands.html'	82	97	83	98	Opportunity to fix two brand logo images with incorrect aspect ratios
'brand_detail.html'	75	97	92	98	Similar to other pages, the site suffers in Performance score due to issues with third-party resources and libraries.
'wishlist.html'	78	100	92	86	Similar to other pages, the site suffers in Performance score due to issues with third party resources and libraries

WAVE Web Accessibility Evaluation Tool

WAVE was used to ensure that Shop K-Beauty's content is also accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, which are then corrected following the results of the initial evaluation.

In order to fully validate the page, I used the WAVE Chrome extension. This enabled me to test the pages that require user authentication.

Page	WAVE This Page Result	Reasons for not fixing the contrast errors, if any
Bag Page	no errors
Checkout Page	no errors, 2 contrast errors	Both of the contrast errors point to the placeholder text for country but as it is a default Stripe styling, I decided to leave it alone as the placeholder text for other fields in the form uses the same font color from this class: `.stripe-style-input::placeholder { color: #aab7c4 }` and they all passed the contrast validation.
Checkout Success Page	no errors
Products Page	no errors
Product Detail Page	no errors
Add a Product Page	no errors
Edit a Product Page	no errors
Brands Page	no errors
Brand Detail Page	no errors
Add a Brand Page	no errors
Edit a Brand Page	no errors
Profiles Page	no errors, 1 contrast error	This is the same contrast error as in the Checkout Page.
Reviews Page	no errors
Add a Review Page	no errors
Edit a Review Page	no errors
Review Detail Page	no errors
Wishlist Page	no errors
K-Beauty Tips Page	no errors
Privacy Policy Page	no errors
Terms & Conditions Page	no errors
Return & Refund Policy Page	no errors
Shipping Policy Page	no errors
404 Error Page	no errors

Django Automated Testing

For the automated testing, the writing and running of these tests used Django's built in test module. For each installed application, I created a folder called tests, added the __init__.py file and the separate files for testing the views, models and forms.

I also used coverage to generate the report and find out the percentage of statements that I was able to cover and those that I missed for every installed application. I tried to achieve as close to the 100% mark as I possibly can, but I am still fairly new to using Automated Testing and am looking forward to learning more to reach this goal.

Coverage

Installed App Coverage Report	Cover in Percentage	Screenshot of Coverage Report
bag app	77%	bag app cover
checkout app	61%	checkout app cover
home app	100%	home app cover
products app	81%	product app cover
profiles app	97%	profile app cover
reviews app	83%	reviews app cover
wishlist app	74%	wishlist app cover

Manual Testing

Testing User Stories

User Stories

User Story #	As a/an	I want to be able to...	So that I can...	How was this achieved	Evidence
VIEWING & NAVIGATION
1	Shopper	Navigate around the site	View a list of products	The navbar's main navigation component allows the shoppers to browse for products. The all products link from the main navigation enables the visitors to view the list of all the products available on the site.	desktop, tablet, mobile
2	Shopper	View a specific category of products	Quickly find products I'm interested in without having to search through all products.	The site's main navigation component allows the shoppers to browse for specific category of products.	desktop, tablet, mobile
3	Shopper	Quickly identify deals, clearance items and special offers	Take advantage of special savings on products I'd like to purchase	The users can quickly find all available deals from the main navigation where they can click on special offers and a dropdown of items lists all the new arrivals, the top deals, the clearance and an all special offers link.	desktop, tablet, mobile
4	Shopper	Quickly view how much was the original price	Identify how much I may be able to save when buying the product and may also help me compare prices with other sites	When discounts are available, the individual product cards display how much is the product price, the original product price (crossed out) and amount the shoppers can potentially save. From the products page, the shoppers are also able to sort through all the discounts available from high to low.	desktop, tablet , mobile,
5	Shopper	View individual product details	Identify the price, description, product reviews, product image, product ingredients and instructions how to use product	A shopper is taken to the product detail page after clicking on a product image or the shop now button from an individual product card. The product detail page displays the product information such as name, image, brand, category, subcategory, available reviews, price, original price and discount amount (if available), description, how to use and ingredients.	product details
6	Shopper	Easily view the total amount of products in my shopping bag at any time throughout my visit	Avoid spending too much	Whenever a product is added to the shopping bag, a toast will display confirming that the product was indeed added to the bag successfully and also shows how much a shopper needs to spend to reach the free delivery threshold (if not yet reached). Below the bag icon, the running total of the items currently in the bag is displayed and the user can navigate across the different pages on the site and still be able to view the current amount in the bag.
7	Shopper	Easily view the featured brands	To assure me that Shop K-Beauty really offers K-Beauty products from authentic K-Beauty brands	On the home page of the site, shoppers are able to view the 10 featured K-Beauty brands.	featured brands
8	Shopper	Search/ View all of the available K-Beauty brands	Look for my favourite brands	From the main navigation, the shoppers are able to click on BRANDS navlink and it will open the brands page where all available brands are listed with their logos in individual brand card.	all available brands
9	Shopper	Easily view details about the brand of a product I am purchasing	Learn more about the brands and feel confident about my purchase	Shoppers are provided multiple ways to access information about any K-Beauty brands available from the Shop. 1) From the brands page, shoppers are able to click on any brand logo and this will take them to the individual brand page. 2) From the product detail page, a shopper is able to view the brand name of the product. The brand name is clickable and will take the shopper to the brand's brand detail page. The brand detail page display's the brand logo and brief information about the brand.	link to brand detail page, brand detail page
10	Shopper	View a list of available products when viewing the details about a brand	Quickly decide what product to purchase from a particular brand	Continuing on from User Story 9, on the brand detail page, the shoppers are able to view the list of available products from any brand.	brand detail and available products
11	Shopper	Find skincare tips and information about K-Beauty skincare routine	Decide which products I need to purchase	From the K-Beauty tips page, shoppers are able to learn more about K-Beauty and get tips and information about K-Beauty skincare routine to help them decide which products they may need to purchase, depending on their skincare goals.	skincare tips page
12	Shopper	Easily navigate from a product category to the corresponding subcategories	Easily find the products I am looking for	The main navigation dropdown provide links to all the categories of products as well as the links to their individual subcategories. The individual product cards from the products page also contain the category and subcategory tags, both of which are also clickable. When a category link is clicked, it opens the products page where all the available products are filtered by that specific category.
13	Shopper	View Related products	Make a more informed decision before finalising my purchase	Shoppers are provided four or less related products based on the product's subcategory. The related products are displayed randomly if there's more than four of them and a page refresh changes the display of related products (if more than four are available).	related products
REGISTRATION & USER ACCOUNTS
14	Shopper	Easily register for an account	Have a personal account and be able to view my profile	Shoppers are easily able to create an account via the site's top navigation which has the My Account icon. This icon has two dropdown links, the first of which is the Sign Up. Clicking the Sign Up link opens the site's sign up page where they can then register to create an account. Alternatively, shoppers who do not yet have an account with the site can also create an account from a link at the checkout page.	sign up, register an account, create an account link from checkout page
15	Shopper	Receive an email confirmation after registering	View that my personal account registration was successful	After registering for an account, a shopper will receive an email with a link to confirm their new account. After clicking the email confirmation link, the site opens to the login page where the shopper's username or email and password are already pre-populated and a toast displaying that the email has been confirmed.	email-confirmation, confirm email, login page after email is confirmed
16	Shopper	Easily login and logout of my shopper's account	Access my personal account information	Via the top navigation (My Account), users are able to easily login and logout of their shopper's account. Successful log in is confirmed by toast. Once logged in, the shoppers are able to access their personal information, again via the My Account dropdown that displays two options for the user, My Profile and Logout. The My Profile link opens up the logged in user's personal profile page where they can view and edit their default delivery information. The shopper's order history is also displayed, ready for the shopper to review via the order number link.	login via top navigation link, login toast, access profile from top nav, my profile page
17	Shopper	Easily recover my password in case I forget it	Recover access to my account	From the accounts/login page, registered shoppers have the option to click on the Forgot Password? link which takes them to the password reset page. Resetting the password comes in several process: 1) Enter the email address to receive a password reset email. 2) Open the password reset email that with the link that has the secure key added to take the user to the change password page. 3) Change the password. A successful password change is further confirmed by a toast message and the user can now login to their account with using their new password. Meanwhile, should a shopper enter an email that is not associated with any user account, the password reset page will display the error message.	forgot password link, password reset, after email is entered, password reset email, change password, password changed successfully, error message if email not in any user account
18	Shopper	Have a personalised user profile	View my personal order history and order confirmations	A logged in user, via their profile page, has access to their order history, arranged chronologically. The order confirmations are accessible from the Order Number links.	order history and order numbers,
SORTING & SEARCHING
19	Shopper	Sort the list of available products	Easily identify the best priced, best discounted products and categorically and subcategorically sorted products	Using the sort selector in the products page, users are able to sort all the available products by price, discount, category and subcategories.
20	Shopper	Sort a specific category of product	Find the best priced product in a specific category	From the main navigation, the users can select a specific category of products, for example eye care category. The users can also user the sort selector on the products page to sort a specific category (same example, eye care category). Using the same selector, the user can further sort the results to find the best priced product.	sample category: eye care, sample category: eye care, sorted by price
21	Shopper	Sort a specific subcategories of products	To easily identify the most suitable product for me to purchase	From the main navigation, the shoppers are able to select a specific subcategory. Also from the products page, the users are able to sort for subcategories of products.	main nav: select products by subcategory, use sort selector on products page to sort by subcategory
22	Shopper	Sort multiple categories of products simultaneously	Find the best priced products or discounts across broad categories, such as "skincare" or "hair & body"	From the main navigation, by selecting the All Skincare, All Hair & Body or All Special Offers links, the users are able to sort for multiple categories simultaneously. They can then find the best priced products or discounts by using the sort selector box.	products by multiple categories, multiple categories sorted by price (low to high)
23	Shopper	Search for a product or products by name, by description or by ingredients	Find a specific product I'd like to purchase	Per the placeholder text on the search bar, users can search for a product by name, description or by ingredients.	result of search by product name, result of search by description term, result of search by product ingredients
24	Shopper	Easily see what I've searched for and the number of results	Quickly decide whether the product I want is available	Using the examples for user story #23 above, when users search for a product by name, description or ingredients, the results also include the number of products found.	number of results - search by product name, number of results - search by description term, number of results - search by product ingredients
PURCHASING & CHECKOUT
25	Shopper	Quickly view how much was the original price and what savings, if any are available	Easily compare prices with other sites	With every product card, the original price and the savings are displayed, if discount is available.	original price and savings included in product card, if available
26	Shopper	Easily select the quantity for a product when purchasing it	Ensure I don't accidentally select the wrong product quantity	From the product detail page as well as from the shopping bag, shoppers are able to adjust the quantity of items prior to checking out. In both instances, users are also only able to increment or decrement the item quantity by a whole number.	product detail page: increment or decrement item quantity, shopping bag page: increment or decrement item quantity
27	Shopper	Easily view notifications on screen when I add a product to my bag	Find out immediately if my actions were correct or if the was an error	A toast message appears whenever a user adds a product to the shopping bag. An error notification also appears if a user increases the product quantity using a float number, as an example.	toast, error
28	Shopper	View items in my bag to be purchased	Identify the total cost of my purchase and all items I will receive	From the shopping bag page, shoppers are able to view the items they are planning to purchase including the cost per item, the bag total, the delivery fee (if they have not met the free delivery threshold) as well as the grand total.	items in the bag
29	Shopper	Adjust the quantity of individual items in my bag	Easily make changes to my purchase before checkout	From the bag page, shoppers are still able to adjust the quantity of the items in their shopping bag, including even removing the item. A toast will appear notifying the shopper whether an item quantity has been updated or if an item has been removed from the bag.	adjusting item quantity and removing item from bag
30	Shopper	Easily enter my payment information	Check out quickly and with no hassles	On the checkout page, shoppers are able to see the information they need to provide to check out quickly, including which information are required. These are their full name, email address, phone number, street address1, town or city and country. They can also see the payment information required such as their card number, month and year of card expiry and the CVC. Errors in logging in the wrong information such as a credit card already expired is dealt with by an error message displayed to the shopper.	checkout information, payment info error
31	Shopper	Feel my personal and payment information is safe and secure	Confidently provide the needed information to make a purchase	Shop K-Beauty's payments processing is powered by Stripe. Stripe is a suite of APIs powering online payment processing and commerce solutions for internet businesses of all sizes.	security at Stripe
32	Shopper	View an order confirmation after checkout	Verify that I haven't made any mistakes	After a successful checkout, shoppers are taken to an order confirmation page to thank them for their purchase. The page displays their order information, their order details, the delivery information and the billing info. A toast also appears notifying the shopper that the order has been successfully processed and that an email confirmation is on it's way.	checkout success with order receipt
33	Shopper	Receive an email confirmation after checking out	Keep the confirmation of what I've purchased for my records	Upon a successful checkout, a shopper will be sent an email order confirmation to the email address provided at the checkout.	email confirmation of order sent to shopper
PRODUCT REVIEWS
34	Shopper	View available reviews for a product I am viewing	Find out what others think of the product	If a product review is available, a shopper can easily view them by clicking on the See all reviews button. This takes them to the reviews page displaying all the available reviews for the specific product the shopper was viewing.	see all reviews button, available reviews for specific product
35	Shopper	Easily see how I can add my reviews on products I purchased	Decide whether I want to add my review	In every product detail page, there's an Add review button. If a featured review is available for that product, a Share your experience button also shows how a shopper may add a review. As a user needs to be logged in to add a review, clicking either of these buttons redirects the shopper to the log in page and a toast shows they need to be logged in to add a review.	add review button, share your experience button, add review redirect to log in page and toast error
36	Shopper	Easily view/ have access to details about the product I am reviewing	Refer to the information about the product, should I need to do so	When adding a review, details about the product name, image, product category and subcategory, price and original price and discounts (if available) are displayed alongside the review form. The shop now button also redirects the reviewer to the product detail page.	review form and product info
37	Shopper	Add my review of the product	Share my personal experience of using the products	The review form enables the logged in shopper to submit a product review.	review form
38	Store Owner	Add Featured Reviews on specific product detail page	Opt to highlight specific reviews	Store Owners are able to feature a product review using the Django admin backend by simply ticking the Is featured checkbox	feature a review
39	Store Owner	Edit submitted reviews	Opt to block off profanities, if any	A logged in store owner is able to edit a review to remove unwanted content, such as profanities.	edit review
40	Store Owner	Delete a review	Have control over unacceptable comments such as discriminatory statements, if any	A logged in store owner is able to also delete a review. To prevent unintended deletion, a modal pops up a warning that such action will delete the review forever if they continue. The option to cancel and delete buttons are also included in the modal.	delete review modal
ADMIN & STORE MANAGEMENT
41	Store Owner	Add a product	Add new items to my store	The logged in store owner is able to add a product to the store directly from the product management page. The product management page can be accessed by clicking the My Account icon in the top navigation component of the navbar. The icon displays several dropdown links, one of which is Product Management	product management: add a product
42	Store Owner	Edit/update a product	Change product process, descriptions, ingredients, images and other product criteria	The logged in store owner is able to edit a product directly in the store using the Edit Product button on the product detail page. This button is only displayed to authenticated store owner/ admins and links directly to the product management page. The product management page (edit a product) is exactly the same as the product management page (add a product). The product information is pre-populated. A toast also appears providing an alert that a specific product is being edited.	product management: edit a product
43	Store Owner	Delete a product	Remove items that are no longer for sale	The logged in store owner is able to delete a product directly in the store using the Delete Product button on the product detail page. This button is only displayed to authenticated store owner/ admins. To prevent unintended deletion, a modal pops up a warning that such action will delete the product forever if they continue. The option to cancel and delete buttons are also included in the modal.	delete product modal
44	Store Owner	Have policy pages (privacy, terms & conditions, return & refund and shipping) on the site	Be assured that all the legalities of doing business online are taken care of	The Privacy Policy, Terms & Conditions, Return & Refund Policy and the Shipping Policy pages can be accessed from their respective links in the footer.	policies
45	Store Owner	Receive a warning if I accidentally click the delete a product button	Avoid accidental deletion of a product	To prevent unintended deletion, a modal pops up a warning that such action will delete the product forever if they continue. The option to cancel and delete buttons are also included in the modal.	modal
46	Store Owner	Add a brand to my store	Add new products even if the product's brand is not in the store yet	The logged in store owner is able to add a brand to the store directly from the brand management page. The brand management page can be accessed by clicking the My Account icon in the top navigation component of the navbar. The icon displays several dropdown links, one of which is Brand Management	brand management: add a brand
47	Store Owner	Edit/ Update a brand in my store	Make changes to a brand name, description, brand logo or choose to feature a brand	The logged in store owner is able to edit a brand directly in the store using the Edit Brand button on the brand detail page. This button is only displayed to authenticated store owner/ admins and links directly to the brand management page. The brand management page (edit a brand) is exactly the same as the brand management page (add a brand). The brand information is pre-populated. A toast also appears providing an alert that a specific brand is being edited.	edit brand button, brand management: edit a brand
DIGITAL MARKETING
48	Store Owner	Have a social media presence	Create awareness of Shop K-Beauty products	From the footer section, on the Follow Us column, the links to social media sites such as Facebook, Instagram, Pinterest and Twitter are included. A Facebook page for Shop K-Beauty is also created as an example of having a social media presence.	follow us: links to social media pages; Shop K-Beauty Facebook page
USER'S WISHLIST
49	Shopper	Easily add a product to my wishlist	Save it for future purchase or reference	On a product detail page, the wishlist heart icon is to the right of a product's brand name and this is the button that enables the adding of the product to the shopper's wishlist. Clicking this icon either: i) redirects the shopper to the log in page with a toast informing them that they need to be logged in to add to their wishlist, or ii) if they are already logged in, a toast displays confirming that the product has been added to their wishlist. Meanwhile, on the top navigation component of the navbar, in between the My Account and Shopping bag navlinks, is the Wishlist navlink that also turns dark pink when a product is added to the wishlist. This wishlist navlink goes back to its original colour of black when a shopper navigates away from the product detail page but turns back to pink again if the shopper navigates to another product detail page that is already in the shopper's wishlist. If a product is already in the user's wishlist, clicking the wishlist icon again (on the product detail page) will display a toast alerting the shopper of that fact and prevents the duplication of the same product being added to the individual shopper's wishlist more than once.	add product to wishlist, toast to alert and prevent duplicate product in wishlist
50	Shopper	Easily remove a product from my wishlist	Keep only the products I'm interested in	Via the top navigation component of the navbar, authenticated shoppers can access their wishlist page. The logged in shopper can also access the wishlist page from their profile page via a wishlist button. The wishlist page displays the list of products including the product image, name, price, discount info (if available), a shop now icon (to take them to the product detail page) and a trash icon to enable them to remove the product from their wishlist. Clicking the trash icon removes the product from the shopper's wishlist, redirects them to the product detail page and a toast appears to alert them that the product has been removed from their wishlist.	wishlist page, wishlist removed toast and redirect

Full Testing

Full testing was conducted using the following physical devices:

Mobile:
- iPhone 14
- iPhone 11 Pro
- iPhone 6
Tablet
- iPad Pro
- iPad mini (4th gen)
- iPad 4
Laptop
- MacBook 2012
- Macbook 2014
- Alienware m17 r3
Desktop
- HP V27e FHD Monitor (27 inch)

Test Users from the User Research group, friends and family members carried out the additional testing after the initial deployment (alpha) and again after the errors and enhancements were carried out (beta).

Feature	Expected Outcome	Testing Performed	Result	Pass/ Fail
PRODUCT CATEGORIZATION
MainCategory	The two main categories, skincare and hair & body, were not navigable but are meant instead to be the parent categories. It is expected that the categorization works as expected, ie, no hair and body products can be found in the skincare line and vice versa	Scanned through each of the products to ensure they are categorised as expected.	Each of the 100 products examined are properly categorized under their respected category and main category.	Pass
Category	It is expected that the skincare main category will have eight categories and the hair & body will have seven categories and the corresponding links are clickable and takes the user to the expected link.	Clicked on the total 15 categories to manually check that links lead to expected products filtered by the category clicked and tested.	The filtered products results are correct.	Pass
Subcategory	It is expected that there will be four subcategories for face care category; three for facial cleanser; three for face masks; three for eye care; and, one for lip care. It is also expected that there will be two subcategories for hair care; four for body care; one for hand care; and, two for foot care. It is also expected that the links are clickable and the results of products displayed are filtered by the clicked subcategory.	Clicked on each subcategory to manually check that the links lead to expected results.	The filtered products results are correct.	Pass
SKU ARCHITECTURE
SKU format	Each product SKU must have the correct SKU format of: [3 letters for Brand Name]-[2 letters for main category]-[2 or 3 letters of category initials]-[3 letters for subcategory]-[4 digit product variation number]	Checked the individual product's SKU record on Django admin	each product SKU follows the expected SKU architecture	Pass
DEFENSIVE PROGRAMMING
Access authorized personnel only pages	As a logged in, non-personnel shopper, attempting to add a brand using the add a brand url will fail and redirect the shopper back to the home page and a toast error will inform that only authorized personnel can do that.	Manually pasted the add brand url to the address bar	The logged in shopper was redirected to the home page and the toast error appeared informing the shopper of the error.	Pass
Delete a product	Modal to pop up to confirm the intent of deleting a product	Clicked the delete product buttons on the products page and on the product detail page	Modal appeared as expected and prevented unintended deletion of a product	Pass
Delete a review	Modal to pop up to confirm the intent of deleting a review	Clicked the delete review button on the reviews page	Modal appeared as expected and prevented unintended deletion of a review	Pass
NAVBAR
Logo	Link to home page	Clicked the logo from other pages on the site	Logo links back to home page	Pass
Search bar	Searching for a product name, brand name and product description will display the results of available product(s) filtered by the search term used. The number of products found for the search term will be shown on the left corner of the products page (desktop and tablet) and underneath the sort selector box on mobiles.	Used three separate search terms: mizon for brand, artichoke for product, and centella asiatica for ingredients.	On three separate searches, the products page loaded with the search results: mizon yielded five products, centella yielded one, and centella asiatica yielded 31 products	Pass
	Searching with no search term used will display a toast error to let the user know that they didn't enter any search criteria	Clicked the search icon with no search term	The toast error displayed	Pass
My Account icon	Dropdown will display Sign Up and Login if users are not authenticated	Clicked the My Account icon when not logged in	Sign Up and Login are the dropdown links displayed	Pass
	Dropdown will display My Profile and Logout if the logged in user is not an superadmin	Clicked the My Account icon as a standard user	My Profile and Logout links are the dropdown links displayed	Pass
	Dropdown will display Brand Management, Product Management, My Profile and Logout if the logged in user is a superadmin	Clicked the My Account icon as a superadmin	Brand Management, Product Management, My Profile and Logout links are the dropdown links displayed	Pass
	Each of the links relevant to the logged in user based on their permission level will take the user to the expected pages, ie, the my profile link will take the user to the my profile page; the brand management link will take the superadmin user to the brand management page	Clicked on each dropdown link as a standard user and also as a superadmin	Each link takes the user to the correct page	Pass
	Logout link will take me to the sign out page	Clicked on the logout link	Link took me to the sign out page	Pass
Wishlist icon	The wishlist icon is only visible to authenticated users. The wishlist icon is displayed next to the My Account icon.	Logged in and logged out to test that the wishlist icon is only available when a user is logged in	The wishlist icon is displayed only when a user is logged in	Pass
	Wishlist icon links to the authenticated user's wishlist page	Clicked on the Wishlist icon on the top navbar	Links to the logged in user's wishlist page	Pass
	Wishlist icon changes color from black to dark pink when a user clicks on the link and the user has products saved on their wishlist. The number of products on their wishlist is also displayed next to the text wishlist, eg Wishlist(2).	Clicked on the Wishlist icon on the top navbar	The icon changed color and the number of products in my wishlist page is displayed	Pass
Bag icon	The bag is displayed to all users, irrespective of whether they are logged in or not	Logged in and logged out of my user account	Bag is displayed in both instances	Pass
	When a product is added to the shopping bag, the bag changes colour to dark pink andthe grand total amount is displaye below the bag icon	Added products to the bag	The bag changed colour and the grand total is also displayed below the bag icon	Pass
	When a bag is empty, the bag icon is black and the grand total amount is £0.00	Emptied the bag	Bag icon changed it's colour to black and the grand total amount displayed is £0.00	Pass
	The grand total amount in the bag is always visible from anywhere on the site for the duration of the user's visit	Navigated around the site to check if the grand total is always visible	Bag grand total is always visible for the duration of my visit	Pass
	Links to the shopping bag page and the page will display the items in the bag or empty if bag is empty	Clicked on the bag icon link when bag has items in it and when it is empty	Opened the shopping bag page and displayed the content when bag was not empty/ displayed text Your bag is empty when empty	Pass
Main Navigation dropdown menu links	Every link in the main navigation will take me to the correct pages	Clicked each link	Every link took me to the correct page	Pass
Responsiveness	The main navigation should be replaced by the Menu button, the logo should replaced by the mobile logo, the search bar should only be displayed as a dropdown when the search icon is clicked, the top navigation icons (My Account, Wishlist (if logged in) and Bag) should be on the right side of the logo on tablets and below both the menu button and logo on mobile devices.	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The navbar is fully responsive down to 320 width	Pass
DELIVERY BANNER
Delivery banner	The delivery banner should be responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The delivery banner is fully responsive from 320 width	Pass
FOOTER
Shop K-Beauty logo	The Shop's logo on the footer should take users to the home page when clicked from any page on the site	Clicked the logo on the footer from the product detail page	Taken to the home page	Pass
Policies column	Each link on the policies column should take users to the relevant policy page	Clicked each link	Taken to the correct policy page	Pass
Follow Us column	Each link on the follow us column should take users to the relevant social media site on a new browser tab. The facebook link should open to the Shop K-Beauty facebook page on a new browser	Clicked each link	Taken to the correct social media site opened on a new browser tab and the facebook link opened the Shop K-Beauty facebook page on a new browser	Pass
Joy Zadan link	Should open my GitHub profile on a new browser tab	Clicked the link	Taken to my GitHub profile on a new browser tab	Pass
Responsiveness	Footer content should stack on top of each other on mobile device and be fully responsive to 320 width	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The footer is fully responsive down to 320 width	Pass
HOME PAGE
Hero Section Shop Now CTA	Users should be taken to the products page with the products filtered out to display new arrivals only	Click on the Shop Now CTA	Taken to the products page and products are filtered displaying the new arrivals only	Pass
Featured Products	15 featured products should be displayed in their individual product cards, each card has a smooth transition on hover and each image should take users to the relevant product detail page and the shop now button also does the same when clicked	Counted all 15 product cards, hovered over the product card and clicked both product image and shop now button	There are 15 featured products, the card transition is smooth when hovered over and both the product image and the shop now button take the user to the relevant product detail page	Pass
Featured Brands	10 featured brands in their own individual brand card, each brand card has a subtle transition on hover, and each brand logo takes the users to the relevant brand detail page	Counted all 10 featured brands, hovered over each brand card displaying the logo and clicked on the brand card to be taken to the relevant brand detail page	There are 10 featured brands in their individual brand card, each card has a subtle transition on hover and taken to respective brand detail page when clicked	Pass
See All Brands button	Display all available brands' names when clicked and there should be 30 individual brand	Clicked and counted all brands	The button opened and displayed all 30 brands	Pass
	Each available brand name should change colour from purple to dark pink on hover and click and takes users to the relevant brand detail page	Clicked on each brand, the brand name changed colour on hover and taken to the relevant brand detail page	Pass
Responsiveness	The home page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The home page is fully responsive down to 320 width	Pass
PRODUCTS PAGE
Sort Selector	All available products (100) are sorted based on option chosen by the user	Clicked on available options to test that the products are sorted based on the option chosen	Products are sorted based on the option chosen	Pass
Product image	Clicking the image will take users to the relevant product detail page	Clicked on the product image	The relevant product detail page opened	Pass
Product category link	Clicking the category link on any product card will filter the products to display only those available for that category, the category badge (dark pink) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Clicked on face mask category	The products are filtered to only the face mask category, the category badge is displayed and the product count showed there are seven products available	Pass
Product subcategory tag	Clicking the subcategory tag on any product card will filter the products to display only those available for that subcategory, the subcategory badge (purple) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Clicked on exfoliator, peeling & scrub subcategory	The products are filtered to only the peeling & scrub subcategory, the subcategory badge is displayed and the product count showed there are two products available	Pass
Shop Now button	Clicking the button will take users to the relevant product detail page	Clicked on a shop now button	The relevant product detail page opened	Pass
Responsiveness	The products page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The products page is fully responsive down to 320 width	Pass
PRODUCT DETAIL PAGE
Product image	Clicking on a product image will open a new browser tab and display the image	Clicked on the product image	A new browser tab opened and displayed the product image	Pass
See All Reviews button	This button is displayed only when a product has review and takes the users to the reviews page for that product	Opened the Illiyoob Ceramide Ato Body Lotion product detail page and checked that the See All Reviews button is displayed and takes users to the reviews page for the product	Pass
	This button is not displayed when a product has no review	Opened the Iunik Tea Tree Relief Serum (50 ml) product detail page and checked that the See All Reviews button is not displayed	Button is not displayed	Pass
Add Review button	This button redirects user to the log in page when clicked and user is not logged in. A toast error also informs the users that they need to be logged in to add a review	Clicked the button as an unauthenticated user	Redirected to the log in page and the toast error displayed that the user must be logged in to add a review	Pass
	This button opens the add review page for the product when user is logged in	Clicked the button as an authenticated user	Taken to the add review page	Pass
Product brand name	Should take users to the brand detail page when clicked	Clicked the brand name	Taken to the brand detail page	Pass
Wishlist heart icon	This icon redirects user to the log in page when clicked and user is not logged in. A toast error also informs the users that they need to be logged in to add their wishlist	Clicked the button as an unauthenticated user	Redirected to the log in page and the toast error displayed that the user must be logged in to add their wishlist	Pass
	This icon adds the product to the logged in user's wishlist when clicked. A toast success informs the user that the product has been added to their wishlist	Clicked the icon as an authenticated user	Product is added to the wishlist and the toast success confirms that product has been added	Pass
	This icon prevents the user from adding the product to their wishlist if product is already in the list. A toast alert will inform the user that product is already in their wishlist	Opened the product detail page of the product already in the wishlist and clicked on the icon as an authenticated user	Toast alert displayed that product is already in the wishlist and product is also not added to wishlist	Pass
Product category link	Clicking the category link on a product detail page will filter the products to display only those available for that category, the category badge (dark pink) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Opened the Mizon Snail Repair Eye Cream product detail page and clicked on eye care category	The products are filtered to only the eye care category, the category badge is displayed and the product count showed there are five products available	Pass
Product subcategory tag	Clicking the subcategory tag on a product detail page will filter the products to display only those available for that subcategory, the subcategory badge (purple) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Opened the Mizon Snail Repair Eye Cream product detail page and clicked on the eye cream subcategory	The products are filtered to only the eye care subcategory, the subcategory badge is displayed and the product count showed there are five products available	Pass
Quantity input field	The product quantity to be added to the bag cannot exceed the maximum value set to 99. If a user manually inputs a number higher than this maximum value, a tooltip will appear to inform them that the value must be less than or equal to 99	Manually entered 100 in the quantity input field	Tooltip appeared informing me that the value must be less than or equal to 99	Pass
	The quantity input value must be a positive integer (but no more than 99) in order to be valid. If a user manually enters a value that is not valid and clicks the add to bag button, a tooltip will display a message informing the user to enter a valid value and that the nearest valid values are the two positive integers nearest to the float	Manually entered 1.5 in the input field and clicked the add to bag button	A tooltip appared with the expected message	Pass
Quantity decrement button	This button is disabled if quantity of item displayed is equal to 1	Clicked the decrement button to decrease the item quantity to zero	Button is disabled	Pass
Quantity increment button	This button allows the users to increase quantity of items and is disabled if item quantity exceeds 99	Clicked the increment button and manually input 98 and attempted to increase quantity to 99	Item quantity increased and button is disabled when the quantity reached 99	Pass
Keep Shopping button	Takes the user to the products page	Clicked the button	Opened the products page	Pass
Add to Bag button	Adds the product to the bag if quantity input is valid and a toast success will inform that the shopper that the product is added to the bag together with the product info and how much they need to spend to get free delivery if the delivery threshold is not met and the view your shopping bag button	Clicked the button to add two quantities of the Axis-Y Spot the Difference Blemish Treatment product	Product is added to the bag and a toast success message appeared with the expected content	Pass
Accordion	Each of the three sections toggles when clicked and displays the relevant content	Clicked on the description, how to use and ingredients sections of the accordion	Each section opens when clicked and closes when clicked again and displays the relevant content as expected	Pass
Featured Reviews	Only those reviewed chosen to be featured are displayed	Checked that of the six reviews available for Esfolio Avocado Body Lotion, only three are featured	Only the three featured reviews are displayed	Pass
Featured Reviews Share Your Experience button	Each featured review has a call to action button and opens the add review page when an authenticated user clicks on it or redirects to log in page if user is not logged in with toast error message that a user needs to be logged in to add a review	Clicked on the button as an authenticated user and as an unauthenticated user	As a logged in user, the button opened the add review page and as an unathenticated user, the button redirected to the login page and the expected toast message is displayed	Pass
Related Products	If related products are not available, a message that no related products are available will appear in place of the related products	Opened the TonyMoly Shiny Foot Super Peeling Liquid - Peeling Foot Mask product detail page	The message no related products available is displayed in place of related products	Pass
	Four or less related products using the subcategory filter for the particular product are displayed	Opened the Iunik Noni Light Oil Serum product detail page to check if four or less related products will appear. This product is in the essence & serum subcategory and there are 19 products available	Four related products are displayed	Pass
	If there are more than four related products, these should be displayed to the users at random order	Opened the Iunik Noni Light Oil Serum product detail page to check if the four or less related products will change at random after page refresh	The four related products displayed changed at random after a page refresh	Pass
	The category links, subcategory tags and the shop now button should take users to the correct pages	Clicked on the links, tags and buttons	The correct pages are displayed the users	Pass
Responsiveness	The product detail page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The product detail page is fully responsive down to 320 width	Pass
BRANDS PAGE
Brand cards	The logos of all available brands (30) in the shop should be displayed in their individual brand card and when clicked, should take the users to the correct brand detail page	Counted the available brands (30) and each of the brand logo are displayed in their respective cards and clicked on each of the logos	There are 30 brand logos displayed and each card when clicked opened the correct brand detail page	Pass
View All Products button	The button should take the user to the products page	Clicked the button	Taken to the products page	Pass
Responsiveness	The brands page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The brands page is fully responsive down to 320 width	Pass
BRAND DETAIL PAGE
Brand logo	The brand's logo should display on the centre of the page below the heading and when clicked, will open a new browser tab with brand logo displayed	Visually checked the logo is displayed, clicked the logo	The logo is displayed and when clicked, opened a new browser tab with the logo displayed	Pass
Brand name	The brand's name is displayed on the centre of the page below the brand logo	Visually checked that the correct brand name is displayed on the page	The correct brand name is displayed	Pass
Brand description	The correct brand description is displayed on the page	Visually checked it is the correct description for the current brand	The brand description is correct	Pass
Available products from respective brand	Only products of the current brand should be displayed to the user	Opened the Laneige brand detail page and checked if the products displayed are only those from Laneige	The products displayed are only from the brand Laneige	Pass
	If a product is not available from the current brand, a message should be displayed in place of the available products. The message should say there are no products available for (newly added brand's name) at the moment and for the user to come back soon to check as new products are added as soon as they become available	Temporarily added a new brand	The newly added brand page displayed the message in place of available products	Pass
Individual product card	Available products from the brand should be in their individual product card displaying the product image, name, category link, subcategory tag and price, original price and discount (if available) and a shop now button	Visually expected that all content are displayed as expected	All content are displayed as expected	Pass
Product Image and Keep Shopping button	Clicking on either should take the users to the current product's product detail page	Clicked on the image and also the buttton	Both opened the correct product detail page	Pass
Keep Shopping button	Takes the user to the products page	Clicked the button	Opened the products page	Pass
Responsiveness	The brand detail page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The brand detail page is fully responsive down to 320 width	Pass
K-BEAUTY TIPS PAGE
page content source links	Each of the tips page content source links should link to the correct site opened in a new browser	Clicked on each of the four links	The correct sites opened in new browsers	Pass
Keep Shopping button	Takes the user to the products page	Clicked the button	Opened the products page	Pass
Responsiveness	The K-Beauty Tips page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The K-Beauty Tips page is fully responsive down to 320 width	Pass
BAG PAGE
Keep Shopping button in empty bag	Below the your bag is empty text, the button should take users to the product page	Clicked the button	Taken to the products page	Pass
Quantity input field	The quantity input field in the bag page must function exactly the way it does on the product detail page, ie, the product quantity cannot exceed the maximum value set to 99. If a user manually inputs a number higher than this maximum value and clicks the update link, a tooltip will appear to inform them that the value must be less than or equal to 99	Manually entered 100 in the quantity input field	Tooltip appeared informing me that the value must be less than or equal to 99	Pass
	The quantity input value must be a positive integer (but no more than 99) in order to be valid. If a user manually enters a value that is not valid and clicks the update link, a tooltip will display a message informing the user to enter a valid value and that the nearest valid values are the two positive integers nearest to the float	Manually entered 1.5 in the input field and clicked the update link	A tooltip appared with the expected message	Pass
Quantity decrement button	This button is disabled if quantity of item displayed is equal to 0 and clicking the update button will display a tooltip that the value must be greater than or equal to 1	Clicked the decrement button to decrease the item quantity to zero and pressed the update button	Tooltip appeared with the expected message	Pass
Quantity increment button	This button allows the users to increase quantity of items and is disabled if item quantity exceeds 99	Manually entered 99 and attempted to increase quantity to 100 by pressing the plus button	Button is disabled when the quantity input field has a value of 99	Pass
	Users manually entering a value greater than 99 and clicking the update button a tooltip will display a message that tha value must be less than or equeal to 99	Entered 100 in the input field and pressed the update button	The tooltip appeared with expected message	Pass
Update link	Users should be able to update the quantity of items in their bag using the update link, as long as the item quantity value is valid (see above) and a toast should appear to let the shopper know that the update was successful. The product image, name and quantity should also be displayed with the toast message	Changed the quantity of a product in the bag from 1 to 2 and clicked the update link	The expected toast message and content confirmed that the item quantity was successfully updated	Pass
Remove link	Users should be able to remove a product from their bag using the remove link and a toast message should let the shoppers know that the product has been successfully removed from the bag	Clicked the remove link in the shopping bag to remove the product	The product was successfully removed from the bag and the toast message displayed the expected message	Pass
Keep Shopping button	Takes the user to the products page	Clicked the button	Opened the products page	Pass
Secure Checkout button	Should take the shopper to secure checkout page when clicked	Pressed the secure checkout button	Openned the secure checkout page	Pass
Delivery threshold message	When a product is added to the shopping bag, the delivery threshold message should appear to let the shoppers know how much they need to spend to get free delivery, if the threshold is not met. If met, no message about the delivery threshold should be displayed	Added product to bag several times until free delivery threshold is met	Below the toast success message and product info, the free delivery message displayed and no longer came up when the grand total amount of the products in the bag exceeded the threshold	Pass
View Your Shopping Bag button on toast success message	The button should redirect the shoppers back to the bag page when clicked	Clicked the button on a toast success message	Taken to the shopping bag	Pass
Responsiveness	The bag page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The bag page is fully responsive down to 320 width	Pass
CHECKOUT PAGE
Form Validation	Anonymous users should be informed when the information they provide are incomplete and incorrect	Left some fields in the form deliberately still blank and pressed submit	A tooltip appeared on the required form fields, informing the users of the error	Pass
Create an account link	Take the anonymous user to the sign up page	Clicked on the create an account link	Taken to the sign up page	Pass
Login link	Take the user to the log in page	Clicked on the login link	Taken to the login page	Pass
Payment field	Error message should appear underneath the payment field	Provided an invalid card number	Error message 'your card number is invalid' appeared below the payment field	Pass
Adjust Bag button	Should take the user back to the shopping bag page	Clicked the adjust bag button	Taken to the bag page	Pass
Amount to be charged to the card	The grand total amount should appear below the adjust bag and complete order buttons	Changed items in the bag and checked if the amount to be charged to the card also changed	Pass
Complete order button	Anonymous users, after completing the form, should be able to successfully complete their order	Filled up the form and completed order by pressing complete order button	Order was successfully processed	Pass
Responsiveness	The checkout page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The checkout page is fully responsive down to 320 width	Pass
CHECKOUT SUCCESS PAGE
Order information and toast success	After a user successfully completes an order, the order info, order details, delivering to and billing info should be available on the checkout page. The toast success message confirmed that the order was successfully processed and that an email will be sent to the email addressed provided in the checkout form	Submitted an order	The order information is on the checkout page and the toast appeared with the expected content	Pass
Order Confirmation email	A user should receive an order confirmation email after successfully submitting an order	Checked if oder confirmation email arrived	Received order confirmation email	Pass
Responsiveness	The checkout success page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The checkout success page is fully responsive down to 320 width	Pass
PROFILE PAGE
Personalised greeting	A user's profile page should have a greeting of Hi + their username	Logged in as a standard shopper and opened the profile page	Personalised greeting appeared with the correct username	Pass
Wishlist button	The button should take the user to their wishlist page	Clicked the wishlist button	Taken to the wishlist page	Pass
Update the Default Delivery Information	Authenticated users should be able to update their information and a toast success will confirm that the profile was updated successfully	Logged in as a standard user, opened the profile page and updated the postcode and pressed update information button	Profile information updated and the toast appeared with the expected message	Pass
Order History Order Number link	If past order are available, users should be able to open the order number link and be taken to the checkout success page for that order with a toast alert information the user that this is a past confirmation for the order and that a confirmation email was sent on the order date	Opened one of the order number links	Taken to the past order checkout success message and the alert toast appeared with the expected content	Pass
Responsiveness	The profile page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The profile page is fully responsive down to 320 width	Pass
WISHLIST PAGE
Personalised greeting	Authenticated users after clicking on the wishlist icon on top navigation area should take be taken to their wishlist page and be greeted with personalised Hi + username	As a logged in shopper, opened the wishlist page	Personalised greeting of hi + username appeared below the page heading	Pass
Bag icon	The bag icon in the wishlist page should take the shopper to the product's product detail page	Clicked the bag icon	Taken to the correct product detail page	Pass
Trash icon	The trash icon should allow the authenticated user to remove the product from their wishlist, be redirected to the product detail page and a toast alert to confirm that the product was rremoved from the wishlist	Clicked the trash icon for the Laneige Lip Sleeping Mask (Berry) product	Redirected to the product detail page, toast alert appeared confirming product was removed from the wishlist. Also opened the wishlist page to check if indeed the product was successfully removed from the list and it was	Pass
Product count in wishlist	When users are on their wishlist page, the products count should be displayed below the wishlist heart icon in the top navigation	Opened the wishlist page	Current product count in wishlist is displayed below the heart icon	Pass
Responsiveness	The wishlist page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The wishlist page is fully responsive down to 320 width	Pass
ADD REVIEW PAGE
Form Validation	Logged in shoppers should be informed via a tooltip if their review is missing required content	Submitted review without title	Tooltip appeared and highlighted the review title form field that was missing the required content	Pass
Cancel button	The button should redirect the shopper back to the product detail page	Pressed cancel button	Redirected back to the product detail page	Pass
Category link	Clicking the category link on the add review page open the products page with the products filtered to display only those available for that category, the category badge (dark pink) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Clicked on the product category link (skincare new arrivals)	The products are filtered display only the products for the skincare new arrivals category, the category badge is displayed and the product count showed there are 15 products available	Pass
Product subcategory tag	Clicking the subcategory tag on the add review page will open the products page with the products filtered to display only those available for that subcategory, the subcategory badge (purple) will be displayed on the centre of the page below the heading with the product count displayed in dark pink opposite the sort selector box (or below on mobile)	Clicked on the product subcategory tag (essence & serum)	The products are filtered and displayed only then essence & serum subcategory, the subcategory badge is displayed and the product count showed there are 19 products available	Pass
Shop Now button	The button should redirect the shopper back to the product detail page	Pressed shop now button	Redirected back to the product detail page	Pass
Submit Review button	Authenticated users should be taken to the review detail page after submitting a review, with a toast success message confirming that a product review has been added	Taken to the review detail page and the toast success appeared with the expected message	Pass
Responsiveness	The add review page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The add review page is fully responsive down to 320 width	Pass
REVIEW DETAIL PAGE
Keep Shopping button	The button should take the shopper to the products page	Clicked the button	Taken to the products page	Pass
Responsiveness	The review detail page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The review detail page is fully responsive down to 320 width	Pass
REVIEWS PAGE
Share Your Experience button	Each available review should have button and opens the add review page when an authenticated user clicks on it or redirects to log in page if user is not logged in with toast error message that a user needs to be logged in to add a review	Clicked on the button as an authenticated user and as an unauthenticated user	As a logged in user, the button opened the add review page and as an unathenticated user, the button redirected to the login page and the expected toast message is displayed	Pass
Responsiveness	The reviews page should be fully responsive	Used Chrome DevTools and tablet and mobile (physical devices) to test responsiveness	The reviews page is fully responsive down to 320 width	Pass
STORE MANAGEMENT FOR AUTHORIZED PERSONNEL ONLY
Brand Management link	Only authorized personnel, ie, superusers/ shop owners should be able to view the brand management link from the My Accounts dropdown links	Logged in as a superuser and logged in as a standard shopper	When logged is as a superuser, the brand management link is included in the My Accounts dropdown link; when logged is as a standard shopper, the brand management link is not included in the My Accounts dropdown links	Pass
	Should take the authenticated superuser to the add brand page	Clicked the brand management link	Taken to the add brand page	Pass
Product Management link	Only authorized personnel, ie, superusers/ shop owners should be able to view the product management link from the My Accounts dropdown links	Logged in as a superuser and logged in as a standard shopper	When logged is as a superuser, the product management link is included in the My Accounts dropdown link; when logged is as a standard shopper, the product management link is not included in the My Accounts dropdown links	Pass
	Should take the authenticated superuser to the add product page	Clicked the product management link	Taken to the add product page	Pass
Add Brand Form Validation	The form to add a new brand should only be submitted if all the required fields have been completed and tooltips will appear on fields with errors	Pressed add brand button with errors on form fields	Form did not submit and tooltips highlighted the field with errors	Pass
	The form should submit, a new brand added to the store when all required fields have been correctly completed and open the brand detail page	Submitted the correctly completed form	Form submitted, new brand added and taken to the brand detail page	Pass
Add Product Form	The form should be pre-populated with the foreign keys data: main category, category, subcategory and brand titles data as dropdown options on each form field	Clicked on the product management link from the my account dropdown links and opened the main category, category, subcategory and brand titles fields dropdown options	Form fields are pre-populated with the expected data and was able to choose the desired options	Pass
Add Product Form Validation	The form to add a new product should only be submitted if all the required fields have been completed and tooltips will appear on fields with errors	Pressed add product button with errors on form fields	Form did not submit and tooltips highlighted the field with errors	Pass
	The form should submit, a new product added to the store when all required fields have been correctly completed, and open the product detail page	Submitted the correctly completed form	Form submitted, new product added and taken to the product detail page	Pass
Edit Brand button	The button should only be displayed to authenticated superusers and when clicked, should take the superuser to the edit brand page	Logged in as a standard shopper and again as a superuser, opened one of the brand detail pages and clicked on the edit brand button	Edit brand button is displayed only when authenticated as a superuser and taken to the edit brand page after clicking the button	Pass
Edit Brand Form	The form should be pre-populated with the available content relevant to each field and superuser should be able to edit the data in the form and a toast alert should display that the brand is being edited and redirect to the brand detail page	Opened the edit brand page by clicking the edit brand button, updated some fields and pressed Update Brand	The form is prepopulated with the expected content, the toast alert appeared and the brand was successfully updated and redirected to the brand detail page.	Pass
Edit Brand Form Validation	The form to edit a brand should only be submitted if all the required fields have been completed and tooltips will appear on fields with errors	Pressed update brand button with errors on form fields	Form did not submit and tooltips highlighted the field with errors	Pass
Edit Product button	The button be displayed on each product card on products page as well as on each product detail page but should only be displayed to authenticated superusers and when clicked, should take the superuser to the edit product page	Logged in as a standard shopper and again as a superuser, opened the products page and clicked on the edit product button; also opened one of the product detail pages and also clicked on the edit product button	In both instances, the edit product button is displayed only when authenticated as a superuser and taken to the edit product page after clicking the button	Pass
Edit Product Form	The form should be pre-populated with the available content relevant to each field and superuser should be able to edit the data in the form and a toast alert should display that the product is being edited and redirect to the product detail page	Opened the edit product page by clicking the edit product button, updated some fields and pressed Update Product	The form is prepopulated with the expected content, the toast alert appeared and the product was successfully updated and redirected to the product detail page.	Pass
Edit Product Form Validation	The form to edit a product should only be submitted if all the required fields have been completed and tooltips will appear on fields with errors	Pressed update product button with errors on form fields	Form did not submit and tooltips highlighted the field with errors	Pass
Delete Product button	The button be displayed on each product card on products page as well as on each product detail page but should only be displayed to authenticated superusers and when clicked, a modal should popup asking for confirmation of the action with a reminder that the action cannot be undone and to also check that the product about to be deleted is not currently in the shopping bag	Logged in as a standard shopper and again as a superuser, opened the products page and clicked on the delete product button; also opened one of the product detail pages and also clicked on the delete product button	In both instances, the delete product button is displayed only when authenticated as a superuser and the expected modal popped up with the expected content	Pass
Using the urls to access pages reserved to superusers only	Unauthenticated users should not be able to access the pages reserved for superusers only. They should be redirected to the login page	Manually inputted the add brand url on to the browser whilst logged out	Redirected to the log in page
	Regular users, even when authenticated, should not be able to access the pages reserved for superusers only. They should be redirected to the home page and a toast error should inform the user that only authorized personnel can do that.	Logged in as a regular user and manually inputted an edit product url on to the browser	Redirected to the home page and the toast error appeared with the expected message	Pass
Responsiveness	The pages reserved for superusers should be fully responsive	UsedUsed Chrome DevTools and tablet and mobile (physical devices) to test responsiveness of add brand, edit brand, add product and edit product pages	All tested pages are fully responsive from width 320	Pass
Django admin	Regular shoppers should not be able to login to the Django admin	Used a regular user's credentials and pressed the login button	Warning message of not authorized to access this page appeared and was not able to log in	Pass

Bugs found during testing and development phase

Solved Bugs

#	Bugs, Errors and Issues	Solutions
1	Error: You are trying to add a non-nullable field to without a default	Solution: Choose option 1 from two options provided by Django when making migrations, add timezone.now, then migrate. A new error appeared: `TypeError: Field 'id' expected a number but got datetime.datetime(2022, 11, 20, 13, 54, 36, 590663, tzinfo=<UTC>)`. I then looked for the latest auto file from migrations folder, then changed: `default=got datetime.datetime(2022, 11, 20, 13, 54, 36, 590663, tzinfo=<UTC>)` to `default=1`. I was then able to migrate successfully.
2	Stripe Webhook errors, `401 ERR`, x 23 times and 100% failure rate	After numerous attempts to solve this by going over and over the source code for webhook handlers, searching the Stripe docs and, Stack Overflow and Code Institute's Slack channels, the solution was to share my GitPod workspace
3	Static and media files not uploading on AmazonS3 bucket	Attempts at fixing this issue remained unsuccessful despite checking multiple times that the steps were followed correctly, that the new CORS configuration was correct and that the steps to creating the AWS Groups, Policies and Users for Shop K-Beauty were also followed and implemented. In the end, I was able to fix the issue by creating a new bucket with new policies.
4	Reviews were not deleting after an associated product is deleted	Fortunately, this was a simple bug. I just had to edit the product (fk) in my review model. `on_delete=models.SET_NULL` was changed to `on_delete=models.CASCADE`, then migrate.
5	DoesNotExist at /accounts/login/ error	In attempting to use Django-flatpages for the static pages such as terms and conditions, policies, etc., I encountered an issue of not being able to login to the deployed site or to site admin. As it was taking too long to get this flatpages to work, I decided to remove all the changes I have just made. But I made the mistake of tinkering with the sites content in Django Admin that caused the error or it could have been caused by allauth views throwing the error as some of the changes I made implementing flatpages included changes to the Middleware in project-level settings.py. Steps Taken Towards a Solution: 1. Check the logs by logging in to the heroku cli `heroku login -i` `heroku apps` - this lists all the apps in Heroku `heroku logs --tail -a <the app name>` - use the correct app name to run the logs command The logs came back with these: heroku-logs-tail-part1 heroku-logs-tail-part2 heroku-logs-tail-part3 heroku-logs-tail-part4 2. Looking at these errors, the simplest solution was to reset the database by running `python3 manage.py migrate` but it didn't work per the terminal: No migrations to apply 3. As it didn't work, the next step was to reset the ElephantSQL site database and run `python3 manage.py migrate` again which came back with these: running-migrations-after-resetting-elephantsql-part1 running-migrations-after-resetting-elephantsql-part1 4. The migration worked, so the next step was to run the server `python3 manage.py runserver` 5. Whoops! The products data were all gone (since the ElephantSQL was reset). But the login functionality now works! The great news was that I had fixtures so I can easily run dumpdata to load the data back. But since I had reviews, I first had to create a few users, starting with creating a superadmin. Next I uploaded the fixtures in specific order (this is important as the products data need access to required three foreign keys (the first three json files below), otherwise I would have gotten another error) by running: `python3 manage.py loaddata <json filename>` a) maincategory.json b) category.json c) subcategory.json d) product.json After uploading the rest of the json files, the checkout and reviews fixtures, the site was back with all the data rendering and the functionalities working as expected. Additional note: I could have also run `python3 manage.py loaddata` to avoid uploading the files one by one, but I wanted to avoid any potential issues with some data requiring data from other files first. I never created a profiles fixtures, for security purposes.
6	HTML Validation errors on add a product and edit a product pages in products app : Error: Duplicate attribute id. At line 1351 column 69 id="id_image"	This is a very interesting error, caused by conflicts between multiple languages. First, the JQuery script to change the image file uses an id of `#new-image`. This caused a conflict with Django's forms widget clearable_file_input, `{% include "django/forms/widgets/attrs.html" %}`, which comes with a function `def clear_checkbox_id(self, name):` `"""Given the name of the clear checkbox input, return the HTML id for it."""` `return name + "_id"` (see from line 438: Github:Django/Django). Because the script already uses `#id-image`, when the file input is selected, it returns the HTML id, which resulted in HTML validation error of duplicate atttribute id. The solutions came in several steps: 1. Change the JQuery script from `#new-image` to `.new-image` 2. Change the custom_clearble_file_input.html (line 19): from `<input id="new-image">` to `.new-image` 3. We cannot leave it here because the forms.py file in the products app has a forloop that adds class attributes: `for field_name, field in self.fields.items(): field.widget.attrs['class'] = 'border-black rounded-0'`. Left unsolved, we would just be exchanging a duplicate id error with a duplicate class error. So I deleted this forloop. 4. To still have the `border-black rounded-0` attributes added to the add/edit a product forms, I then added these to new attributes to base.css `select, .form-control {border: 1px solid #000 !important; border-radius: 0 !important;}`
7	HTML Validation errors on bag page: Error: Duplicate ID and a warning of The `type` attribute is unnecessary for JavaScript resources.	This is an error that seems to be fairly left unsolved in other ecommerce projects I've seen on GitHub. The fix seems fairly daunting at first, as it points to `item_id`, which when searching for this line of code across the project can be found on contexts.py, urls.py, views.py, on webhook_handler.py, on quantity_form.html and on quantity_input_script.html. After initially feeling intimidated about the potential enormity of debugging this error, solving this is actually fairly simple. Solution: 1. On quantity_form.html, from the remove link (below the form), delete `id` and move `remove_{{ item.item_id }}` inside the attribute `class`, thus `class="remove_{{ item.item_id }}"`. 2. On script below the bag.html, replace `var itemId` with `var itemClass`, then replace the `.attr('id')` with `.attr('class')`. 3. Replace var url = `/bag/remove/${itemId}/`; with var url = `/bag/remove/${itemClass}/`;. To remove the warnings, I just delete the `type="text/javascript"`.
8	HTML Validation errors on checkout page: Error: The value of the `for` tag attribute of the `label` element must be the ID of a non-hidden form control	To fix this error, I took the following steps: 1. Deleted the label tag wrapping the two links to (create an account) and (login). 2. I wrapped said links in a `<p></p>` to fix alignments for smaller device. 3. I wrapped the non-link text in `<span></span>` to be able to add space between the texts. 4. I tested that by deleting the `<label></label>` tag and the `for="id-save-info"` that was in the label, it will not cause stripe webhooks to stop working, that the links will still work and that a newly created account will still be saved and that there was no adverse effect to the functionalities on the checkout page. I also checked that when I tested the orders, the new orders were indeed saved in the database. Additionally, when searching for a potential fix to this error, I came across an article from CSS tricks, which says, we should not put interactive elements inside labels such as links. I left the warning of empty heading caused by the loading-spinner.
9	Product name field error on Django admin when re-adding a just deleted product and lack of defensive programming	After I accidentally deleted a product (COSRX Aloe Soothing Sun Cream SPF 50+ PA+++ (50ml)), I realised there are two bugs I needed to fix. 1. The first bug: there was a problem with the name field on my Product model being set to `unique=True` since when I tried to add the same product I just deleted, the Django admin showed an error that the name already exists (even though the product was no longer in the db) and the product I was trying to add did indeed get added. Thus, even though adding again the same product was successful, I thought it best to amend the Product model because in a real life situation, products may need to be deleted and should the same products need to be added in the store again, store owners should not have to worry about a Django admin error. 2. The second bug: the lack of defensive programming in the project, specifically on the button that allows a superadmin to delete a product. To fix these two bugs, I took the following steps: 1. I changed the name field on the product model to `unique=False`, and `migrate`. 2. Using a modal, I targeted the delete product buttons on the products page and on the product_detail page so that the superadmin will receive a warning prior to confirming the deletion of a product.
10	ValueError: invalid literal for int() with base 10: '2.5'	I came across this bug accidentally when trying to find solutions to the JSHint validation warnings for Quantity Input Script (products/templates/products/includes/quantity_input_script.html). The quantity form in product_detail.html doesn't allow the input of floats (as is expected). But in bag.html it does, so when a user tries to update a product quantity using floats, it triggers this Django error. The solution: On bag.html, the script to update a product quantity on click `form.submit()` needs to be updated to `form[0].requestSubmit()`. Credit to Igor Basuga, currently a Junior Developer and a former Full Stack Software Development Tutor at Code Institute for the well documented solution Debugging - a Detective Story and a Learning Experience to this bug.
11	Modal in products.html works in development but not in production	After again accidentally deleting a product, this time in production, I realised that the defensive programming to prevent just this situation by using a modal works in development but not in production. Since the same defensive programming is functioning successfully in product detail page, I used Computed Diff to check for any difference in the code and noticed that on products.html page, the delete a product button is split into several lines, compared to the same code and the same button on product_detail.html which is all in one line. Putting all the code for the delete a product button in one line solved the modal bug not working on products page in production.
12	Heroku Build failure	Testing ... as failure traceback says **Launching...Push failed due to an unrecognized error, and we've been notified.! Please try pushing again.! If the problem persists, see https://help.heroku.com/ and provide Request ID <>. Meanwhile, there's no error showing on the terminal. Pushing again solved the bug.
13	Unable to add new product if the product brand is not in the store yet	Shop K-Beauty is a multi-brand ecommerce store and a brand is required when adding a new product via the product management functionality. When I tested adding a new product, I realised that a store owner can only add a product if said product's brand is already in the store. A store owner would have to add a brand via the Django admin, which is not ideal in a real life situation. To fix this, and since the code to add a brand is pretty much similar to adding a product and the custom clearable file input can also be reused, it makes sense to add the brand management functionality, starting with adding a brand.
14	A logged in user is able to add a product to their own wishlist even if the product is already in the wishlist	To Fix this, I first passed both the product and the user_product to the query for an existing duplicate wishlist by using `Wishlist.objects.get` This didn't work as the GET function will raise an error if a product does not exist in the wishlist. The next solution is to use a combination of filter/exists, which solved the bug: `existing = Wishlist.objects.filter(product=product, user_profile=user).exists()` . Credit and thanks to Oisin from Tutor Support at Code Institute for helping me solve this bug.
15	Discount (high to low) and Discount (low to high) sorting not working properly	First, there was a typo on the products template `<option value="discount_asc" {% if current_sorting == 'discount_desc' %}selected{% endif %}` . Whilst the value is "discount_asc", I made the mistake of having 'discount_desc' for the current sorting. This part was easily fixed. Second, although the sorting the products discounts started to work, there were still a few products that appeared before the discounts were sorted. I realised that there also some errors in the data for new arrivals were I added the discount as 0.00 but did not include the data for the original_price field. After adding the missing data, the sorting of discounts high to low and vice versa now both work as intended.
16	Whilst working on my unit tests, I got an operational error when I tried to log in to production site. The error says, `connection to server at rogue.db.elephantsql.com (35....), port 5432 failed: Connection refused`	As the unit tests were nowhere near production, this was a big puzzle. After checking that all as they should be on elephantsql (postgresdb), in the config vars in Heroku, and in the env.py file, the solution was to do a manual deploy from Heroku dashboard (deploy tab).
17	404 error when an admin deletes a product at the store when said product is also in the shopping bag	To document the deleting a product at the store feature, I added a test product successfully and was redirected to the product detail page. This time, the product that I added has sizes and to also test this, I added the product to the shopping bag. I then decided to test deleting the newly added product which immediately resulted in a 404 error. As DEBUG was already set to False, I couln't trace the error and also could not login to Django admin. Thinking this was caused by setting the product has sizes to True, I duplicated my actions, this time testing it using the development database. The product was successfully deleted and although the 404 error occured, the error was not persistent and was resolved by a hard refresh. But to double check that the persistent error on production was not being caused by the rarely used product has sizes=True option when adding a product, I tested the full CRUD again, this time only the sizes and the product was not in the bag. The 404 error did not occur and all was back to working as expected. The immediate solution to this now is to add a warning on the delete a product modal pop up to check that the product about to be deleted is not in the bag prior to deletion. A better solution would be to add an if else statement in the delete product views but that would have to be for future development.
18	DataError at /checkout/ value too long for type character varying(2)	When checking out a product that has sizes, I encountered this error. I checked that in my orderlineitem model (checkout app), the product_size field has the max_length set to 2, but on my product detail page, the option values are set to: `<option value="30ml">30ml</option>` `<option value="60ml"selected>60ml</option>` `<option value="100ml">100ml</option>` `<option value="200ml">200ml</option>` `<option value="330ml">330ml</option>`. The quick fix for now was to: i) delete all the ml from the option value, ii) replace the 100 with 90 (to restrict it to max length of 2), iii) delete the remaining 200 and 300 option values. After retesting, I was able to checkout successfully buying a product that has a size. But this should be fixed properly in the next development, especially as a 30ml product will have a different price point compared to a 60ml item. I realised that I should either not have included the product_size field in the orderlineitem model but in the beginning of the development, I thought I was going to include providing the shoppers the option to choose sizes. At this rate, I didn't want to have to make the changes to the product pricing based on the size selected as that would require a longer development time.

Known Bugs

#	Known Bugs, Errors and Issues	Justification
1	Browser: Chrome, Error: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received. This error appears after about a minute or two of loading any page of the web application.	I have spent days looking for where this error was coming from, initially thinking it was caused by the show and hide button on the homepage to hide and show list of available brands. I switched off the event listener. The error still appeared. I tried to debug and refactor all the event listeners but found it impossible to do so without disabling the required JQuery functions for the application to run smoothly. Googling for possible causes and reasons, I have found references to the same error and they point to using incognito mode as a possible solution. The error did not appear when using incognito mode. Due to time constraints, the real solution for this error may be investigated further on the next sprint/ future development.
2	internal server error when registering a new account	This error came out of the blue since the account registration has been tested multiple times by friends and family and also by myself using temporary emails. After setting the project back and forth between DEBUG=True and DEBUG=False and even asking fellow students to test the account registration functionality, the server error did not appear again. Three other fellow students helped me try and uncover the source of this error by themselves registering a new account with Shop K-Beauty. None of them reported any error and the account registration worked as expected. I cannot recreate the error and neither does it appear again, but since I also did not knowingly solve this bug, I thought it best to list this as a known bug for now and one that I will try in the next sprint/ future development to investigate further.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TESTING.md

TESTING.md

Shop K-Beauty Testing Results

TABLE OF CONTENTS

Automated Testing and Validation

HTML Validation

CSS Validation

JavaScript Validation

Python Validation

Lighthouse Report

Desktop

Mobile

WAVE Web Accessibility Evaluation Tool

Django Automated Testing

Coverage

Manual Testing

Testing User Stories

User Stories

Full Testing

Bugs found during testing and development phase

Solved Bugs

Known Bugs

Files

TESTING.md

Latest commit

History

TESTING.md

File metadata and controls

Shop K-Beauty Testing Results

TABLE OF CONTENTS

Automated Testing and Validation

HTML Validation

CSS Validation

JavaScript Validation

Python Validation

Lighthouse Report

Desktop

Mobile

WAVE Web Accessibility Evaluation Tool

Django Automated Testing

Coverage

Manual Testing

Testing User Stories

User Stories

Full Testing

Bugs found during testing and development phase

Solved Bugs

Known Bugs