Merge pull request #179 from github-samples/simplify-client-app

Simplify client: remove Svelte, use pure Astro with SSR data fetching

Author: GeekTrainer

.github/dependabot.yml

@@ -8,7 +8,7 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: /client
+    directory: /app/client
     schedule:
       interval: weekly
     groups:

.gitignore

@@ -40,6 +40,12 @@ flask_session/
 htmlcov/
 
 # playwright
-client/test-results/
-client/playwright-report/
+app/client/test-results/
+app/client/playwright-report/
+.playwright-mcp/
+
+# e2e test database
+app/server/e2e_test_dogshelter.db
+
+# azure
 .azure

README.md

@@ -1,6 +1,6 @@
 # Pets workshop
 
-This repository contains the project for three guided workshops to explore various GitHub features. The project is a website for a fictional dog shelter, with a [Flask](https://flask.palletsprojects.com/en/stable/) backend using [SQLAlchemy](https://www.sqlalchemy.org/) and [Astro](https://astro.build/) frontend using [Svelte](https://svelte.dev/) for dynamic pages.
+This repository contains the project for three guided workshops to explore various GitHub features. The project is a website for a fictional dog shelter, with a [Flask](https://flask.palletsprojects.com/en/stable/) backend using [SQLAlchemy](https://www.sqlalchemy.org/) and an [Astro](https://astro.build/) frontend using [Tailwind CSS](https://tailwindcss.com/).
 
 The available workshops are:
 

client/.dockerignore app/client/.dockerignoreclient/.dockerignore renamed to app/client/.dockerignore

@@ -0,0 +1,31 @@
+// @ts-check
+process.env.ASTRO_TELEMETRY_DISABLED = '1';
+import { defineConfig } from 'astro/config';
+import tailwindcss from '@tailwindcss/vite';
+import node from '@astrojs/node';
+import fs from 'node:fs';
+import path from 'node:path';
+
+// Allow Vite to serve files from the real node_modules path when it is symlinked
+const nodeModulesPath = path.resolve('node_modules');
+const realNodeModulesPath = fs.realpathSync(nodeModulesPath);
+const fsAllow = ['..'];
+if (realNodeModulesPath !== nodeModulesPath) {
+  fsAllow.push(path.dirname(realNodeModulesPath));
+}
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  vite: {
+    plugins: [tailwindcss()],
+    server: {
+      fs: {
+        allow: fsAllow,
+      },
+    },
+  },
+  adapter: node({
+    mode: 'standalone'
+  }),
+});

client/Dockerfile app/client/Dockerfileclient/Dockerfile renamed to app/client/Dockerfile

@@ -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 (`e2e_test_dogshelter.db` in the server directory) 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/README.md app/client/README.mdclient/README.md renamed to app/client/README.md

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('API Integration', () => {
+  test('should render dogs from the API on the homepage', async ({ page }) => {
+    await page.goto('/');
+
+    const dogCards = page.getByTestId('dog-card');
+    await expect(dogCards).toHaveCount(6);
+
+    await expect(page.getByTestId('dog-name').nth(0)).toHaveText('Buddy');
+    await expect(page.getByTestId('dog-breed').nth(0)).toHaveText('Golden Retriever');
+
+    await expect(page.getByTestId('dog-name').nth(1)).toHaveText('Luna');
+    await expect(page.getByTestId('dog-breed').nth(1)).toHaveText('Husky');
+
+    await expect(page.getByTestId('dog-name').nth(2)).toHaveText('Max');
+    await expect(page.getByTestId('dog-breed').nth(2)).toHaveText('German Shepherd');
+  });
+
+  test('should render dog details from the API', async ({ page }) => {
+    await page.goto('/dog/1');
+
+    await expect(page.getByTestId('dog-details')).toBeVisible();
+    await expect(page.getByTestId('dog-name')).toHaveText('Buddy');
+    await expect(page.getByTestId('dog-breed')).toContainText('Golden Retriever');
+    await expect(page.getByTestId('dog-age')).toContainText('3');
+    await expect(page.getByTestId('dog-gender')).toContainText('Male');
+    await expect(page.getByTestId('dog-status')).toHaveText('Available');
+  });
+
+  test('should return 404 details for non-existent dog', async ({ page }) => {
+    await page.goto('/dog/99999');
+
+    await expect(page.getByTestId('error-message')).toBeVisible();
+    await expect(page.getByTestId('error-message')).toContainText('not found');
+  });
+
+  test('should link from dog card to detail page', async ({ page }) => {
+    await page.goto('/');
+
+    const firstCard = page.getByTestId('dog-card').first();
+    await firstCard.click();
+
+    await expect(page).toHaveURL(/\/dog\/1$/);
+    await expect(page.getByTestId('dog-details')).toBeVisible();
+  });
+});