E2e tests with real Flask + seeded test DB, fix platform-specific build failures, update workshop content, remove Google Fonts, disable telemetry

[Copilot]

The e2e tests previously used page.route() to mock client-side fetches — but with SSR, fetches happen server-side, making those mocks ineffective. Additionally, direct @esbuild/linux-arm64 dependencies caused build failures on x64. Workshop content in the content/ folder also referenced Svelte components and tooling that no longer exist after the app simplification.

E2e test architecture — real Flask with seeded test database

• New server/utils/seed_test_database.py — creates a fresh e2e_test_dogshelter.db with deterministic test data (3 breeds, 3 dogs with known attributes)
• server/app.py now accepts a DATABASE_PATH environment variable, allowing tests to use a separate database without touching the main one
• playwright.config.ts seeds the test database, starts Flask (with DATABASE_PATH pointing to the test DB), and starts the Astro dev server (API_SERVER_URL → Flask) before running tests
• All 13 e2e tests run against the real Flask server with real SQLAlchemy/SQLite queries

E2e test rewrites

• api-integration.spec.ts — Replaced page.route() client-side mocks with assertions against SSR-rendered content from the seeded test database
• homepage.spec.ts — Removed "loading state" and client-side error tests (don't exist with SSR); switched to data-testid selectors
• dog-details.spec.ts — Replaced .grid a[href^="/dog/"] CSS selectors with data-testid locators

Dependency cleanup

• Removed @esbuild/linux-arm64, esbuild, esbuild-wasm (transitive via Vite, direct deps caused platform mismatch)

Remove Google Fonts

• Removed the three Google Fonts <link> tags (preconnect + Inter stylesheet) from Layout.astro
• Updated --font-sans CSS variable to use system font stack only, removing the 'Inter' reference

Disable Astro telemetry

• Added process.env.ASTRO_TELEMETRY_DISABLED = '1' at the top of astro.config.mjs to disable Astro telemetry project-wide

Workshop content updates

Updated all Svelte references across both workshops to reflect the pure-Astro app structure:

• 1-hour workshop: README.md, 0-setup.md, 1-add-endpoint.md, 3-copilot-instructions.md, 4-add-feature.md — replaced "Astro and Svelte" with "Astro", changed DogList.svelte file references to DogList.astro
• Full-day workshop: README.md, 3-codespaces.md (removed svelte.svelte-vscode from devcontainer extensions), 5-context.md, 6-code.md — same Svelte → Astro updates
• Root README.md and scripts/start-app.sh comment updated

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Streamline app</issue_title>
<issue_description># Plan: Simplify Client App — Pure Astro, Remove Svelte

Problem Statement

The client app is more complex than necessary:

1. Svelte is unnecessary — Both Svelte components (DogList.svelte, DogDetails.svelte) have zero client-side interactivity (no state changes, no event handlers, just data display and <a> links). They can be simple Astro components.
2. Unnecessary client-side data fetching — Components fetch data client-side via fetch('/api/...'), even though Astro is configured for SSR and can fetch server-side in page frontmatter
3. Middleware API proxy adds complexity — The middleware intercepts /api/ requests and proxies them to Flask. With server-side fetching in Astro, this layer is unnecessary
4. Dead dependencies — autoprefixer, postcss (Tailwind v4 handles this), flask-cors (no cross-origin requests with SSR)
5. Unused assets & redundant code — Starter template leftovers, duplicate imports, placeholder comments

Proposed Approach

Remove Svelte entirely. Convert Svelte components to Astro components. Fetch data server-side in Astro page frontmatter. Remove the middleware proxy, dead dependencies, and unused files.

Todos

1. Convert DogList.svelte → DogList.astro

• Delete: client/src/components/DogList.svelte
• Create: client/src/components/DogList.astro
• Accept dogs array via Astro.props
• Render the same HTML grid of dog cards (pure template, no JS)

2. Convert DogDetails.svelte → DogDetails.astro

• Delete: client/src/components/DogDetails.svelte
• Create: client/src/components/DogDetails.astro
• Accept dog object via Astro.props
• Render the same HTML dog detail card (pure template, no JS)

3. Update index.astro — server-side data fetching

• File: client/src/pages/index.astro
• Fetch dogs list from Flask in frontmatter (API_SERVER_URL/api/dogs)
• Pass data to DogList.astro as props
• Handle error states in the page
• Remove global.css import (already in Layout)

4. Update [id].astro — server-side data fetching

• File: client/src/pages/dog/[id].astro
• Fetch dog details from Flask in frontmatter (API_SERVER_URL/api/dogs/{id})
• Pass data to DogDetails.astro as props
• Handle 404 / error states
• Remove redundant export const prerender = false and unused props variable

5. Remove the API proxy middleware

• Delete: client/src/middleware.ts

6. Remove Svelte from the project

• File: client/astro.config.mjs — Remove Svelte integration and duplicate vite plugin
• Delete: client/svelte.config.js
• File: client/package.json — Remove svelte, @astrojs/svelte

7. Remove dead dependencies

• File: client/package.json — Remove autoprefixer, postcss (Tailwind v4 + Vite handles CSS natively)
• File: server/requirements.txt — Remove flask-cors (no cross-origin with SSR)

8. Remove unused assets

• Delete: client/src/assets/astro.svg, client/src/assets/background.svg (starter template leftovers, not referenced anywhere)

9. Clean up minor issues

• Eliminate global.css — It only contains @import "tailwindcss". Move this into the <style is:global> block in Layout.astro and delete the file. Removes a file and 3 redundant imports.
• Simplify Header to always-visible nav — The hamburger menu with JS toggle is overkill for 2 nav links (Home, About). Replace with simple inline nav links. This eliminates the only client-side JavaScript in the entire app, making it truly zero-JS.
• Remove unused dark: variants — <html> has class="dark" hardcoded, so dark: prefixes are always active. The non-dark variants (bg-blue-500, bg-white, text-slate-800) never apply. Replace bg-blue-500 dark:bg-blue-700 with just bg-blue-700, etc. Simpler for learners to read.
• Remove transition-colors duration-300 — These transition classes appear on many elements but never trigger (no theme switching). Dead code.
• Remove // about page comment from about.astro

10. Update all libraries to latest versions

• Client: astro, @astrojs/node, @tailwindcss/vite, tailwindcss, typescript, @playwright/test, @types/node
• Server: Pin flask, sqlalchemy, flask_sqlalchemy to latest stable

11. Add data-testid attributes to all components

• Add data-testid attributes to key elements across all Astro components for stable test selectors
• Components: DogList.astro, DogDetails.astro, index.astro, [id].astro, about.astro, Header.astro
• Key attributes: dog-list, dog-card, dog-name, dog-breed, dog-details, dog-age, dog-gender, dog-status, dog-description, error-message, empty-state, back-link

12. Create mock API server for e2e tests

• Create: client/e2e-tests/mock-api.ts — A lightweight Node.js...

• Fixes Streamline app #177

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[GeekTrainer]

@copilot take a look at the steps in the content folder, which is where learners work on the app as part of a workshop. At some point they're asked to make changes to the app. Make sure those changes make sense with the updated app structure

[Copilot]

@copilot take a look at the steps in the content folder, which is where learners work on the app as part of a workshop. At some point they're asked to make changes to the app. Make sure those changes ...

Updated all workshop content in commit 9a5fed4. Changes across 11 files:

1-hour workshop: Updated README, 0-setup.md ("Astro/Svelte" → "Astro"), 1-add-endpoint.md ("Astro app with Svelte" → "Astro app"), 3-copilot-instructions.md (example instructions now say "Built using Astro"), 4-add-feature.md (file references changed from DogList.svelte to DogList.astro, "Svelte frontend" → "Astro frontend").

Full-day workshop: Updated README, 3-codespaces.md (removed svelte.svelte-vscode from devcontainer extensions), 5-context.md (example instructions updated), 6-code.md (all DogList.svelte references → DogList.astro).

Other: Root README.md description updated, start-app.sh comment fixed ("SvelteKit" → "Astro").

[GeekTrainer]

@copilot lets update that e2e approach! Rather than mocking out the Flask server, let's get a separate database setup for Flask to use that's seeded for the API calls when Playwright runs. Then make sure everything is setup to use this new approach

[Copilot]

@copilot lets update that e2e approach! Rather than mocking out the Flask server, let's get a separate database setup for Flask to use that's seeded for the API calls when Playwright runs. Then make s...

Done in 28e1ba4. The e2e tests now use the real Flask server with a separate test database:

• server/utils/seed_test_database.py — creates e2e_test_dogshelter.db with 3 known dogs/breeds (deterministic, no randomness)
• server/app.py — accepts DATABASE_PATH env var so tests use the test DB without touching the main one
• playwright.config.ts — seeds the test DB then starts Flask (with test DB) + Astro before running tests
• Removed mock-api.ts and tsx dependency

All 13 e2e tests pass against the real Flask server.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[GeekTrainer]

@copilot lets get rid of the Google fonts

[Copilot]

@copilot lets get rid of the Google fonts

Removed in dd43328. Deleted the three Google Fonts <link> tags (preconnect + Inter stylesheet) from Layout.astro and updated the --font-sans CSS variable to use system fonts only.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/pets-workshop/pets-workshop/client/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[GeekTrainer]

@copilot make sure Astro telemetry is disabled

[Copilot]

@copilot make sure Astro telemetry is disabled

Done in 7b19f3b. Added process.env.ASTRO_TELEMETRY_DISABLED = '1' at the top of astro.config.mjs — this is the recommended per-project approach since Astro doesn't have a built-in config option for telemetry.