Playwright tests

Author: mrginglymus

libraries/__shared__/tests/.gitignore

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

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

@@ -0,0 +1,95 @@
+/**
+ * @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';
+
+test.beforeEach(async ({page}) => {
+  await page.goto('/react');
+})
+
+
+test.describe("basic support", () => {
+  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-renderer');
+        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', () => {
+    const getPropOrAttr = async (ce, name) => {
+      const prop = await (await (await ce.elementHandle()).getProperty(name)).jsonValue()
+      const attr = ce.getAttribute(name);
+      return prop ?? attr;
+    }
+
+    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("React")
+    });
+  });
+
+  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,16 @@
+{
+  "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"
+  }
+}

libraries/__shared__/tests/playwright.config.js

@@ -0,0 +1,20 @@
+import {defineConfig, devices} from '@playwright/test';
+
+export default defineConfig({
+  use: {
+    baseURL: 'http://localhost:8080',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run serve',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'pipe'
+  }
+})

libraries/react/package.json

@@ -1,5 +1,6 @@
 {
   "scripts": {
+    "build:test": "wireit",
     "test": "wireit",
     "build": "wireit"
   },
@@ -16,13 +17,20 @@
     "karma-firefox-launcher": "2.1.3",
     "karma-sourcemap-loader": "0.4.0",
     "karma-webpack": "5.0.1",
-    "webpack": "5.101.0"
+    "webpack": "5.101.0",
+    "vite": "^7.2.2"
   },
   "dependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
+  "imports": {
+    "#*": "../__shared__/webcomponents/src/*"
+  },
   "wireit": {
+    "build:test": {
+      "command": "vite build"
+    },
     "test": {
       "dependencies": [
         "../..:karma-plugins"