orion/docs/testing/shop-frontend-features.md

Storefront Frontend Features - Testing Checklist

Last Updated: 2026-01-08 Total Pages: 15+ Status: All Working

---

1. Homepage

Homepage Display

Test Case	Route	Method	Status
Load homepage	/storefront/	GET	Working

UI Elements to Test:

• Hero section with store branding
• Store name and tagline display
• Store description
• Featured categories section
• Featured products section
• "Shop Now" call-to-action button
• Dark mode toggle in header
• Responsive layout (mobile/tablet/desktop)

---

2. Product Catalog

Products List

Test Case	Route	Method	Status
Browse all products	/storefront/products	GET	Working
API: List products	/api/v1/storefront/products	GET	Working
Filter featured products	/api/v1/storefront/products?is_featured=true	GET	Working
Pagination	/api/v1/storefront/products?skip=&limit=	GET	Working

UI Elements to Test:

• Product grid display (2-4 columns)
• Product cards with image, name, price
• Category filter dropdown
• Sort options (newest, price low-high, price high-low, popular)
• Search input
• Pagination controls
• Add to cart from product card
• Placeholder images fallback

Query Parameters:

• skip (pagination offset)
• limit (items per page, default: 100, max: 1000)
• search (product name search)
• is_featured (boolean filter)

---

3. Product Detail

Product Detail Page

Test Case	Route	Method	Status
View product details	/storefront/products/{product_id}	GET	Working
API: Get product	/api/v1/storefront/products/{product_id}	GET	Working

UI Elements to Test:

• Main product image
• Image gallery with thumbnails
• Thumbnail navigation
• Product title
• Brand display
• Category display
• SKU display
• Regular price
• Sale price (if applicable)
• Discount badge
• Product description
• Quantity selector (+/- buttons)
• Add to Cart button
• Breadcrumb navigation
• Related products (future)

---

4. Search

Product Search

Test Case	Route	Method	Status
Search page	/storefront/search	GET	Working
Search with query	/storefront/search?q=	GET	Working
API: Search products	/api/v1/storefront/products/search?q=	GET	Working

UI Elements to Test:

• Search input field
• Search button
• Result count display
• Search query in header
• Product grid for results
• Empty state (no query)
• No results state
• Pagination for results

Search Fields (Backend):

• Product names
• Descriptions
• SKUs
• Brands
• GTINs

Query Parameters:

• q (search query, required, min 1 char)
• skip (pagination offset)
• limit (items per page, default: 50, max: 100)

---

5. Shopping Cart

Cart Management

Test Case	Route	Method	Status
View cart page	/storefront/cart	GET	Working
API: Get cart	/api/v1/storefront/cart/{session_id}	GET	Working
API: Add to cart	/api/v1/storefront/cart/{session_id}/items	POST	Working
API: Update quantity	/api/v1/storefront/cart/{session_id}/items/{product_id}	PUT	Working
API: Remove item	/api/v1/storefront/cart/{session_id}/items/{product_id}	DELETE	Working
API: Clear cart	/api/v1/storefront/cart/{session_id}	DELETE	Working

UI Elements to Test:

• Cart item list
• Product image thumbnails
• Product names (clickable)
• Unit prices
• Quantity inputs
• Increment/decrement buttons
• Remove item button
• Line totals
• Cart subtotal
• Continue shopping link
• Proceed to checkout button
• Empty cart state
• Cart count badge in header

Add to Cart Request:

{
  "product_id": 123,
  "quantity": 1
}

Update Quantity Request:

{
  "quantity": 2
}

---

6. Checkout

Checkout Process

Test Case	Route	Method	Status
Checkout page	/storefront/checkout	GET	Working
API: Place order	/api/v1/storefront/orders	POST	Working

Step 1: Contact & Shipping

Form Fields:

• Email address (required)
• First name (required)
• Last name (required)
• Phone number
• Shipping address line 1 (required)
• Shipping address line 2
• Postal code (required)
• City (required)
• Country selector (required)

Step 2: Billing & Shipping Method

Form Fields:

• Same as shipping checkbox
• Billing address line 1
• Billing address line 2
• Billing postal code
• Billing city
• Billing country
• Shipping method selector

Step 3: Order Review

UI Elements:

• Order items summary
• Quantities and prices
• Subtotal
• Shipping cost
• Tax amount
• Order total
• Terms acceptance checkbox
• Place order button
• Loading state during submission

Place Order Request:

{
  "email": "customer@example.com",
  "first_name": "John",
  "last_name": "Doe",
  "phone": "+352123456",
  "ship_address_line_1": "123 Main St",
  "ship_postal_code": "1234",
  "ship_city": "Luxembourg",
  "ship_country": "LU",
  "bill_address_line_1": "123 Main St",
  "bill_postal_code": "1234",
  "bill_city": "Luxembourg",
  "bill_country": "LU",
  "session_id": "cart-session-id"
}

---

7. Authentication

Login

Test Case	Route	Method	Status
Login page	/storefront/account/login	GET	Working
API: Login	/api/v1/storefront/auth/login	POST	Working

Form Fields:

• Email/username (required)
• Password (required)
• Forgot password link
• Register link

Login Request:

{
  "email_or_username": "customer@example.com",
  "password": "password123"
}

Response:

• access_token
• token_type ("bearer")
• expires_in (seconds)
• user (profile object)

Registration

Test Case	Route	Method	Status
Register page	/storefront/account/register	GET	Working
API: Register	/api/v1/storefront/auth/register	POST	Working

Form Fields:

• First name (required)
• Last name (required)
• Email (required, unique per store)
• Password (required, min 8 chars, letter + digit)
• Confirm password (required, must match)
• Phone (optional)
• Login link

Validation Tests:

• Email already exists error
• Password too short error
• Password missing letter/digit error
• Passwords don't match error

Registration Request:

{
  "email": "newcustomer@example.com",
  "password": "password123",
  "first_name": "Jane",
  "last_name": "Doe",
  "phone": "+352123456"
}

Forgot Password

Test Case	Route	Method	Status
Forgot password page	/storefront/account/forgot-password	GET	Working
API: Request reset	/api/v1/storefront/auth/forgot-password	POST	Working

Form Fields:

• Email (required)
• Submit button
• Back to login link

Request:

{
  "email": "customer@example.com"
}

Note: Returns generic message regardless of email existence (security).

Reset Password

Test Case	Route	Method	Status
Reset password page	/storefront/account/reset-password	GET	Working
API: Reset password	/api/v1/storefront/auth/reset-password	POST	Working

Form Fields:

• Reset token (auto-filled from URL)
• New password (required)
• Confirm password (required)

Request:

{
  "reset_token": "token-from-email",
  "new_password": "newpassword123"
}

Validation Tests:

• Invalid/expired token error
• Password too weak error
• Passwords don't match error

Logout

Test Case	Route	Method	Status
API: Logout	/api/v1/storefront/auth/logout	POST	Working

---

8. Customer Dashboard

Account Dashboard

Test Case	Route	Method	Status
Dashboard page	/storefront/account/dashboard	GET	Working
API: Get profile	/api/v1/storefront/profile	GET	Working

UI Elements to Test:

• Welcome message with name
• Orders card (count, link)
• Profile card (email, link)
• Addresses card (link)
• Messages card (unread count badge, link)
• Quick stats display

---

9. Customer Profile

Profile Management

Test Case	Route	Method	Status
Profile page	/storefront/account/profile	GET	Working
API: Get profile	/api/v1/storefront/profile	GET	Working
API: Update profile	/api/v1/storefront/profile	PUT	Working

Profile Form Fields:

• First name
• Last name
• Email (with uniqueness validation)
• Phone
• Preferred language selector (en, fr, de, lb)
• Marketing consent toggle
• Save button

Update Profile Request:

{
  "email": "newemail@example.com",
  "first_name": "John",
  "last_name": "Doe",
  "phone": "+352123456",
  "marketing_consent": true,
  "preferred_language": "en"
}

Change Password

Test Case	Route	Method	Status
API: Change password	/api/v1/storefront/profile/password	PUT	Working

Password Change Form:

• Current password (required)
• New password (required, min 8 chars)
• Confirm password (required)
• Save button

Request:

{
  "current_password": "oldpassword123",
  "new_password": "newpassword123",
  "confirm_password": "newpassword123"
}

---

10. Address Management

Address List

Test Case	Route	Method	Status
Addresses page	/storefront/account/addresses	GET	Working
API: List addresses	/api/v1/storefront/addresses	GET	Working

UI Elements to Test:

• Address cards grid
• Shipping/Billing type badges
• Default indicator
• Add address button
• Edit button per address
• Delete button per address
• Empty state

Address CRUD

Test Case	Route	Method	Status
API: Get single address	/api/v1/storefront/addresses/{address_id}	GET	Working
API: Create address	/api/v1/storefront/addresses	POST	Working
API: Update address	/api/v1/storefront/addresses/{address_id}	PUT	Working
API: Set as default	/api/v1/storefront/addresses/{address_id}/default	PUT	Working
API: Delete address	/api/v1/storefront/addresses/{address_id}	DELETE	Working

Address Form Fields:

• Address type (shipping/billing)
• First name (required)
• Last name (required)
• Merchant (optional)
• Address line 1 (required)
• Address line 2 (optional)
• Postal code (required)
• City (required)
• Country selector (required)
• Phone (optional)
• Set as default checkbox

Create Address Request:

{
  "address_type": "shipping",
  "first_name": "John",
  "last_name": "Doe",
  "merchant": "ACME Inc",
  "address_line_1": "123 Main St",
  "address_line_2": "Apt 4",
  "postal_code": "1234",
  "city": "Luxembourg",
  "country": "LU",
  "phone": "+352123456",
  "is_default": true
}

Limit: Max 10 addresses per customer

---

11. Order History

Orders List

Test Case	Route	Method	Status
Orders page	/storefront/account/orders	GET	Working
API: List orders	/api/v1/storefront/orders	GET	Working

UI Elements to Test:

• Order cards list
• Order number display
• Order date
• Order total
• Status badge (color-coded)
• View details button
• Download invoice button
• Pagination
• Empty state

Order Statuses:

• pending (yellow)
• processing (blue)
• shipped (purple)
• delivered (green)
• cancelled (red)
• refunded (gray)

Order Detail

Test Case	Route	Method	Status
Order detail page	/storefront/account/orders/{order_id}	GET	Working
API: Get order	/api/v1/storefront/orders/{order_id}	GET	Working

UI Elements to Test:

• Order header (number, date, status)
• Order items list
• Item names and quantities
• Unit prices
• Line totals
• Shipping address
• Order summary (subtotal, shipping, tax, total)
• Download invoice button
• Back to orders link

Invoice Download

Test Case	Route	Method	Status
API: Download invoice	/api/v1/storefront/orders/{order_id}/invoice	GET	Working

Note: Only available for orders with status: processing, partially_shipped, shipped, delivered, completed

---

12. Customer Messaging

Messages List

Test Case	Route	Method	Status
Messages page	/storefront/account/messages	GET	Working
API: List conversations	/api/v1/storefront/messages	GET	Working
API: Get unread count	/api/v1/storefront/messages/unread-count	GET	Working

UI Elements to Test:

• Conversation list
• Filter tabs (All, Open, Closed)
• Subject display
• Last message time
• Unread badge
• Participant name
• Pagination
• Empty state

Conversation Detail

Test Case	Route	Method	Status
API: Get conversation	/api/v1/storefront/messages/{conversation_id}	GET	Working
API: Send message	/api/v1/storefront/messages/{conversation_id}/messages	POST	Working
API: Mark as read	/api/v1/storefront/messages/{conversation_id}/read	PUT	Working

UI Elements to Test:

• Message thread display
• Sender names and timestamps
• Message content
• Attachments with download links
• Image thumbnails
• Reply text area
• File attachment button
• Send button
• Closed conversation indicator

Send Message Request:

{
  "content": "Hello, I have a question about my order..."
}

(with optional file attachments as multipart/form-data)

Attachment Download

Test Case	Route	Method	Status
API: Download attachment	/api/v1/storefront/messages/{conversation_id}/attachments/{attachment_id}	GET	Working
API: Get thumbnail	/api/v1/storefront/messages/{conversation_id}/attachments/{attachment_id}/thumbnail	GET	Working

---

13. Content Pages (CMS)

CMS Pages

Test Case	Route	Method	Status
View content page	/storefront/page/{slug}	GET	Working
API: Get navigation	/api/v1/storefront/content-pages/navigation	GET	Working
API: Get page content	/api/v1/storefront/content-pages/{slug}	GET	Working

Common Pages to Test:

• About Us (/storefront/about)
• Contact (/storefront/contact)
• Terms & Conditions (/storefront/terms)
• Privacy Policy (/storefront/privacy)
• Return Policy (/storefront/returns)
• FAQ (/storefront/faq)

UI Elements to Test:

• Page title
• Page content (HTML/Markdown rendered)
• Meta tags in head
• Breadcrumb navigation
• Last updated timestamp
• Navigation links in header/footer

---

14. Language Switching

Language Selection

Test Case	Route	Method	Status
API: Set language	/api/v1/language/set	POST	Working

UI Elements to Test:

• Language dropdown in header
• Current language flag/name
• Language options (EN, FR, DE, LB)
• Page reload after selection

Supported Languages:

• English (en) - GB flag
• French (fr) - FR flag
• German (de) - DE flag
• Luxembourgish (lb) - LU flag

---

15. Theme & Branding

Visual Elements

UI Elements to Test:

• Dark/Light mode toggle
• Store logo display (light variant)
• Store logo display (dark variant)
• Custom favicon
• Primary brand color applied
• Hover states with dark variant
• Custom CSS applied
• Responsive design
• Mobile menu

---

16. Error Pages

Error Handling

Test Case	Route	Status
400 Bad Request	Any invalid request	Working
401 Unauthorized	Protected route without auth	Working
403 Forbidden	Insufficient permissions	Working
404 Not Found	Invalid URL	Working
422 Unprocessable Entity	Validation errors	Working
429 Too Many Requests	Rate limited	Working
500 Server Error	Backend error	Working
502 Bad Gateway	Proxy error	Working

Error Page Elements:

• Error code display
• Error message
• Back to home link
• Consistent styling

---

Summary

Functional Area	Pages	Endpoints	Status
Homepage	1	-	Working
Product Catalog	1	2	Working
Product Detail	1	1	Working
Search	1	1	Working
Shopping Cart	1	5	Working
Checkout	1	1	Working
Login	1	1	Working
Registration	1	1	Working
Password Reset	2	2	Working
Logout	-	1	Working
Dashboard	1	1	Working
Profile	1	2	Working
Addresses	1	5	Working
Orders	2	3	Working
Messages	1	5	Working
Content Pages	Dynamic	2	Working
Language	-	1	Working
Error Pages	8	-	Working
TOTAL	15+	34	All Working

---

Integration Test Flows

Flow 1: Guest Checkout

1. Browse products on homepage
2. View product detail
3. Add to cart
4. View cart
5. Proceed to checkout
6. Fill shipping info
7. Fill billing info
8. Review order
9. Place order
10. Verify cart cleared

Flow 2: Registered User Checkout

1. Register new account
2. Verify redirect to login
3. Login with new credentials
4. Add saved address
5. Browse and add products to cart
6. Checkout with saved address
7. Place order
8. View order in order history
9. Download invoice

Flow 3: Password Reset

1. Go to forgot password
2. Submit email
3. Check for reset email
4. Click reset link
5. Enter new password
6. Verify redirect to login
7. Login with new password

Flow 4: Customer Messaging

1. Login to account
2. Go to messages
3. View conversation
4. Send reply
5. Attach file
6. Verify message sent
7. Check unread count updates

Flow 5: Search & Filter

1. Use search bar
2. Verify results
3. Apply sort option
4. Clear search
5. Use category filter
6. Verify filtered results