Update

.github/workflows/build.yml

@@ -28,10 +28,10 @@ jobs:
     steps:
 
     # Setup
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         # Match Development Node Version
         node-version: '20.x'
@@ -78,7 +78,7 @@ jobs:
       if: inputs.test
       run: npm run playwright-test
 
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: inputs.test
       with:
         name: playwright-report

.github/workflows/pages.yml

@@ -44,4 +44,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

README.md

@@ -1,3 +1,6 @@
 # website
 
 Simple Website Template
+
+[![main CI](https://github.com/wandyezj/website/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/wandyezj/website/actions/workflows/main.yml)
+[![Pages](https://github.com/wandyezj/website/actions/workflows/pages.yml/badge.svg?branch=main)](https://github.com/wandyezj/website/actions/workflows/pages.yml)

package.json

@@ -35,21 +35,20 @@
     "homepage": "https://github.com/wandyezj/website#readme",
     "dependencies": {},
     "devDependencies": {
-        "@playwright/test": "^1.41.2",
-        "@types/node": "^18.7.17",
-        "playwright": "^1.41.2",
-        "@typescript-eslint/eslint-plugin": "^7.0.2",
-        "@typescript-eslint/parser": "^7.0.2",
-        "eslint": "^8.57.0",
+        "@playwright/test": "^1.44.1",
+        "@types/node": "^20.14.2",
+        "@typescript-eslint/eslint-plugin": "^7.13.0",
+        "@typescript-eslint/parser": "^7.13.0",
+        "eslint": "^8.56.0",
         "cspell": "8.4.1",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.2",
         "clean-webpack-plugin": "^4.0.0",
         "copy-webpack-plugin": "^12.0.2",
-        "html-webpack-plugin": "^5.5.0",
+        "html-webpack-plugin": "^5.6.0",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.3.3",
-        "webpack": "^5.90.3",
+        "typescript": "^5.4.5",
+        "webpack": "^5.92.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.1"
+        "webpack-dev-server": "^5.0.4"
     }
 }

tests/distConstants.ts

@@ -0,0 +1,7 @@
+import path from "path";
+import { getRootDirectory } from "./getRootDirectory";
+
+export const localDistPath = path.resolve(getRootDirectory(), "dist");
+
+export const rootUrlLocal = "https://localhost:3000";
+export const rootUrlProduction = "https://wandyezj.github.io/website";

tests/getLocalDistData.ts

@@ -0,0 +1,16 @@
+import * as fs from "fs";
+import path from "path";
+import { localDistPath } from "./distConstants";
+
+export function getLocalDistData(subpath: string) {
+    /**
+     * Local generated file from build
+     */
+    const localDistDataPath = path.resolve(localDistPath, subpath);
+    if (!fs.existsSync(localDistDataPath)) {
+        throw new Error(`cannot find localDistDataPath ${localDistDataPath}`);
+    }
+
+    const localDistData = fs.readFileSync(localDistDataPath);
+    return localDistData;
+}

tests/getSource.ts

@@ -0,0 +1,43 @@
+/**
+ * Route to use for testing
+ */
+export enum Source {
+    /**
+     * (default)
+     * Use local dist.
+     * Most robust for testing in a pipeline.
+     */
+    Dist,
+
+    /**
+     * Use local server.
+     * Most useful for development.
+     */
+    Localhost,
+
+    /**
+     * Use production url
+     */
+    Production,
+}
+
+const sourceDefault = Source.Dist;
+const sourceOverride: Source | undefined = undefined;
+
+export function getSource() {
+    if (sourceOverride !== undefined) {
+        return sourceOverride;
+    }
+
+    const testMode = process.env["TEST_MODE"];
+
+    if (testMode === "dist") {
+        return Source.Dist;
+    }
+
+    if (testMode === "localhost") {
+        return Source.Localhost;
+    }
+
+    return sourceDefault;
+}

tests/index.spec.ts

@@ -1,7 +1,9 @@
 import { test, expect } from "@playwright/test";
-import { mainPageTitle, navigateToMainPage } from "./navigateToMainPage";
+
+import { navigateToPage } from "./navigateToPage";
+const mainPageTitle = "Website";
 
 test("navigates to correct page title", async ({ browser }) => {
-    const page = await navigateToMainPage(browser);
+    const page = await navigateToPage(browser, "index.html", mainPageTitle);
     await expect(page).toHaveTitle(mainPageTitle);
 });

tests/navigateToPage.ts

@@ -0,0 +1,33 @@
+import { expect, Page, Browser } from "@playwright/test";
+import { getLocalDistData } from "./getLocalDistData";
+import { getSource, Source } from "./getSource";
+import { rootUrlLocal, rootUrlProduction } from "./distConstants";
+
+export async function navigateToPage(browser: Browser, subpath: string, title: string): Promise<Page> {
+    // Create a separate browser context for each test
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    const useSource = getSource();
+    const rootUrl = useSource === Source.Localhost ? rootUrlLocal : rootUrlProduction;
+    const pageUrl = rootUrl + "/" + subpath;
+
+    // redirect to local data
+    if (useSource === Source.Dist) {
+        // interceptor to replace content of the page
+        page.route(`${rootUrl}/*`, (route, request) => {
+            const url = request.url();
+            const subpath = url.substring(rootUrl.length + 1);
+            const body = getLocalDistData(subpath);
+            route.fulfill({
+                body,
+            });
+        });
+    }
+
+    await page.goto(pageUrl);
+
+    // Check that the page is the right one
+    await expect(page).toHaveTitle(title);
+
+    return page;
+}