Replace mock API with real Flask server using seeded test database for e2e tests

Co-authored-by: GeekTrainer <6109729+GeekTrainer@users.noreply.github.com>

Author: Copilot

.gitignore

@@ -41,4 +41,7 @@ htmlcov/
 
 # playwright
 client/test-results/
-client/playwright-report/
+client/playwright-report/
+
+# e2e test database
+server/e2e_test_dogshelter.db

client/e2e-tests/README.md

@@ -18,6 +18,11 @@ Make sure you have installed dependencies:
 npm install
 ```
 
+You also need Python 3 with Flask dependencies installed:
+```bash
+pip install -r ../server/requirements.txt
+```
+
 ### Running Tests
 
 ```bash
@@ -34,33 +39,44 @@ npm run test:e2e:headed
 npm run test:e2e:debug
 ```
 
+## Test Architecture
+
+Tests run against the real Flask server with a separate test database seeded with deterministic data. When Playwright starts, it:
+
+1. Seeds a test database (`server/e2e_test_dogshelter.db`) with known dogs and breeds
+2. Starts the Flask server using the test database
+3. Starts the Astro dev server pointing at the Flask server
+4. Runs all e2e tests against the live application
+
+The test data is defined in `server/utils/seed_test_database.py`.
+
 ## Test Coverage
 
 The tests cover the following core functionality:
 
 ### Homepage Tests
 - Page loads with correct title and content
 - Dog list displays properly
-- Loading states work correctly
-- Error handling for API failures
 
 ### About Page Tests
 - About page content displays correctly
 - Navigation back to homepage works
 
 ### Dog Details Tests
 - Navigation from homepage to dog details
+- Full dog details display correctly
 - Navigation back from dog details to homepage
 - Handling of invalid dog IDs
 
 ### API Integration Tests
-- Successful API responses
-- Empty dog list handling
-- Network error handling
+- Dogs render correctly on the homepage
+- Dog details render correctly
+- 404 handling for non-existent dogs
+- Navigation from card to detail page
 
 ## Configuration
 
-Tests are configured in `../playwright.config.ts` and automatically start the application servers using the existing `scripts/start-app.sh` script before running tests.
+Tests are configured in `../playwright.config.ts` and automatically start the Flask and Astro servers before running tests.
 
 The tests run against:
 - Client (Astro): http://localhost:4321

client/e2e-tests/api-integration.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('API Integration', () => {
-  test('should render dogs from the mock API on the homepage', async ({ page }) => {
+  test('should render dogs from the API on the homepage', async ({ page }) => {
     await page.goto('/');
 
     const dogCards = page.getByTestId('dog-card');
@@ -17,7 +17,7 @@ test.describe('API Integration', () => {
     await expect(page.getByTestId('dog-breed').nth(2)).toHaveText('German Shepherd');
   });
 
-  test('should render dog details from the mock API', async ({ page }) => {
+  test('should render dog details from the API', async ({ page }) => {
     await page.goto('/dog/1');
 
     await expect(page.getByTestId('dog-details')).toBeVisible();

client/e2e-tests/homepage.spec.ts

@@ -11,7 +11,7 @@ test.describe('Tailspin Shelter Homepage', () => {
     await expect(page.getByText('Find your perfect companion from our wonderful selection')).toBeVisible();
   });
 
-  test('should display dog list with mock data', async ({ page }) => {
+  test('should display dog list', async ({ page }) => {
     await page.goto('/');
 
     await expect(page.getByRole('heading', { name: 'Available Dogs' })).toBeVisible();
@@ -23,7 +23,7 @@ test.describe('Tailspin Shelter Homepage', () => {
     await expect(dogCards).toHaveCount(3);
   });
 
-  test('should display dog names and breeds from mock API', async ({ page }) => {
+  test('should display dog names and breeds', async ({ page }) => {
     await page.goto('/');
 
     await expect(page.getByTestId('dog-name').nth(0)).toHaveText('Buddy');

client/e2e-tests/mock-api.ts

@@ -22,7 +22,6 @@
   "devDependencies": {
     "@playwright/test": "^1.58.1",
     "@types/node": "^24.3.1",
-    "tailwindcss": "^4.1.17",
-    "tsx": "^4.21.0"
+    "tailwindcss": "^4.1.17"
   }
 }

client/package-lock.json

@@ -1,7 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-// Port configuration for mock API and Astro dev server
-const mockApiPort = 5199;
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const serverDir = path.resolve(__dirname, '..', 'server');
+const testDbPath = path.join(serverDir, 'e2e_test_dogshelter.db');
+const flaskPort = 5100;
 const astroDevPort = 4321;
 
 export default defineConfig({
@@ -23,13 +27,13 @@ export default defineConfig({
   ],
   webServer: [
     {
-      command: 'npx tsx e2e-tests/mock-api.ts',
-      url: `http://localhost:${mockApiPort}/api/dogs`,
+      command: `cd ${serverDir} && python3 utils/seed_test_database.py && DATABASE_PATH=${testDbPath} python3 app.py`,
+      url: `http://localhost:${flaskPort}/api/dogs`,
       reuseExistingServer: !process.env.CI,
-      timeout: 10_000,
+      timeout: 30_000,
     },
     {
-      command: `API_SERVER_URL=http://localhost:${mockApiPort} npm run dev -- --no-clearScreen`,
+      command: `API_SERVER_URL=http://localhost:${flaskPort} npm run dev -- --no-clearScreen`,
       url: `http://localhost:${astroDevPort}`,
       reuseExistingServer: !process.env.CI,
       timeout: 30_000,

client/package.json

@@ -7,7 +7,8 @@
 base_dir: str = os.path.abspath(os.path.dirname(__file__))
 
 app: Flask = Flask(__name__)
-app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{os.path.join(base_dir, "dogshelter.db")}'
+db_path: str = os.environ.get('DATABASE_PATH', os.path.join(base_dir, 'dogshelter.db'))
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{db_path}'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
 # Initialize the database with the app