Merge pull request #69 from lookupdaily/add-docker-for-tests

Add docker for tests

.github/workflows/test-ui.yml

@@ -0,0 +1,62 @@
+name: Run UI tests
+
+on:
+  pull_request:
+    branches: [ main, '**-feature' ]
+    types: [ opened, synchronize, reopened]
+  push:
+    branches: [ main ]
+
+env:
+  NODE_VERSION: 22.13.1
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        name: Set up Node.js
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+          cache-dependency-path: ./package-lock.json
+
+      - uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
+      - name: Start services
+        working-directory: ./docker
+        run: docker compose up -d
+
+      - name: Run Playwright UI tests
+        env:
+          CI: true
+          PLAYWRIGHT_BASEURL: "http://localhost:8080"
+        run: npm run test:e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+
+      - name: Stop services
+        if: always()
+        working-directory: ./docker
+        run: docker compose stop

README.md

@@ -21,15 +21,58 @@ First, install dependencies by opening a terminal and running:
 script/setup
 ```
 
-To build project and launch in a browser run:
+To build project and and run on a local server, open a terminal inside the project and run:
 
 
 ```bash
 script/server
 ```
 
-To run tests and linting checks type:
+To run linting checks type:
 
 ```bash
 script/test
 ```
+
+## Docker
+
+Alternatively, you can run the application in a docker container. This will prevent the need to set up dependencies locally. 
+
+1. Start the docker engine
+2. Open a terminal inside the project and run:
+
+```bash
+# start
+npm run docker:start
+
+#stop
+npm run docker:stop
+```
+
+You will need to stop and start docker to reflect any changes in the project.
+
+## Tests
+
+This project does not have any unit tests, as it made up of static views with some minimal JavaScript imported from my [@lookupdaily/styles](https://github.com/lookupdaily/styles) package. 
+
+I have a suite of automated Playwright Tests to enable automated a11y testing for each page and for any interactivity (such as the collapsed menu on small screens).
+
+### Run tests
+
+1. Copy `.env.example` to a new `.env` file in the route of the project. 
+2. Make sure you have installed dependencies by running `script/setup`.
+3. Start the app, either [from the command line](#local-development) or [using Docker](#docker).
+4. Open a new terminal inside the project and run any of the following:
+
+```bash
+# run all tests in all browsers
+npm run test:e2e 
+
+# run all tests in chromium and record a trace
+npm run test:e2e:trace
+
+# run tests in UI mode
+npm run test:e2e:ui
+```
+
+See the Playwright docs for [different ways to run and debug tests](https://playwright.dev/docs/running-tests).

docker/Dockerfile

@@ -0,0 +1,23 @@
+ARG NODEJS_IMAGE_TAG=22-bullseye-slim
+
+FROM node:${NODEJS_IMAGE_TAG}
+
+RUN mkdir -p /app
+WORKDIR /app
+
+# Make sure the lock file is copied too
+COPY --link package*.json ./
+
+# Install app dependencies
+RUN npm ci
+
+# Copy app files
+COPY --link . .
+
+# Compile assets
+RUN npm run build:webpack
+
+EXPOSE 8080
+
+# Start app
+CMD [ "npm", "start" ]

docker/docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  app:
+    build:
+      context: ..
+      dockerfile: docker/Dockerfile
+    ports:
+      - "8080:8080/tcp"

package.json

@@ -9,12 +9,15 @@
 		"watch:webpack": "webpack --watch --mode=development",
 		"build:webpack": "webpack --mode=production",
 		"build": "npm run build:webpack && npm run build:eleventy",
-		"start": "npm run watch:webpack & npm run watch:eleventy",
+		"start": "npm run watch:eleventy",
+		"start:watch": "npm run build:webpack & npm run watch:eleventy",
 		"lint": "npx @biomejs/biome ci .",
 		"lint:fix": "npx @biomejs/biome check --write .",
 		"test:e2e": "npx playwright test",
 		"test:e2e:trace": "npx playwright test --project='chromium' --trace='on'",
-		"test:e2e:ui": "npx playwright test --project='chromium' --ui"
+		"test:e2e:ui": "npx playwright test --project='chromium' --ui",
+		"docker:start": "docker compose -f docker/docker-compose.yml up --build -d",
+		"docker:stop": "docker compose -f docker/docker-compose.yml down"
 	},
 	"keywords": [],
 	"author": "",

script/server

@@ -7,4 +7,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-npm start
+npm run start:watch

script/setup

@@ -9,3 +9,6 @@ cd "$(dirname "$0")/.."
 
 echo "==> Installing JavaScript dependencies..."
 npm install
+
+echo "==> Installing Playwright dependencies..."
+npx playwright install

tests/accessibility-tests/about.spec.ts

@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 import { AboutPage } from "../page-object-model/about-page";
 
-test.describe("Accessibility - Home page", () => {
+test.describe("Accessibility - About page", () => {
 	let aboutPage: AboutPage;
 	test.beforeEach(({ page }) => {
 		aboutPage = new AboutPage(page);

tests/accessibility-tests/cv.spec.ts

@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 import { CvPage } from "../page-object-model/cv-page";
 
-test.describe("Accessibility - Home page", () => {
+test.describe("Accessibility - CV page", () => {
 	let cvPage: CvPage;
 	test.beforeEach(({ page }) => {
 		cvPage = new CvPage(page);

tests/accessibility-tests/mobile.spec.ts

@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 import { HomePage } from "../page-object-model/home-page";
 
-test.describe("Accessibility - Home page", () => {
+test.describe("Accessibility - Small screen", () => {
 	let homePage: HomePage;
 	test.beforeEach(({ page }) => {
 		homePage = new HomePage(page);

views/_includes/templates/menu.njk

@@ -10,7 +10,7 @@
     </li>
     {# <li><a href="/projects/" {% if category == "Projects" %}data-state="active"{% endif %}><span class="nav__link__text">Projects</span></a></li> #}
     <li class="ld-header-nav__item">
-      <a class="ld-link ld-header-nav__link" href="/CV" {% if pageType == "cv" %}data-state="active"{% endif %}><span class="nav__link__text">CV</span></a>
+      <a class="ld-link ld-header-nav__link" href="/cv" {% if pageType == "cv" %}data-state="active"{% endif %}><span class="nav__link__text">CV</span></a>
     </li>
     <li class="ld-header-nav__item">
       <a class="ld-link ld-header-nav__link" href="https://github.com/lookupdaily">GitHub</a>

views/index.njk

@@ -15,7 +15,7 @@ description: Liz Daly is a front-end web developer interested in usability and i
   <div>
   <p class="ld-text-subtitle">A <a class="ld-link" href="https://makers.tech/">Maker</a> and frontend developer with a background in marketing & communications for arts and design events. I have an interest in usability and accessibility, and am currently building public services that change lives at  <a class="ld-link" href="https://www.dxw.com/">dxw</a>.</p>
 
-  <span class="ld-text-subtitle ld-link arrow"><a href="/CV">My CV</a><span class="material-icons">arrow_forward</span></span>
+  <span class="ld-text-subtitle ld-link arrow"><a href="/cv">My CV</a><span class="material-icons">arrow_forward</span></span>
   </div>
 
 </div>