wip: add mechanism for running tests in Playwright

This should replace the obsolete way of running tests using Karma. We do not want to run tests in virtual DOM (e.g. Jest), because it is a Potemkin village.
fczbkk · Jun 26, 2024 · 63ece67 · 63ece67
1 parent 0717e81
commit 63ece67
Show file tree

Hide file tree

Showing 17 changed files with 3,924 additions and 2,372 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@
 /temp/
 /esm/
 /types/
+/test-results/
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v20
+v22
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,8 @@
   "scripts": {
     "clean": "rimraf ./esm ./types ./temp",
     "test": "karma start ./tools/karma.conf.js",
+    "test:new": "tsx test/run-tests.ts",
+    "test:playwright": "playwright test playwright-tests/playwright.spec.ts --config playwright-tests/playwright.config.ts",
     "dev": "npm run test -- --no-single-run --auto-watch",
     "prebuild": "npm run clean && npm run lint:build",
     "postbuild": "rimraf ./temp",
@@ -35,32 +37,34 @@
     "scenarios": "tsx ./test/scenarios.ts"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.11",
-    "@types/mocha": "^10.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/chai": "^4.3.16",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^20.14.9",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "chai": "^4.3.7",
     "chalk": "^5.3.0",
-    "conventional-changelog-cli": "^4.1.0",
-    "esbuild": "^0.20.0",
+    "conventional-changelog-cli": "^5.0.0",
+    "esbuild": "^0.21.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^9.0.10",
-    "karma": "^6.4.2",
+    "husky": "^9.0.11",
+    "karma": "^6.4.3",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.2.0",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-webpack": "^5.0.1",
-    "lint-staged": "^15.2.1",
-    "mocha": "^10.2.0",
-    "playwright": "^1.41.2",
-    "prettier": "^3.2.5",
+    "lint-staged": "^15.2.7",
+    "mocha": "^10.5.1",
+    "playwright": "^1.45.0",
+    "prettier": "^3.3.2",
+    "puppeteer": "^22.12.0",
     "raw-loader": "^4.0.2",
     "ts-loader": "^9.5.1",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.1",
+    "tsx": "^4.15.7",
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   },
   "repository": {
@@ -70,5 +74,9 @@
   "homepage": "https://github.com/fczbkk/css-selector-generator/",
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.45.0",
+    "glob": "^10.4.2"
   }
 }
diff --git a/playwright-tests/.eslintrc.json b/playwright-tests/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "mocha": true,
+    "node": true
+  },
+  "root": false,
+  "parser": "@typescript-eslint/parser"
+}
diff --git a/playwright-tests/constants.ts b/playwright-tests/constants.ts
@@ -0,0 +1,9 @@
+import { URL } from "node:url";
+import { resolve } from "node:path";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export const TEMP_DIR = resolve(__dirname, "../temp");
+export const LIB_SRC_PATH = resolve(__dirname, "../src/index.ts");
+export const LIB_BUILD_DIR = resolve(TEMP_DIR, "lib");
+export const LIB_BUILD_PATH = resolve(LIB_BUILD_DIR, "index.js");
diff --git a/playwright-tests/fixture.blank-page.ts b/playwright-tests/fixture.blank-page.ts
@@ -0,0 +1,26 @@
+import type { Page } from "@playwright/test";
+
+export class BlankPage {
+  constructor(public readonly page: Page) {}
+
+  async setContent(content: string) {
+    await this.page.setContent(`
+    <!DOCTYPE html>
+    <html lang="en">
+      <body>${content}</body>
+    </html>
+  `);
+  }
+
+  async body() {
+    return this.page.locator("body");
+  }
+
+  async document(): Promise<Document> {
+    return this.page.evaluate("document");
+  }
+
+  async window() {
+    return this.page.evaluate("window");
+  }
+}
diff --git a/playwright-tests/fixtures.ts b/playwright-tests/fixtures.ts
@@ -0,0 +1,15 @@
+import { test as base } from "@playwright/test";
+import { BlankPage } from "./fixture.blank-page.js";
+
+type Fixtures = {
+  blankPage: BlankPage;
+};
+
+export const test = base.extend<Fixtures>({
+  blankPage: async ({ page }, use) => {
+    const blankPage = new BlankPage(page);
+    await use(blankPage);
+  },
+});
+
+export { expect } from "@playwright/test";
diff --git a/playwright-tests/global-setup.ts b/playwright-tests/global-setup.ts
@@ -0,0 +1,23 @@
+import { FullConfig } from "@playwright/test";
+import { promises as fs } from "node:fs";
+import { LIB_BUILD_DIR, LIB_BUILD_PATH, LIB_SRC_PATH } from "./constants.js";
+import { buildScript } from "./utilities.js";
+
+const __dirname = new URL(".", import.meta.url).pathname;
+
+async function buildLib() {
+  console.time("build lib");
+  await fs.mkdir(LIB_BUILD_DIR, { recursive: true });
+  await buildScript({
+    srcPath: LIB_SRC_PATH,
+    buildPath: LIB_BUILD_PATH,
+    globalName: "CssSelectorGenerator",
+  });
+  console.timeEnd("build lib");
+}
+
+async function globalSetup(config: FullConfig) {
+  await buildLib();
+}
+
+export default globalSetup;
diff --git a/playwright-tests/global-teardown.ts b/playwright-tests/global-teardown.ts
@@ -0,0 +1,5 @@
+async function globalTeardown() {
+  console.log("Global teardown");
+}
+
+export default globalTeardown;
diff --git a/playwright-tests/playwright.config.ts b/playwright-tests/playwright.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  globalSetup: "./global-setup.ts",
+  globalTeardown: "./global-teardown.ts",
+});
diff --git a/playwright-tests/playwright.spec.ts b/playwright-tests/playwright.spec.ts
@@ -0,0 +1,26 @@
+import { test, expect } from "./fixtures.js";
+import { sanitizeRoot } from "../src/utilities-options.js";
+
+test("selector test", async ({ blankPage }) => {
+  await blankPage.setContent("ahoj");
+  const body = await blankPage.body();
+  await expect(body).toHaveText("ahoj");
+});
+
+test("sanitize root", async ({ blankPage }) => {
+  await blankPage.page.exposeBinding("sanitizeRoot", sanitizeRoot);
+  const result = await blankPage.page.evaluate(() => {
+    const element = document.body.appendChild(document.createElement("div"));
+    return sanitizeRoot(document, element);
+  });
+
+  console.log("result", result);
+  expect(true).toBe(false);
+
+  /*
+    const element = root.appendChild(document.createElement("div"));
+    const result = sanitizeRoot(document, element);
+    assert.equal(result, document);
+
+   */
+});
diff --git a/playwright-tests/tsconfig.json b/playwright-tests/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "Node16"
+  }
+}
diff --git a/playwright-tests/utilities.ts b/playwright-tests/utilities.ts
@@ -0,0 +1,28 @@
+import type { BuildOptions } from "esbuild";
+import { build } from "esbuild";
+
+export interface BuildScriptProps {
+  srcPath: string;
+  buildPath: string;
+  globalName: string;
+  buildOptions?: BuildOptions;
+}
+
+// Uses EsBuild, builds a single file script optimized to be injected into the browser environment.
+export async function buildScript({
+  srcPath,
+  buildPath,
+  globalName,
+  buildOptions = {},
+}: BuildScriptProps) {
+  // TODO add caching support to prevent unnecessary rebuilds
+  return await build({
+    entryPoints: [srcPath],
+    outfile: buildPath,
+    bundle: true,
+    format: "iife",
+    globalName: globalName,
+    platform: "browser",
+    ...buildOptions,
+  });
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ @@
     /temp/
     /esm/
     /types/
+    /test-results/