Feat e2e testing (#10)

* feat: add wdio setup

* feat: add GitHub Actions CI workflow and e2e test infrastructure

Add CI workflow running e2e tests on push/PR, with conditional headless
Chrome for CI environments. Include page objects and additional test specs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: use text-based language selection and wait for translations in e2e tests

Select languages by visible button text instead of index to avoid order-dependent
failures. Wait for i18n translations to load before asserting menu labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix tests with timing

* chore: suppress noisy ShadowRootManager warnings in e2e test output

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Update README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update test/specs/player.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update test/specs/selection.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test

CLAUDE.md

@@ -0,0 +1,119 @@
+# CLAUDE.md
+
+## Project Overview
+
+SmartCompanion Audioguide App — a free, open-source PWA for interactive audioguide experiences in museums and cultural institutions. It runs in any modern mobile browser without installation and is fully offline-capable.
+
+This repo is the **shell/wrapper application**. The bulk of functionality lives in workspace packages (`@smartcompanion/ui`, `@smartcompanion/services`, `@smartcompanion/data`, `@smartcompanion/native-audio-player`).
+
+## Tech Stack
+
+- **Stencil.js** v4 — Web Components framework (JSX with `h` factory, Preact-style)
+- **Ionic Framework** v8 — UI components and routing
+- **TypeScript** — Target ES2022, strict unused locals/params enabled
+- **SCSS/SASS** — Styling with CSS custom properties
+- **Workbox** v7 — Service worker and offline caching (conditional)
+- **npm** — Package manager
+
+## Common Commands
+
+```bash
+npm start          # Dev server with hot reload (--dev --watch --serve)
+npm run build      # Production build → www/
+npm test           # Run spec & e2e tests once
+npm run test.watch # Continuous test watching
+npm run generate   # Generate new Stencil component boilerplate
+```
+
+## Project Structure
+
+```
+src/
+├── components/app-root/    # Single Stencil component (app shell)
+│   ├── app-root.tsx        # Main component: routing, menu, navigation
+│   └── app-root.css
+├── global/
+│   ├── app.ts              # Global initialization hook (empty)
+│   └── app.scss            # Global styles & CSS custom property (color) variables
+├── services/
+│   └── index.ts            # ServiceFacade initialization & export
+├── assets/icon/            # PWA icons (favicon.ico, icon.png 512x512)
+├── index.ts                # Entry point — imports Ionic & @smartcompanion/ui
+├── index.html              # HTML shell
+├── sw.js                   # Service worker (Workbox)
+└── manifest.json           # PWA manifest
+stencil.config.ts           # Build config & runtime environment variables
+www/                        # Build output (gitignored)
+```
+
+## Architecture
+
+### Component Architecture
+- **Single Stencil component** (`app-root`) defined in this repo; all other UI components come from `@smartcompanion/ui`
+- Stencil decorators: `@Component`, `@State` (no `@Prop` on app-root)
+- Lifecycle: `componentDidLoad()` for initialization; `render()` returns JSX
+
+### Routing
+- Ionic Router with hash-based routes
+- Routes: `/` (loading), `/language`, `/selection`, `/stations/:stationId`, `/pin`, `/error`
+- Route guards via `serviceFacade.canLoadRoute()` in `beforeEnter`
+- Route change listener on `/stations/default` to update reactive state
+
+### Service Pattern
+- **ServiceFacade** — single facade coordinates all services
+- Imported from `src/services/index.ts` as `serviceFacade`
+- Key methods: `__()` (i18n), `getRoutingService()`, `getMenuService()`, `canLoadRoute()`, `registerDefaultServices()`, `registerCollectibleAudioPlayerService()`, `registerOfflineLoadService()`, `registerOnlineLoadService()`
+
+### State Management
+- Stencil `@State()` for reactive component state
+- Translation strings held as `@State` properties, updated on route changes
+
+### Data Loading
+- **Online mode**: `registerOnlineLoadService()` — fetches from `Env.DATA_URL`
+- **Offline mode**: `registerOfflineLoadService()` — fetch with service worker caching
+- Toggle via `OFFLINE_SUPPORT` in `stencil.config.ts`
+
+## Configuration & Customization
+
+All runtime configuration lives in **`stencil.config.ts`** (rebuild required to apply changes):
+
+| Variable | Default | Description |
+|---|---|---|
+| `Env.TITLE` | `"Animals"` | App title |
+| `Env.DATA_URL` | GitHub sample JSON | External data source URL |
+| `Env.OFFLINE_SUPPORT` | `"disabled"` | Enable service worker (`"enabled"`) |
+
+**Customization points:**
+1. **Colors**: SCSS variables in `src/global/app.scss` (CSS custom properties with `--sc-` prefix)
+2. **Title**: `index.html`, `manifest.json`, and `stencil.config.ts`
+3. **Data URL**: `stencil.config.ts` → `DATA_URL`
+4. **Offline**: `stencil.config.ts` → `OFFLINE_SUPPORT: "enabled"`
+5. **Icons**: Replace files in `src/assets/icon/`
+
+## Code Conventions
+
+- **Component tags**: kebab-case (`app-root`, `sc-page-*`)
+- **Classes**: PascalCase
+- **Functions/variables**: camelCase
+- **CSS variables**: `--sc-` prefix, kebab-case
+- **Imports**: Async/await throughout; no callbacks
+- **JSX**: Stencil's `h` factory (not React's `createElement`)
+- **Formatting**: Prettier with 180-char print width, single quotes, 2-space indent, LF line endings
+- Navigation: always call `serviceFacade.getMenuService().close()` before navigating
+- Hash navigation: check current hash before navigating to prevent duplicate routes
+
+## Workspace Dependencies
+
+Internal packages from the SmartCompanion monorepo — do not modify these directly from this repo:
+- `@smartcompanion/ui` — UI components
+- `@smartcompanion/services` — core services (routing, menu, i18n, data loading)
+- `@smartcompanion/data` — data types and structures
+- `@smartcompanion/native-audio-player` — audio playback
+
+## Build Output
+
+- Output: `www/` (gitignored)
+- Generates ESM bundles + legacy JS
+- Service worker generated conditionally based on `OFFLINE_SUPPORT`
+- Static assets only — no backend required
+- Deployable to GitHub Pages, Netlify, or any static host

README.md

@@ -6,61 +6,84 @@
 
 The SmartCompanion Audioguide App is a free and open-source Progressive Web App (PWA) that delivers interactive audioguide experiences for museums and cultural institutions. It runs seamlessly in any modern mobile browser — no installation required.
 
-The app is fully customizable, allowing you to adapt content, colors, text, and images to fit your institution’s needs. It also includes offline functionality powered by a service worker, ensuring smooth use even without an internet connection.
+The app is fully customizable, allowing you to adapt content, colors, text, and images to fit your institution's needs. It also includes offline functionality powered by a service worker, ensuring smooth use even without an internet connection.
+
+## Features
+
+- 🎧 **Interactive Audioguide** — station-based audio playback for museum tours
+- 📱 **Progressive Web App** — works in any modern browser, no app store needed
+- 🌐 **Multilingual** — built-in i18n support for multiple languages
+- 📶 **Offline Support** — optional service worker caching for use without internet
+- 🎨 **Fully Customizable** — adapt colors, content, images, and branding
+- ⚡ **Lightweight** — built with Stencil.js and Ionic for fast performance
+- 🆓 **Open Source** — BSD 2-Clause license
 
 ## Examples
 
 | [Castle Tratzberg](https://www.smartcompanion.app/projects/mobile-apps/schloss-tratzberg/) | [Museum Landeck](https://www.smartcompanion.app/projects/mobile-apps/schloss-landeck/) | [Example App](https://smartcompanion-audioguide-app.netlify.app) |
-|---|---|---| 
+|---|---|---|
 | ![Castle Tratzberg App](docs/tratzberg-app.png) | ![Museum Landeck App](docs/landeck-app.png) | ![Animals Example App](docs/animals-app.png) |
 
 ## Installation
 
- - Fork and clone the repo
- - Install all dependencies with `npm install`
- - Either build the project with `npm build` or open a live preview within the browser with `npm start`
+- Fork and clone the repo
+- Install all dependencies with `npm install`
+- Either build the project with `npm run build` or open a live preview within the browser with `npm start`
+
+## Development
+
+```bash
+npm start          # Dev server with hot reload
+npm run build      # Production build → www/
+npm test           # Run spec & e2e tests
+npm run test:dev   # Continuous test watching
+```
 
 ## Deployment Options
 
 | Service | Description |
 |---|---|
-| [Netlify](https://www.netlify.com/) | The [Example App](https://smartcompanion-audioguide-app.netlify.app) is hosted on Netlify. Netlify offers a free option and supports custom domain. |
-| [Github Pages](https://docs.github.com/en/pages/quickstart) | Github Pages offers a free option for open source repositories and supports custom domains. |
-| [SmartCompanion](https://www.smartcompanion.app/) | We offer a hosting service including a content management system, continous updates and security fixes, custom domains and support. |
+| [Netlify](https://www.netlify.com/) | The [Example App](https://smartcompanion-audioguide-app.netlify.app) is hosted on Netlify. Netlify offers a free option and supports custom domains. |
+| [GitHub Pages](https://docs.github.com/en/pages/quickstart) | GitHub Pages offers a free option for open source repositories and supports custom domains. |
+| [SmartCompanion](https://www.smartcompanion.app/) | We offer a hosting service including a content management system, continuous updates and security fixes, custom domains, and support. |
 
 ## Customization
 
 ### App Content
 
-The content is loaded from a `data.json` file, which contains all texts and references to assets like images and audio files. Inside the `stencil.config.ts` the `DATA_URL` should point to your `data.json` file. The sample data, which is used for the demo of the app can be found [here](https://github.com/smartcompanion-app/sample-data/tree/main/animals). Custom data needs to be structured according to the example.
+The content is loaded from a `data.json` file, which contains all texts and references to assets like images and audio files. Inside the `stencil.config.ts` the `DATA_URL` should point to your `data.json` file. The sample data, which is used for the demo of the app, can be found [here](https://github.com/smartcompanion-app/sample-data/tree/main/animals). Custom data needs to be structured according to the example.
 
 ### App Appearance
 
 #### App Colors
 
- - scss color variables in `src/global/app.scss`
- - background_color and theme_color in `manifest.json`
- - theme_color in `index.html`
+- SCSS color variables in `src/global/app.scss` (CSS custom properties with `--sc-` prefix)
+- `background_color` and `theme_color` in `manifest.json`
+- `theme_color` in `index.html`
 
 #### Text
 
- - title and description in `index.html`
- - title in `stencil.config.ts`
+- Title and description in `index.html`
+- Title in `stencil.config.ts` (`Env.TITLE`)
 
 #### Images
 
-  - `logo.png` in `assets` folder
-  - `favicon.ico` and `icon.png` in `assets/icon` folder
+- `logo.png` in `assets` folder
+- `favicon.ico` and `icon.png` in `assets/icon` folder
 
 ### Offline Support
 
-The PWA can be used with offline support with a service worker. When using a service work the initial startup of the app takes a bit longer, since all relevant files need to be downloaded and cached. Inside the `stencil.config.ts` file `OFFLINE_SUPPORT` can be set to `true` or `false`.
+The PWA can be used with offline support via a service worker. When using a service worker, the initial startup of the app takes a bit longer since all relevant files need to be downloaded and cached. Inside the `stencil.config.ts` file, set `OFFLINE_SUPPORT` to `"enabled"` or `"disabled"`.
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests.
 
 ## License
 
-The SmartCompanion Audioguide App is licensed under the terms of the BSD 2-Clause license. Check the [LICENSE](LICENSE) text for further details.
+The SmartCompanion Audioguide App is licensed under the terms of the BSD 2-Clause license. Check the [LICENSE](LICENSE) file for further details.
 
 ## Links
 
-- [Web site](https://www.smartcompanion.app)
-- [Native Audio Capacitor Plugin](https://github.com/smartcompanion-app/native-audio-player)
+- [Website](https://www.smartcompanion.app)
+- [Native Audio Capacitor Plugin](https://github.com/smartcompanion-app/native-audio-player)