TEST_CASES.md

Dizzpy Furniture Designer — E2E Test Cases

Framework: Playwright with TypeScript Test directory: e2e/ Run command: npm run test:e2e Auth strategy: Cookie injection (auth-token) + Zustand localStorage seeding via e2e/fixtures/auth.setup.ts

---

Table of Contents

1. Authentication
2. Navigation
3. Dashboard
4. Editor — Core
5. Editor — Furniture Library
6. Editor — Room Configuration
7. Editor — Properties & History Sidebar
8. Editor — Save Actions
9. Editor — Duplicate Design
10. Editor — Export Panel
11. Editor — Keyboard Shortcuts
12. Profile

---

1. Authentication

File: e2e/tests/auth.spec.ts Project: auth-tests (no pre-authenticated state)

Test ID	Description	Steps	Expected Result
TC-AUTH-001	Login page renders at /login	Navigate to /login	URL is /login, page title exists
TC-AUTH-002	"Welcome back" heading is visible	Navigate to /login	"Welcome back" heading is rendered
TC-AUTH-003	Dizzpy logo is visible	Navigate to /login	Logo image with alt "Dizzpy Logo" is visible
TC-AUTH-004	Email input is rendered and focusable	Navigate to /login, click #email	Input with id email is visible and receives focus
TC-AUTH-005	Password input renders as type="password"	Navigate to /login	#password has type="password" attribute
TC-AUTH-006	"Sign In" button is visible and enabled	Navigate to /login	Submit button is visible and not disabled
TC-AUTH-007	Demo mode hint is visible	Navigate to /login	Text "Demo mode" is visible
TC-AUTH-008	Password visibility toggle shows/hides text	Fill password, click eye button, click again	Input type changes password → text → password
TC-AUTH-009	Subtitle text is visible	Navigate to /login	"Sign in to your design workspace" is visible
TC-AUTH-010	Hero feature pills visible on desktop	Set viewport 1280×800, navigate to /login	"2D Floor Plans" and "3D Visualisation" pills are visible
TC-AUTH-011	Empty form submit shows "fill in all fields" error	Clear both fields, click Sign In	Error banner shows "Please fill in all fields"
TC-AUTH-012	Only email filled shows validation error	Fill email only, click Sign In	Error banner is visible
TC-AUTH-013	Only password filled shows validation error	Fill password only, click Sign In	Error banner is visible
TC-AUTH-014	Invalid Firebase credentials show error	Enter invalid email + password, submit	Page stays on /login, error banner appears
TC-AUTH-015	Email input enforces email type	Inspect #email	Input has type="email" attribute
TC-AUTH-016	/dashboard redirects unauthenticated user	Navigate to /dashboard without cookie	Redirected to /login
TC-AUTH-017	/profile redirects unauthenticated user	Navigate to /profile without cookie	Redirected to /login
TC-AUTH-018	/editor/new redirects unauthenticated user	Navigate to /editor/new without cookie	Redirected to /login
TC-AUTH-019	/login does not redirect (no loop)	Navigate to /login	Stays on /login, form is rendered

---

2. Navigation

File: e2e/tests/navigation.spec.ts Project: chromium (pre-authenticated)

Test ID	Description	Steps	Expected Result
TC-NAV-001	Authenticated user can access /dashboard	Load auth state, navigate to /dashboard	URL is /dashboard, "Design Portfolio" heading visible
TC-NAV-002	Authenticated user can access /profile	Navigate to /profile	URL is /profile, no redirect to /login
TC-NAV-003	Authenticated user can access /editor/new	Navigate to /editor/new	URL is /editor/new, no redirect to /login
TC-NAV-004	Root path / redirects to /dashboard	Navigate to /	Redirected to /dashboard
TC-NAV-005	Logo is visible in the header	Navigate to /dashboard	Dizzpy logo image visible in header
TC-NAV-006	Clicking logo navigates to /dashboard	Go to /profile, click header logo	URL changes to /dashboard
TC-NAV-007	Avatar button opens user dropdown menu	Click avatar in header	Dropdown menu (role="menu") is visible
TC-NAV-008	User menu displays display name	Open user menu	Display name "E2E Tester" is in the menu
TC-NAV-009	User menu displays email address	Open user menu	Email e2e-tester@dizzpy.dev is in the menu
TC-NAV-010	User menu contains "Dashboard" item	Open user menu	"Dashboard" menu item is visible
TC-NAV-011	User menu contains "Profile" item	Open user menu	"Profile" menu item is visible
TC-NAV-012	User menu contains "Log out" item	Open user menu	"Log out" menu item is visible
TC-NAV-013	Clicking "Profile" navigates to /profile	Open menu, click "Profile"	URL changes to /profile
TC-NAV-014	Clicking "Dashboard" in menu navigates to /dashboard	From /profile, open menu, click "Dashboard"	URL changes to /dashboard
TC-NAV-015	Dark mode toggle button is visible	Navigate to /dashboard	Theme toggle button is in the header
TC-NAV-016	Clicking theme toggle changes HTML class	Click theme toggle	<html> class attribute changes (dark mode toggled)
TC-NAV-017	Logging out redirects to /login	Open user menu, click "Log out"	Redirected to /login
TC-NAV-018	After logout /dashboard redirects to /login	Log out, then navigate to /dashboard	Redirected to /login (session cleared)
TC-NAV-019	Editor back button navigates to /dashboard	Open /editor/new, click arrow-left link	URL changes to /dashboard
TC-NAV-020	Opening editor/new does not show /login	Navigate to /editor/new	URL does not contain /login

---

3. Dashboard

File: e2e/tests/dashboard.spec.ts Project: chromium (pre-authenticated)

3.1 Page Structure

Test ID	Description	Steps	Expected Result
TC-DASH-001	"Design Portfolio" heading is visible	Navigate to /dashboard	h1 "Design Portfolio" is rendered
TC-DASH-002	"New Design" button is visible	Navigate to /dashboard	Button with text "New Design" is visible
TC-DASH-003	Search input has correct placeholder	Navigate to /dashboard	Input with placeholder "Search by name or client…" is visible
TC-DASH-004	Sort dropdown is visible	Navigate to /dashboard	<select> element is rendered
TC-DASH-005	Sort has "Date Created" option	Inspect sort dropdown	Option "Date Created" exists
TC-DASH-006	Sort has "Name A–Z" option	Inspect sort dropdown	Option with text "Name A" exists
TC-DASH-007	"All" category pill is rendered	Navigate to /dashboard	Button "All" is visible in filter bar
TC-DASH-008	All 7 room-type category pills are visible	Navigate to /dashboard	Living Room, Bedroom, Dining Room, Home Office, Kitchen, Bathroom, Other buttons are all visible

3.2 Search & Filter

Test ID	Description	Steps	Expected Result
TC-DASH-009	Search input accepts text	Type "Living Room Test" into search	Input value equals "Living Room Test"
TC-DASH-010	Clearing search resets value	Type text, then clear	Input value is empty string
TC-DASH-011	Clicking a category pill marks it active	Click "Bedroom" pill	Pill has bg-primary class applied
TC-DASH-012	Clicking "All" deselects category filter	Select "Bedroom", then click "All"	"All" pill has bg-primary class
TC-DASH-013	Changing sort to "Name A-Z" updates select	Select "Name A-Z" in sort dropdown	Select value equals "name"
TC-DASH-014	Non-matching search shows empty state	Search for "xyzzy_no_match"	"No designs yet" or "No designs match" text is visible

3.3 New Design Dialog

Test ID	Description	Steps	Expected Result
TC-DASH-015	Dialog opens with "New Design" title	Click "New Design" button	Dialog with heading "New Design" is visible
TC-DASH-016	Dialog step 1 shows design name input	Open dialog	Design name input (placeholder "Johnson Living Room") is visible
TC-DASH-017	Dialog shows 7 room type buttons	Open dialog	All 7 room category buttons rendered inside dialog
TC-DASH-018	"Next" disabled without name and room type	Open dialog, fill nothing	Next button is disabled
TC-DASH-019	"Next" disabled with only name	Fill design name only	Next button remains disabled
TC-DASH-020	"Next" disabled with only room type	Select room type only	Next button remains disabled
TC-DASH-021	"Next" enables with name AND room type	Fill name + select room type	Next button becomes enabled
TC-DASH-022	Selected room type button is highlighted	Click "Kitchen" room type	Kitchen button has border-primary or text-primary class
TC-DASH-023	Step indicators "1" and "2" are visible	Open dialog	Step circles showing "1" and "2" are visible
TC-DASH-024	Proceeding to step 2 shows correct heading	Fill step 1, click Next	Dialog heading changes to "Room & Client Details"
TC-DASH-025	Step 2 has 3 numeric dimension inputs	Complete step 1, advance to step 2	Exactly 3 type="number" inputs present in dialog
TC-DASH-026	Step 2 shows client name input	Advance to step 2	Input with placeholder "Client name" is visible
TC-DASH-027	Step 2 shows client email input	Advance to step 2	Input with placeholder "Client email" is visible
TC-DASH-028	"Back" in step 2 returns to step 1	Advance to step 2, click Back	Dialog heading returns to "New Design"
TC-DASH-029	Pressing Escape closes the dialog	Open dialog, press Escape	Dialog is no longer visible
TC-DASH-030	"Create Design" button visible in step 2	Advance to step 2	Button with text "Create Design" is visible

3.4 States

Test ID	Description	Steps	Expected Result
TC-DASH-031	Empty state shown when no Firestore designs	Navigate to /dashboard (no Firestore)	"No designs yet" or "Try Again" is visible after loading
TC-DASH-032	Page header loads despite slow network	Route intercept to delay Firestore, navigate	"Design Portfolio" heading renders within 10 s

---

4. Editor — Core

File: e2e/tests/editor.spec.ts Project: chromium (pre-authenticated)

Test ID	Description	Steps	Expected Result
TC-EDIT-001	/editor/new loads without login redirect	Navigate to /editor/new	URL contains /editor/new, not /login
TC-EDIT-002	New design shows "Untitled Design" name	Navigate to /editor/new, wait for ready	Header contains text "Untitled Design"
TC-EDIT-003	"Unsaved" label appears for new design	Navigate to /editor/new	Text "Unsaved" visible below design name
TC-EDIT-004	Loading screen disappears after load	Navigate to /editor/new	"Loading design…" text is not visible
TC-EDIT-005	"2D Plan" button is visible	Load editor	"2D Plan" button is rendered in header
TC-EDIT-006	"3D View" button is visible	Load editor	"3D View" button is rendered in header
TC-EDIT-007	2D mode is active by default	Load editor	"2D Plan" button has data-state="active"
TC-EDIT-008	Clicking "3D View" renders WebGL canvas	Click "3D View" button	<canvas> element is visible
TC-EDIT-009	Clicking "2D Plan" returns to 2D	Switch to 3D, then click "2D Plan"	<canvas> is no longer visible
TC-EDIT-010	Tab key toggles 2D → 3D	Click canvas area, press Tab	<canvas> becomes visible
TC-EDIT-011	Tab key toggles 3D → 2D	Switch to 3D, click canvas area, press Tab	<canvas> is no longer visible

---

5. Editor — Furniture Library

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-023	"Furniture" tab is visible in left sidebar	Load editor	Tab with name "Furniture" is rendered
TC-EDIT-024	"Furniture Library" heading is visible	Open Furniture tab	Heading "Furniture Library" is visible
TC-EDIT-025	Furniture search input is present	Open Furniture tab	Input with placeholder "Search furniture…" is visible
TC-EDIT-026	Category tabs render (All, Seating, Tables, Bedroom, Storage, Office, Decor)	Open Furniture tab	All 7 category tabs are visible
TC-EDIT-027	Furniture items are visible in "All" tab	Open Furniture tab	At least one draggable furniture card is visible
TC-EDIT-028	Searching "Chair" filters results	Type "Chair" in furniture search	Furniture cards are visible matching the search
TC-EDIT-029	No-match search shows "No results"	Type "xyzzy_nonexistent_item"	"No results for" message appears
TC-EDIT-030	Clicking "Seating" tab filters to seating items	Click "Seating" tab	Draggable seating items are visible

---

6. Editor — Room Configuration

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-031	"Room" tab is visible in left sidebar	Load editor	Tab with name "Room" is rendered
TC-EDIT-032	"Room Dimensions" label is visible	Click Room tab	Text "Room Dimensions" is visible
TC-EDIT-033	Width, depth, height dimension section is rendered	Click Room tab	Dimensions section container is visible
TC-EDIT-034	"Floor Color" label is visible	Click Room tab	Text "Floor Color" is visible
TC-EDIT-035	"Wall Color" label is visible	Click Room tab	Text "Wall Color" is visible

---

7. Editor — Properties & History Sidebar

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-036	"Properties" tab is visible in right sidebar	Load editor	Tab "Properties" is rendered
TC-EDIT-037	"History" tab is visible in right sidebar	Load editor	Tab "History" is rendered
TC-EDIT-038	Empty state shown when no item is selected	Open Properties tab (nothing selected)	"Select an item to edit its properties" is visible
TC-EDIT-039	Keyboard shortcuts panel is shown	Open Properties tab with no selection	"Keyboard Shortcuts" heading is visible
TC-EDIT-040	Shortcuts list includes Tab, R, Del, Ctrl+Z hints	Open Properties tab	"Toggle 2D / 3D", "Rotate item", "Delete item", "Undo" labels are visible
TC-EDIT-041	Clicking "History" tab switches panel	Click History tab	History tab panel is visible

---

8. Editor — Save Actions

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-012	Back button is visible in editor header	Load editor	Link with back-arrow icon is in header
TC-EDIT-013	Undo button visible and disabled on new design	Load editor	Undo button is visible and disabled
TC-EDIT-014	Redo button visible and disabled on new design	Load editor	Redo button is visible and disabled
TC-EDIT-015	Save button is visible	Load editor	"Save" button is in header
TC-EDIT-016	Export button is visible	Load editor	"Export" button is in header
TC-EDIT-017	Duplicate button is visible	Load editor	"Duplicate" button is in header
TC-EDIT-018	Undo button has Ctrl+Z title hint	Load editor	Undo button title attribute contains "Ctrl+Z"
TC-EDIT-019	Redo button has keyboard shortcut title hint	Load editor	Redo button title contains redo shortcut info
TC-EDIT-042	Ctrl+S triggers save and shows toast	Press Ctrl+S	Toast notification "Design saved" appears
TC-EDIT-043	Save on new design skips confirm dialog	Click Save on new design	Confirm dialog does NOT open
TC-EDIT-044	Save dropdown trigger opens menu	Click ChevronDown next to Save	Dropdown menu is visible
TC-EDIT-045	Dropdown has "Save (overwrite)" option	Open save dropdown	"Save (overwrite)" menu item visible
TC-EDIT-046	Dropdown has "Duplicate Design" option	Open save dropdown	"Duplicate Design" menu item visible
TC-EDIT-047	Dropdown has "Save As New Design…" option	Open save dropdown	"Save As New Design…" menu item visible
TC-EDIT-048	Clicking "Save As New Design…" opens dialog	Open dropdown, click "Save As New Design…"	Dialog opens

---

9. Editor — Duplicate Design

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-049	Clicking Duplicate opens confirmation dialog	Click "Duplicate" button	Dialog with "Duplicate Design" text is visible
TC-EDIT-050	Duplicate dialog shows Cancel button	Open duplicate dialog	"Cancel" button is visible
TC-EDIT-051	Cancelling duplicate dialog closes it	Open duplicate dialog, click Cancel	Dialog is no longer visible

---

10. Editor — Export Panel

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-052	Export panel opens as side sheet	Click "Export" button	Sheet/dialog with data-state="open" is visible
TC-EDIT-053	Export panel shows "Export & Share" title	Open export panel	"Export & Share" heading is visible
TC-EDIT-054	Export panel shows "2D Floor Plan" toggle	Open export panel	Button text "2D Floor Plan" is visible
TC-EDIT-055	Export panel shows "3D View" toggle	Open export panel	Button text "3D View" is visible
TC-EDIT-056	Format options PNG, JPEG, WebP are shown	Open export panel	All three format buttons are visible
TC-EDIT-057	Resolution scale 2× and 3× are shown	Open export panel	"2×" and "3×" scale buttons are visible
TC-EDIT-058	"Copy Link" button is shown	Open export panel	"Copy Link" button is visible
TC-EDIT-059	Email input for client delivery is shown	Open export panel	Input placeholder "client@example.com" is visible
TC-EDIT-060	"Print" button is shown	Open export panel	"Print" button is visible

---

11. Editor — Keyboard Shortcuts

File: e2e/tests/editor.spec.ts

Test ID	Description	Steps	Expected Result
TC-EDIT-020	Clicking design name shows editable input	Click design name in header	<input> element becomes visible in header
TC-EDIT-021	Enter commits new design name	Click name, type new name, press Enter	Header displays the new name
TC-EDIT-022	Escape cancels name edit	Click name, type text, press Escape	Original name "Untitled Design" is restored
TC-EDIT-061	Ctrl+Z on empty history does not crash	Press Ctrl+Z on new design	Page remains functional, view toggle still visible
TC-EDIT-062	Ctrl+Shift+Z on empty future does not crash	Press Ctrl+Shift+Z on new design	Page remains functional
TC-EDIT-063	Ctrl+S saves and keeps editor URL	Press Ctrl+S	URL still matches /editor/ pattern

---

12. Profile

File: e2e/tests/profile.spec.ts Project: chromium (pre-authenticated, localStorage seeded with one mock design)

12.1 Page Load

Test ID	Description	Steps	Expected Result
TC-PROF-001	/profile loads without login redirect	Navigate to /profile	URL is /profile, not /login
TC-PROF-002	"Activity Overview" heading is visible	Navigate to /profile	"Activity Overview" text is visible

12.2 User Identity

Test ID	Description	Steps	Expected Result
TC-PROF-003	User display name shown as h1	Navigate to /profile	h1 contains "E2E Tester"
TC-PROF-004	User email address is visible	Navigate to /profile	Email e2e-tester@dizzpy.dev is visible
TC-PROF-005	"Furniture Designer" badge is visible	Navigate to /profile	Text "Furniture Designer" is visible
TC-PROF-006	Avatar area is rendered	Navigate to /profile	Avatar container element is visible
TC-PROF-007	Avatar initials derived from display name	Navigate to /profile	Initials "ET" are visible in the avatar
TC-PROF-008	"Dizzpy Furnitures" company label is visible	Navigate to /profile	Text "Dizzpy Furnitures" is visible

12.3 Activity Stats

Test ID	Description	Steps	Expected Result
TC-PROF-009	All four stat labels are visible	Navigate to /profile	Total Designs, Furniture Placed, Last Active, Avg. Items/Design all visible
TC-PROF-010	"Total Designs" shows ≥ 1 (mock design seeded)	Navigate to /profile	Numeric value ≥ 1 in the Total Designs card
TC-PROF-011	"Furniture Placed" stat is visible	Navigate to /profile	"Furniture Placed" label rendered
TC-PROF-012	"Last Active" stat is visible	Navigate to /profile	"Last Active" label rendered
TC-PROF-013	"Avg. Items/Design" stat is visible	Navigate to /profile	"Avg. Items/Design" label rendered
TC-PROF-014	Stats grid has exactly 4 cards	Navigate to /profile	4 stat card elements in the grid

12.4 Recent Designs

Test ID	Description	Steps	Expected Result
TC-PROF-015	"Recent Designs" heading is visible	Navigate to /profile	"Recent Designs" heading rendered
TC-PROF-016	Mock design name appears in list	Navigate to /profile	"E2E Test Living Room" text is visible
TC-PROF-017	Recent design shows room dimensions	Navigate to /profile	"5m × 4m" is visible in the design entry
TC-PROF-018	Recent design shows furniture item count	Navigate to /profile	"0 items" is visible (mock design has no furniture)
TC-PROF-019	Separator between sections is visible	Navigate to /profile	<hr> or separator element is visible

12.5 Empty State

Test ID	Description	Steps	Expected Result
TC-PROF-020	Shows "No designs yet" when localStorage is empty	Remove furniture_app_designs from localStorage, navigate to /profile	"No designs yet. Create one from the dashboard." message is visible

---

Summary

Suite	File	Test Count	Auth Needed
Authentication	auth.spec.ts	19	No (unauthenticated tests)
Navigation	navigation.spec.ts	20	Yes
Dashboard	dashboard.spec.ts	18	Yes
Editor – Core & View Toggle	editor.spec.ts	11	Yes
Editor – Furniture Library	editor.spec.ts	8	Yes
Editor – Room Config	editor.spec.ts	5	Yes
Editor – Properties & History	editor.spec.ts	6	Yes
Editor – Save Actions	editor.spec.ts	14	Yes
Editor – Duplicate	editor.spec.ts	3	Yes
Editor – Export Panel	editor.spec.ts	9	Yes
Editor – Keyboard Shortcuts	editor.spec.ts	6	Yes
Profile	profile.spec.ts	20	Yes
Total		139

---

Running the Tests

# Start the dev server and run all tests
npm run test:e2e

# Open the interactive Playwright UI
npm run test:e2e:ui

# View the HTML test report
npm run test:e2e:report

# Run a specific test file
npx playwright test e2e/tests/auth.spec.ts

# Run a specific test by name
npx playwright test --grep "TC-EDIT-008"

# Run tests headed (see the browser)
npx playwright test --headed

Environment Variables

Variable	Description	Default
E2E_TEST_EMAIL	Firebase test account email	test@dizzpy.dev
E2E_TEST_PASSWORD	Firebase test account password	testpassword123

Tests that require actual Firebase login use these variables. The majority of tests bypass Firebase entirely using the cookie+localStorage injection strategy in e2e/fixtures/auth.setup.ts.

Page Object Models

Class	File	Page
LoginPage	e2e/pages/LoginPage.ts	/login
DashboardPage	e2e/pages/DashboardPage.ts	/dashboard
EditorPage	e2e/pages/EditorPage.ts	/editor/[id]
ProfilePage	e2e/pages/ProfilePage.ts	/profile
HeaderComponent	e2e/pages/HeaderComponent.ts	Shared header