Add showcase on executing E2E tests

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,22 @@
         "dev": "vite",
         "build": "tsc && vite build",
         "preview": "vite preview",
-        "prettier": "prettier -w ."
+        "prettier": "prettier -w .",
+        "test": "tsc && jest"
     },
     "devDependencies": {
+        "@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,46 @@
+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 either 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');
+  const flags = "--enable-features=IsolatedWebApps,IsolatedWebAppDevMode";
+  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: '/usr/bin/google-chrome',
+      headless: false,
+      pipe: true,
+      args: [flags]
+    });
+
+    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',
+};