Set up Playwright (udecode#2280)

* Set up Playwright * Test resizing tables * Comment out failing test * Add `g:playwright` script * Split ci-packages.yml into separate workflows * Linter fixes on e2e-examples * Fix type error * Debug GitHub workflow * Create install:playwright script * Debug * Exclude Playwright from Jest * Re-enable workflows * Update CONTRIBUTING * Fix resize row test * Fix typo
dylans · Mar 14, 2023 · d4d4798 · d4d4798
1 parent 3b09d88
commit d4d4798
Show file tree

Hide file tree

Showing 20 changed files with 1,333 additions and 25 deletions.
diff --git a/.github/workflows/lint-typecheck.yml b/.github/workflows/lint-typecheck.yml
@@ -0,0 +1,95 @@
+name: Lint and typecheck
+
+on:
+  push:
+    branches:
+      - main
+      - next
+    paths:
+      - 'packages/**'
+      - '.github/workflows/**'
+      - '.yarnrc.yml'
+      - 'yarn.lock'
+      - '.prettier*'
+      - '.eslint*'
+      - 'jest.config.js'
+      - 'lerna.json'
+      - 'tsconfig.json'
+      - 'config'
+      - 'scripts'
+      - 'patches'
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'packages/**'
+      - '.github/workflows/**'
+      - '.yarnrc.yml'
+      - 'yarn.lock'
+      - '.prettier*'
+      - '.eslint*'
+      - 'jest.config.js'
+      - 'lerna.json'
+      - 'tsconfig.json'
+      - 'config'
+      - 'scripts'
+      - 'patches'
+
+jobs:
+  lint-typecheck:
+    name: ${{ matrix.command }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          # Fetch all git history so that yarn workspaces --since can compare with the correct commits
+          # @link https://github.com/actions/checkout#fetch-all-history-for-all-tags-and-branches
+          fetch-depth: 0
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.x
+
+      # Why not using setup-node 2.2+ cache option (yet) ?
+      # see https://github.com/belgattitude/nextjs-monorepo-example/pull/369
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - name: Restore yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: yarn-cache-folder-${{ hashFiles('**/yarn.lock', '.yarnrc.yml') }}
+          restore-keys: |
+            yarn-cache-folder-
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            ${{ github.workspace }}/.cache
+            ${{ github.workspace }}/**/tsconfig.tsbuildinfo
+          key: ${{ runner.os }}-packages-cache-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('packages/**.[jt]sx?', 'packages/**.json') }}
+          restore-keys: |
+            ${{ runner.os }}-packages-cache-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Install
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install
+
+      # Build packages that have changed (--include & --since), assuming that
+      # apps build are done already. Otherwise --from & --since
+      - name: Build
+        run: yarn g:build
+
+      # Lint packages that have changed (--include & --since)
+      - name: Lint
+        run: yarn g:lint-changed
+
+      # Typecheck packages that have changed (--include & --since)
+      - name: Test
+        run: yarn g:typecheck-changed
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
@@ -0,0 +1,104 @@
+name: Playwright tests
+
+on:
+  push:
+    branches:
+      - main
+      - next
+    paths:
+      - 'packages/**'
+      - '.github/workflows/**'
+      - '.yarnrc.yml'
+      - 'yarn.lock'
+      - '.prettier*'
+      - '.eslint*'
+      - 'jest.config.js'
+      - 'lerna.json'
+      - 'tsconfig.json'
+      - 'config'
+      - 'scripts'
+      - 'patches'
+      - 'playwright/**'
+      - 'examples/apps/e2e-examples/**'
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'packages/**'
+      - '.github/workflows/**'
+      - '.yarnrc.yml'
+      - 'yarn.lock'
+      - '.prettier*'
+      - '.eslint*'
+      - 'jest.config.js'
+      - 'lerna.json'
+      - 'tsconfig.json'
+      - 'config'
+      - 'scripts'
+      - 'patches'
+      - 'playwright/**'
+      - 'examples/apps/e2e-examples/**'
+
+jobs:
+  test-e2e:
+    name: ${{ matrix.command }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          # Fetch all git history so that yarn workspaces --since can compare with the correct commits
+          # @link https://github.com/actions/checkout#fetch-all-history-for-all-tags-and-branches
+          fetch-depth: 0
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.x
+
+      # Why not using setup-node 2.2+ cache option (yet) ?
+      # see https://github.com/belgattitude/nextjs-monorepo-example/pull/369
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - name: Restore yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: yarn-cache-folder-${{ hashFiles('**/yarn.lock', '.yarnrc.yml') }}
+          restore-keys: |
+            yarn-cache-folder-
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            ${{ github.workspace }}/.cache
+            ${{ github.workspace }}/**/tsconfig.tsbuildinfo
+          key: ${{ runner.os }}-packages-cache-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('packages/**.[jt]sx?', 'packages/**.json') }}
+          restore-keys: |
+            ${{ runner.os }}-packages-cache-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Install
+        run: YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install
+
+      - name: Install Playwright dependencies
+        run: yarn install:playwright
+
+      # Build packages that have changed (--include & --since), assuming that
+      # apps build are done already. Otherwise --from & --since
+      - name: Build
+        run: yarn g:build
+
+      - name: Run Playwright tests
+        run: yarn g:playwright
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.github/workflows/ci-packages.yml → .github/workflows/test.yml b/.github/workflows/ci-packages.yml → .github/workflows/test.yml
@@ -1,4 +1,4 @@
-name: CI-packages
+name: Jest tests
 
 on:
   push:
@@ -38,7 +38,7 @@ on:
       - 'patches'
 
 jobs:
-  ci:
+  test:
     name: ${{ matrix.command }}
     runs-on: ubuntu-latest
     steps:
@@ -86,10 +86,6 @@ jobs:
       - name: Build
         run: yarn g:build
 
-      # Lint packages that have changed (--include & --since)
-      - name: Lint
-        run: yarn g:lint-changed
-
       # Test packages that have changed (--include & --since)
       - name: Test
         run: yarn g:test:root

diff --git a/.gitignore b/.gitignore
@@ -118,4 +118,7 @@ packages/plate/docs/
 config/typedoc/
 !config/typedoc/_redirects
 # Local Netlify folder
-.netlify
+.netlify
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -115,7 +115,7 @@ yarn g:build
 #### How to: Create a plate plugin
 
 - create file `createXPlugin.ts`
-    
+
     ```tsx
     import { createPluginFactory } from '@udecode/plate-core';
 
@@ -152,7 +152,7 @@ isElement: true
 isInline: true
 ```
 - create the components in `/components`
-        
+
 - is void?
   - add to plugin: 
 ```tsx
@@ -190,6 +190,36 @@ to `yarn g:test` with specific parameters. Available modes include
 tests in watch mode, output code coverage, and run selected test suites
 serially in the current process.
 
+#### Run Playwright tests
+
+We use Playwright for running end-to-end (e2e) tests in headless browsers.
+The React app for these tests use can be found in `/examples/apps/e2e-examples`.
+
+Install Playwright's browsers and dependencies:
+
+```sh
+yarn install:playwright # first time
+```
+
+To run all tests:
+
+```sh
+yarn g:playwright
+```
+
+To debug a specific test:
+
+```sh
+yarn g:playwright --debug playwright/table.spec.ts
+```
+
+You can use Playwright's [codegen](https://playwright.dev/docs/codegen)
+feature by running:
+
+```sh
+yarn playwright codegen
+```
+
 #### Updating Tests
 
 Before any contributions are submitted in a PR, make sure to add or

diff --git a/examples/apps/e2e-examples/.gitignore b/examples/apps/e2e-examples/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/apps/e2e-examples/index.html b/examples/apps/e2e-examples/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/apps/e2e-examples/package.json b/examples/apps/e2e-examples/package.json
@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "e2e-examples",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "yarn build && yarn preview"
+  },
+  "dependencies": {
+    "examples": "link:../../src"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}