Playwright tests

.gitignore

@@ -8,3 +8,4 @@ docs/libraries
 out
 .firebase
 .wireit
+dist

libraries/__shared__/tests/.gitignore

@@ -0,0 +1,2 @@
+harness
+test-results

libraries/__shared__/tests/advanced-tests.test.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {expect, test} from '@playwright/test';
+import {getProp, weight} from "./util";
+
+test.beforeEach(async ({page}) => {
+  await page.goto('/');
+})
+
+test.describe('advanced support', weight(2), () => {
+  test.describe('attributes and properties', () => {
+    test('will pass array data as a property', async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'arr')).toEqual(['c', 'u', 's', 't', 'o', 'm'])
+    })
+
+    test('will pass object data as a property', async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'obj')).toEqual({org: 'webcomponents', repo: 'custom-elements-everywhere'})
+    })
+
+    test("will pass object data to a camelCase-named property", async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'camelCaseObj')).toEqual({label: "passed"})
+    })
+  });
+
+  test.describe('events', weight(1), () => {
+
+    test("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", weight(2), async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/lowercase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/lowercase:/)).toHaveText(/true/);
+    })
+
+    test("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/camelCase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/camelCase:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/kebab-case:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/kebab-case:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/CAPScase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/CAPScase:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/PascalCase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/PascalCase:/)).toHaveText(/true/);
+    })
+  });
+})

libraries/__shared__/tests/basic-tests.test.js

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {expect, test} from '@playwright/test';
+import {getPropOrAttr, weight} from './util';
+
+
+test.beforeEach(async ({page}) => {
+  await page.goto('/');
+})
+
+test.describe("basic support", weight(3), () => {
+  test.describe("no children", () => {
+    test("can display a Custom Element with no children", async ({page}) => {
+      await expect(page.locator('#ce-without-children')).toBeAttached();
+    });
+  })
+
+  test.describe('with children', () => {
+    const expectHasChildren = async (wc) => {
+      await expect(wc.locator('h1')).toHaveText('Test h1');
+      await expect(wc.locator('p')).toHaveText('Test p');
+    }
+
+    test("can display a Custom Element with children in a Shadow Root", async ({page}) => {
+      await expectHasChildren(page.locator('#ce-with-children'))
+    })
+
+    test("can display a Custom Element with children in a Shadow Root and pass in Light DOM children", async ({page}) => {
+      const ce = page.locator('#ce-with-children-rerender');
+      await expectHasChildren(ce);
+      await expect(ce).toHaveText(/2/);
+    })
+
+    test('can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element', async ({page}) => {
+      const ce = page.locator('#ce-with-different-views')
+      const toggle = page.getByRole('button', {name: /toggle views/i});
+
+      await expectHasChildren(ce);
+
+      await toggle.click();
+      await expect(ce).toHaveText(/dummy view/i);
+
+      await toggle.click();
+      await expectHasChildren(ce);
+    })
+
+  });
+
+  test.describe('attributes and properties', () => {
+    test("will pass boolean data as either an attribute or a property", async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getPropOrAttr(ce, 'bool')).toEqual(true)
+    });
+
+    test("will pass numeric data as either an attribute or a property", async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(parseInt(await getPropOrAttr(ce, 'num'))).toEqual(42)
+    });
+
+    test("will pass string data as either an attribute or a property", async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getPropOrAttr(ce, 'str')).toEqual("custom")
+    });
+  });
+
+  test.describe('events', () => {
+    test("can imperatively listen to a DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-imperative-event');
+      const result = page.locator('#ce-with-imperative-event-handled');
+      await expect(result).toHaveText(/false/i);
+      await ce.click();
+      await expect(result).toHaveText(/true/i);
+    })
+  })
+
+});

libraries/__shared__/tests/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "tests",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "private": true,
+  "scripts": {
+    "serve": "http-server harness",
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.56.1",
+    "http-server": "^14.1.1"
+  },
+  "wireit": {
+    "test-files": {
+      "files": [
+        "advanced-tests.test.js",
+        "basic-tests.test.js",
+        "playwright.config.js",
+        "reporter.js",
+        "utils.js"
+      ]
+    }
+  }
+}

libraries/__shared__/tests/playwright.config.js

@@ -0,0 +1,44 @@
+import fs from 'node:fs'
+import {defineConfig, devices} from '@playwright/test';
+import * as path from "node:path";
+
+const ports = fs.readdirSync('../../', {withFileTypes: true})
+  .filter(d => d.isDirectory() && !d.name.startsWith('__'))
+  .reduce((acc, dir, idx) => {
+    acc[dir.name] = 8080 + idx;
+    return acc;
+  }, {})
+
+const workspace = path.basename(process.env.INIT_CWD);
+
+export default defineConfig({
+  use: {
+    baseURL: `http://localhost:${ports[workspace]}`,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {...devices['Desktop Chrome']},
+    },
+    {
+      name: 'firefox',
+      use: {...devices['Desktop Firefox']},
+    },
+  ],
+  webServer: {
+    command: `http-server ../../${workspace}/dist/ -p ${ports[workspace]}`,
+    port: process.env.PORT,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'pipe'
+  },
+  reporter: [
+    ['list'],
+    ['html', {
+      outputFolder: `../../${workspace}/results/`,
+      open: 'never',
+      title: workspace
+    }],
+    ['./reporter.js']
+  ]
+})

libraries/__shared__/tests/reporter.js

@@ -0,0 +1,67 @@
+import fs from 'node:fs';
+import path from "node:path";
+
+
+export default class CEEReporter {
+
+  results = {};
+
+  onTestEnd(test, result) {
+    const [_, _browser, _file, suite] = test.titlePath();
+    ((this.results ||= {})[suite] ||= {})[result.status] ||= 0
+    this.results[suite][result.status] += 1;
+    const weight = test.annotations.filter(({type}) => type === 'weight').toReversed()[0]?.description ?? 3;
+    (this.results.weight ||= {})[result.status] ||= 0;
+    this.results.weight[result.status] += weight
+  }
+
+  onEnd(result) {
+    const workspace = `../../${path.basename(process.env.INIT_CWD)}`;
+
+    const packageJson = JSON.parse(fs.readFileSync(`${workspace}/package.json`, 'utf-8'));
+    const pkg = packageJson.library_package
+    const version = packageJson.dependencies[pkg];
+
+    const basicPassed = this.results['basic support'].passed ?? 0;
+    const basicFailed = this.results['basic support'].failed ?? 0;
+    const advancedPassed = this.results['advanced support'].passed ?? 0;
+    const advancedFailed = this.results['advanced support'].failed ?? 0;
+
+    const weightedPassed = this.results.weight.passed ?? 0;
+    const weightedFailed = this.results.weight.failed ?? 0;
+    const totalWeight = weightedPassed + weightedFailed;
+
+    fs.mkdirSync(`${workspace}/results/`, {recursive: true})
+    fs.writeFileSync(`${workspace}/results/results.json`, JSON.stringify({
+      summary: {
+        success: basicPassed + advancedPassed,
+        failed: basicFailed + advancedFailed,
+        skipped: 0,
+        error: false,
+        disconnected: false,
+        exitCode: 0,
+        score: totalWeight === 0 ? 0 : 100 * weightedPassed / totalWeight,
+        basicSupport: {
+          total: basicPassed + basicFailed,
+          failed: basicFailed,
+          passed: basicPassed
+        },
+        advancedSupport: {
+          total: advancedPassed + advancedFailed,
+          failed: advancedFailed,
+          passed: advancedPassed
+        }
+      },
+      library: {
+        name: pkg,
+        version
+      }
+    }, null, 2));
+    fs.writeFileSync(`${workspace}/results/results.html`, `
+<html>
+<head>
+    <meta http-equiv="refresh" content="0; url=./index.html">
+</head>
+</html>`);
+  }
+}

libraries/__shared__/tests/util.js

@@ -0,0 +1,11 @@
+export const getProp = async (ce, name) => {
+  return await (await (await ce.elementHandle()).getProperty(name)).jsonValue()
+}
+
+export const getPropOrAttr = async (ce, name) => {
+  return await getProp(ce, name) ?? ce.getAttribute(name);
+}
+
+export const weight = (weight) => ({
+  annotation: {type: 'weight', description: weight}
+})

libraries/__shared__/webcomponents/package.json

@@ -1,11 +1,14 @@
 {
-  "name": "webcomponents",
+  "name": "wc",
   "version": "1.0.0",
   "description": "",
   "main": "xfoo.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "exports": {
+    "./*": "./src/*.js"
+  },
   "author": "",
   "license": "ISC",
   "devDependencies": {

libraries/angular/package.json

@@ -23,11 +23,11 @@
     "webpack": "5.101.0"
   },
   "dependencies": {
-    "@angular/common": "20.1.6",
+    "@angular/common": "16.2.10",
     "@angular/compiler": "16.2.10",
-    "@angular/core": "20.1.6",
-    "@angular/forms": "20.1.6",
-    "@angular/platform-browser": "20.1.6",
+    "@angular/core": "16.2.10",
+    "@angular/forms": "16.2.10",
+    "@angular/platform-browser": "16.2.10",
     "@angular/platform-browser-dynamic": "16.2.10",
     "@angular/router": "16.2.10",
     "core-js": "3.45.0",

libraries/hybrids/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <hybrids-without-children></hybrids-without-children>
+    <hybrids-with-children></hybrids-with-children>
+    <hybrids-with-children-rerender></hybrids-with-children-rerender>
+    <hybrids-with-different-views></hybrids-with-different-views>
+    <hybrids-with-properties></hybrids-with-properties>
+    <hybrids-with-declarative-event></hybrids-with-declarative-event>
+    <hybrids-with-imperative-event></hybrids-with-imperative-event>
+    <script type="module" src="./src/components.js"></script>
+  </body>
+</html>