Playwright (#813)

* test: use playwright

* test: resurect first test

* fix

* fix

* fix

* fix

* fix

.github/workflows/ci.yml

@@ -0,0 +1,49 @@
+name: Continuous Integration
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+      - name: lint
+        run: pnpm lint
+
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+      - name: tsc
+        run: pnpm tsc
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+      - name: test
+        run: npm exec playwright install && pnpm test
+

.gitignore

@@ -2,4 +2,8 @@ node_modules/
 example/dist/
 lib/
 npm-debug.log
-.rpt2_cache
+.rpt2_cache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -19,14 +19,15 @@
     "build:prod:es5": "rollup -c scripts/prod.es5.js",
     "build": "npm-run-all --serial build:prod:* && tsc",
     "start": "npm-run-all --parallel storybook",
-    "test": "cross-env NODE_ENV='test' tsc -p tsconfig.test.json && avaron lib/index.test.js --renderer",
+    "test": "npm run test-ct",
     "test:ci": "npm run flow && npm run build",
     "prepublish": "npm run build",
     "format": "prettier --write '**/*.{tsx,ts}'",
     "format:ci": "prettier '**/*.{tsx,ts}'",
     "storybook": "start-storybook -p 6066",
     "build-storybook": "build-storybook",
-    "deploy": "npm run build-storybook && gh-pages -d storybook-static"
+    "deploy": "npm run build-storybook && gh-pages -d storybook-static",
+    "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "repository": {
     "type": "git",
@@ -48,6 +49,7 @@
     "@babel/traverse": "7.11.5",
     "@babel/types": "7.11.5",
     "@emotion/core": "10.0.35",
+    "@playwright/experimental-ct-react": "^1.43.1",
     "@storybook/addon-info": "5.3.21",
     "@storybook/addon-options": "5.3.21",
     "@storybook/react": "6.0.28",
@@ -72,6 +74,8 @@
     "gh-pages": "3.1.0",
     "npm-run-all": "4.1.5",
     "prettier": "1.19.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",
@@ -92,15 +96,6 @@
   "files": [
     "lib"
   ],
-  "avaron": {
-    "babel": "inherit",
-    "require": [
-      "babel-polyfill",
-      "babel-register"
-    ],
-    "fixture": "./test/fixture.html"
-  },
-  "dependencies": {},
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"

playwright-ct.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: 'src',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+});

playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

playwright/index.tsx

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';