Add tests

.github/workflows/ci.yml

@@ -0,0 +1,18 @@
+name: UI testing
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - run: npm install
+      - name: Start dev server
+        run: npm run dev > /dev/null 2>&1 &
+      - name: Run tests
+        run: npm run test

.github/workflows/preview.yml

@@ -4,7 +4,7 @@ name: Clever Cloud Review App on Pull Requests
 
 on:
   workflow_run:
-    workflows: ["Build"]
+    workflows: ["UI testing"]
     types:
       - completed
   pull_request_target:

jest.config.js

@@ -0,0 +1,8 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  testEnvironment: "node",
+  transform: {
+    "^.+.ts?$": ["ts-jest", {}],
+  },
+  preset: "jest-puppeteer",
+};

package.json

@@ -7,12 +7,16 @@
     "start": "npx serve -l 8080 dist-prod -s",
     "dev": "npx vite",
     "build": "npx vite build",
+    "test": "jest",
     "preview": "npx vite preview",
     "stylelint": "stylelint 'src/**/*.scss'",
     "stylelint-fix": "stylelint 'src/**/*.scss' --fix"
   },
   "devDependencies": {
     "@scala-js/vite-plugin-scalajs": "1.0.0",
+    "@types/jest": "^29.5.13",
+    "jest": "^29.7.0",
+    "jest-puppeteer": "^10.1.1",
     "puppeteer": "^23.3.1",
     "puppeteer-core": "^23.3.1",
     "sass": "^1.71.1",
@@ -22,6 +26,7 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-scss": "^6.1.0",
+    "ts-jest": "^29.2.5",
     "typescript": "4.9.5",
     "vite": "^5.1.4",
     "vite-plugin-html": "^3.2.2"

tests/router.spec.ts

@@ -0,0 +1,31 @@
+import puppeteer from "puppeteer";
+
+describe("Router", () => {
+  const nantes2024TalkSlug = "armored-type-safety-with-iron";
+  const nantes2024TalkTitle = "Armored type safety with Iron";
+
+  it("Should display talks accessed from direct URL", async () => {
+    // Launch the browser and open a new blank page
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+
+    // Check that legacy URLs are redirected to the new ones
+    await page.goto(`http://localhost:5173/talks/${nantes2024TalkSlug}`);
+    await page.waitForSelector(`h1 ::-p-text(${nantes2024TalkTitle})`);
+
+    await browser.close();
+  });
+
+  it("Should display talks accessed from legacy talk route", async () => {
+    // Launch the browser and open a new blank page
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+
+    await page.goto(
+      `http://localhost:5173/talks/nantes-2024/${nantes2024TalkSlug}/`
+    );
+    await page.waitForSelector(`h1 ::-p-text(${nantes2024TalkTitle})`);
+
+    await browser.close();
+  });
+});

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}