[fix] enable Legacy Test Script based on Jest & Puppeteer (fix #14)

.github/workflows/main.yml

@@ -6,6 +6,9 @@ on:
 jobs:
     Build-and-Publish:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
         steps:
             - uses: actions/checkout@v4
 

.gitignore

@@ -3,5 +3,6 @@ package-lock.json
 dist/
 .parcel-cache/
 docs/
+.env
 .vscode/
-test/yarn.lock
+yarn.lock

ReadMe.md

@@ -9,7 +9,7 @@
 
 ## Demo
 
-https://web-cell.dev/WebCell-scaffold/
+https://web-cell.dev/cell-router/preview/
 
 ## Feature
 

package.json

@@ -39,6 +39,7 @@
         "@parcel/transformer-typescript-tsc": "~2.13.0",
         "@parcel/transformer-typescript-types": "~2.13.0",
         "@types/jest": "^29.5.14",
+        "dotenv": "^16.4.5",
         "element-internals-polyfill": "^1.3.12",
         "fs-match": "^1.7.2",
         "husky": "^9.1.7",
@@ -58,11 +59,11 @@
     },
     "scripts": {
         "prepare": "husky",
-        "set-chrome": "app-find chrome -c",
+        "install": "app-find chrome msedge firefox -c",
         "preview": "cd test/  &&  rimraf ../.parcel-cache/ dist/  &&  parcel --open",
         "pack-preview": "cd test/  &&  rimraf ../.parcel-cache/ dist/  &&  parcel build --public-url=. --dist-dir=../docs/preview/",
         "pack-dist": "rimraf dist/  &&  parcel build source/index.ts",
-        "test": "lint-staged  &&  npm run pack-dist  &&  npm run pack-preview",
+        "test": "lint-staged  &&  npm run pack-preview  &&  jest --forceExit",
         "pack-docs": "rimraf docs/  &&  typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs",
         "help": "npm run pack-docs  &&  web-server docs/ -o",
@@ -75,7 +76,8 @@
         "tabWidth": 4
     },
     "jest": {
-        "preset": "ts-jest"
+        "preset": "ts-jest",
+        "testTimeout": 10000
     },
     "lint-staged": {
         "*.{html,md,json,ts,tsx}": "prettier --write"

test/browser.ts

@@ -1,23 +1,27 @@
+import 'dotenv/config';
+
 import { WebServer } from 'koapache';
-import Puppeteer, { Browser, Page } from 'puppeteer-core';
+import { launch, Browser, Page } from 'puppeteer-core';
 
-const { npm_config_chrome } = process.env;
+const { CI, chrome, msedge, firefox } = process.env;
 
 var server: string, browser: Browser, page: Page;
 
 export async function bootServer() {
     if (server) return server;
 
     const { address, port } = await new WebServer({
-        staticPath: 'test/dist/'
+        staticPath: 'docs/preview/'
     }).workerHost();
 
     return (server = `http://${address}:${port}/`);
 }
 
 export async function getPage(path: string) {
-    browser ||= await Puppeteer.launch({
-        executablePath: npm_config_chrome,
+    browser ||= await launch({
+        browser: chrome || msedge ? 'chrome' : 'firefox',
+        executablePath: chrome || msedge || firefox,
+        headless: !!CI,
         slowMo: 200
     });
     page ||= (await browser.pages())[0];
@@ -33,11 +37,10 @@ export async function expectPage(
     title: string,
     path: string
 ) {
-    expect(
-        await page.$eval(selector, tag => [
-            tag.textContent,
-            document.title,
-            window.location.hash
-        ])
-    ).toStrictEqual(expect.arrayContaining([content, title, path]));
+    const result = await page.$eval(selector, tag => [
+        tag.textContent,
+        document.title,
+        window.location.hash
+    ]);
+    expect(result).toEqual([content, title, path]);
 }

test/index.spec.ts

@@ -13,26 +13,31 @@ describe('Top router', () => {
     it('should render Route components', async () => {
         expect(await page.$eval('body', tag => tag.innerHTML.trim())).toBe(
             '<nav><a href="#list/1">List page</a>' +
-                '<a href="#detail/2?edit=true">Detail page</a></nav>' +
-                '<main class="router"><cell-route path="#list/:id" start-class="start" end-class="end"></cell-route>' +
-                '<cell-route path="#detail/:id" start-class="start" end-class="end"></cell-route></main>'
+                '<a href="#detail/2?edit=true">Detail page</a>' +
+                '<a href="#async/3?edit=true">Async page</a></nav>' +
+                '<main class="router">' +
+                '<cell-route path="#"><div>Home Page</div></cell-route>' +
+                '<cell-route path="#list/:id"></cell-route>' +
+                '<cell-route path="#detail/:id"></cell-route>' +
+                '<cell-route path="#async/:id"></cell-route>' +
+                '</main>'
         );
     });
 
     it('should turn to a page after clicking a link', async () => {
-        await page.click('nav a:first-child');
+        await page.click('nav a:nth-child(1)');
 
         await expectPage(
-            'cell-route:first-of-type',
+            'cell-route:nth-child(2)',
             'Path: #list/1' + 'Data: {"id":"1"}',
             'List page',
             '#list/1'
         );
 
-        await page.click('nav a:last-child');
+        await page.click('nav a:nth-child(2)');
 
         await expectPage(
-            'cell-route:last-of-type',
+            'cell-route:nth-child(3)',
             'Path: #detail/2?edit=true' + 'Data: {"id":"2","edit":true}',
             'Detail page',
             '#detail/2?edit=true'
@@ -43,17 +48,17 @@ describe('Top router', () => {
         await page.goBack();
 
         await expectPage(
-            'cell-route:first-of-type',
-            'Path: /#list/1' + 'Data: {"id":"1"}',
+            'cell-route:nth-child(2)',
+            'Path: #list/1' + 'Data: {"id":"1"}',
             'List page',
             '#list/1'
         );
 
         await page.goForward();
 
         await expectPage(
-            'cell-route:last-of-type',
-            'Path: /#detail/2?edit=true' + 'Data: {"id":"2","edit":true}',
+            'cell-route:nth-child(3)',
+            'Path: #detail/2?edit=true' + 'Data: {"id":"2","edit":true}',
             'Detail page',
             '#detail/2?edit=true'
         );
@@ -63,34 +68,45 @@ describe('Top router', () => {
         await page.reload();
 
         await expectPage(
-            'cell-route:last-of-type',
-            'Path: /#detail/2?edit=true' + 'Data: {"id":"2","edit":true}',
+            'cell-route:nth-child(3)',
+            'Path: #detail/2?edit=true' + 'Data: {"id":"2","edit":true}',
             'Detail page',
             '#detail/2?edit=true'
         );
 
         await page.goBack();
 
         await expectPage(
-            'cell-route:first-of-type',
-            'Path: /#list/1' + 'Data: {"id":"1"}',
+            'cell-route:nth-child(2)',
+            'Path: #list/1' + 'Data: {"id":"1"}',
             'List page',
             '#list/1'
         );
 
         await page.goBack();
 
-        await expectPage('cell-route', '', 'Cell Router', '');
+        await expectPage('cell-route', 'Home Page', 'Cell Router', '');
     });
 
     it('should render a page based on Changed Hash', async () => {
         await page.evaluate(() => (location.hash = '#list/1'));
 
         await expectPage(
-            'cell-route:first-of-type',
-            'Path: /#list/1' + 'Data: {"id":"1"}',
+            'cell-route:nth-child(2)',
+            'Path: #list/1' + 'Data: {"id":"1"}',
             'List page',
             '#list/1'
         );
     });
+
+    it('should load an Async Page component', async () => {
+        await page.click('nav a:nth-child(3)');
+
+        await expectPage(
+            'cell-route:nth-child(4) h1',
+            'Async',
+            'Async page',
+            '#async/3?edit=true'
+        );
+    });
 });