Merge pull request GoogleChromeLabs#7 from f3bot/e2e-tests

Feature: Add End-To-End testing showcase

Author: f3bot

vite-iwa-template/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+    preset: "ts-jest",
+    testEnvironment: "node",
+};

vite-iwa-template/package-lock.json

@@ -8,17 +8,23 @@
         "dev": "vite",
         "build": "tsc && vite build",
         "preview": "vite preview",
-        "prettier": "prettier -w ."
+        "prettier": "prettier -w .",
+        "test": "tsc && jest"
     },
     "devDependencies": {
+        "@puppeteer/browsers": "^2.10.10",
+        "@types/jest": "^30.0.0",
         "@types/trusted-types": "^2.0.7",
         "dompurify": "^3.2.6",
         "dotenv": "^17.2.0",
+        "jest": "^30.2.0",
         "prettier": "^3.6.2",
+        "puppeteer-core": "^24.22.3",
         "rollup-plugin-webbundle": "^0.2.0",
+        "ts-jest": "^29.4.4",
         "typescript": "~5.8.3",
         "vite": "^7.0.4",
         "vite-plugin-html-inject": "^1.1.2",
-        "wbn-sign": "^0.2.1"
+        "wbn-sign": "^0.2.4"
     }
 }

vite-iwa-template/package.json

@@ -0,0 +1,43 @@
+import * as puppeteer from "puppeteer-core";
+import * as path from "path";
+import * as wbnSign from "wbn-sign";
+import * as fs from "fs";
+
+/*
+  If you want to debug E2E tests, you will need to create a custom debug launch configuration
+  https://code.visualstudio.com/docs/debugtest/debugging-configuration
+
+  Alternatively, you can use a test runner extension. 
+  https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
+*/
+describe("E2E Tests", () => {
+    let browser: puppeteer.Browser;
+    let session: puppeteer.CDPSession;
+    let manifestID: string;
+
+    const bundlePath = path.join(process.cwd(), "dist", "iwa-template.swbn");
+    test("IWA Should be installed and launched correctly", async () => {
+        const bundleContent = new Uint8Array(await fs.promises.readFile(bundlePath));
+        manifestID = wbnSign.getBundleId(bundleContent);
+
+        browser = await puppeteer.launch({
+            executablePath: puppeteer.executablePath("chrome"),
+            headless: false,
+            pipe: true,
+            args: ["--enable-features=IsolatedWebApps,IsolatedWebAppDevMode"],
+        });
+
+        session = await browser.target().createCDPSession();
+
+        await session.send("PWA.install", {
+            manifestId: `isolated-app://${manifestID}`,
+            installUrlOrBundleUrl: `file://${bundlePath}`,
+        });
+
+        await session.send("PWA.launch", {
+            manifestId: `isolated-app://${manifestID}`,
+        });
+
+        await browser.close();
+    }, 300000);
+});

vite-iwa-template/tests/e2e-tests.test.ts

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "types": ["trusted-types"],
+        "types": ["trusted-types", "jest"],
         "target": "ES2022",
         "useDefineForClassFields": true,
         "module": "ESNext",
@@ -10,7 +10,6 @@
         /* Bundler mode */
         "moduleResolution": "bundler",
         "allowImportingTsExtensions": true,
-        "verbatimModuleSyntax": true,
         "moduleDetection": "force",
         "noEmit": true,
 
@@ -22,5 +21,5 @@
         "noFallthroughCasesInSwitch": true,
         "noUncheckedSideEffectImports": true
     },
-    "include": ["src"]
+    "include": ["src", "tests"]
 }

vite-iwa-template/tsconfig.json

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+    preset: "ts-jest",
+    testEnvironment: "node",
+};