Merge pull request #81 from davidmyersdev/refactor-plugins

Add Playwright

.github/actions/build-core/action.yml

@@ -0,0 +1,7 @@
+name: Build core
+description: Build the core package
+runs:
+  using: composite
+  steps:
+    - shell: bash
+      run: pnpm core:build

.github/actions/build-svelte/action.yml

@@ -0,0 +1,8 @@
+name: Build Svelte
+description: Build the Svelte wrapper
+runs:
+  using: composite
+  steps:
+    - uses: ./.github/actions/build-core
+    - shell: bash
+      run: pnpm svelte:build

.github/actions/build-vue/action.yml

@@ -0,0 +1,8 @@
+name: Build Vue
+description: Build the Vue wrapper
+runs:
+  using: composite
+  steps:
+    - uses: ./.github/actions/build-core
+    - shell: bash
+      run: pnpm vue:build

.github/actions/install-dependencies/action.yml

@@ -0,0 +1,21 @@
+name: Install dependencies
+description: Install with cached dependencies
+runs:
+  using: composite
+  steps:
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - uses: pnpm/[email protected]
+      with:
+        run_install: false
+        version: 8
+    - shell: bash
+      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+    - uses: actions/cache@v3
+      with:
+        key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        path: ${{ env.STORE_PATH }}
+        restore-keys: v1-${{ runner.os }}-pnpm-store-
+    - shell: bash
+      run: pnpm install

.github/workflows/ci.yml

@@ -5,13 +5,55 @@ on:
     branches:
       - main
 jobs:
-  check:
+  build-core:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: pnpm/action-setup@v2
-      - run: pnpm install
-      - run: pnpm run ci
+      - uses: ./.github/actions/install-dependencies
+      - uses: ./.github/actions/build-core
+  build-svelte:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - uses: ./.github/actions/build-core
+      - uses: ./.github/actions/build-svelte
+  build-vue:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - uses: ./.github/actions/build-core
+      - uses: ./.github/actions/build-vue
+  check-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - run: pnpm -r docs:check
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - run: pnpm -r lint
+  test-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - run: pnpm playwright install --with-deps
+      - run: pnpm -r test:e2e
+  test-unit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - run: pnpm -r test:unit
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - uses: ./.github/actions/build-core
+      - run: pnpm typecheck

.github/workflows/publish.yml

@@ -8,11 +8,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: pnpm/action-setup@v2
-      - run: pnpm install
-      - run: pnpm run ci
+      - uses: ./.github/actions/install-dependencies
+      - uses: ./.github/actions/build-core
+      - uses: ./.github/actions/build-svelte
+      - uses: ./.github/actions/build-vue
       - run: pnpm config set '//registry.npmjs.org/:_authToken' ${{ secrets.NPM_PUBLISH_TOKEN }}
       - run: pnpm publish --access public --no-git-checks

.gitignore

@@ -3,3 +3,9 @@
 dist
 node_modules
 tmp
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -88,7 +88,6 @@
     "build": "run-s core:build && run-p svelte:build vue:build",
     "ci": "run-p ci:*",
     "ci:build": "run-s build",
-    "ci:test": "run-s test:once",
     "ci:lint": "run-s lint",
     "ci:docs": "run-s docs:check",
     "ci:dedupe": "pnpm dedupe --use-stderr",
@@ -109,7 +108,8 @@
     "svelte:build": "run-s svelte:clean && pnpm --filter svelte build",
     "svelte:clean": "rimraf ./svelte/dist",
     "test": "run-s test:watch",
-    "test:once": "vitest run",
+    "test:e2e": "playwright test",
+    "test:unit": "vitest run",
     "test:watch": "vitest",
     "typecheck": "run-p core:typecheck vue:typecheck",
     "vue:build": "run-s vue:clean && run-p vue:typecheck vue:build:*",
@@ -151,6 +151,7 @@
     "style-mod": "^4.1.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.42.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@types/express": "^4.17.21",
     "@types/katex": "^0.16.7",

playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/e2e',
+  /* 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: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.BASE_URL || 'http://localhost:5173',
+
+    testIdAttribute: 'data-test-id',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+})

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
-  - examples/*
-  - svelte
+  - .
+  - ./examples/*
+  - ./svelte

test/e2e/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html class="auto">
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
+    <title>E2E Tests</title>
+  </head>
+  <body>
+    <div id="editor"></div>
+  </body>
+</html>