storacha · olizilla · Jan 16, 2023 · Jan 11, 2023 · Jan 12, 2023 · Jan 12, 2023
diff --git a/.github/actions/test/action.yml → .github/actions/pnpm/action.yml b/.github/actions/test/action.yml → .github/actions/pnpm/action.yml
@@ -1,5 +1,5 @@
-name: Test
-description: 'Setup and test'
+name: pnpm
+description: 'Setup node & pnpm'
 
 runs:
   using: "composite"
@@ -13,7 +13,4 @@ runs:
         run_install: |
           - recursive: true
             args: [--frozen-lockfile, --strict-peer-dependencies]
-    - run: pnpm run lint
-      shell: bash
-    - run: pnpm test
-      shell: bash
+
diff --git a/.github/workflows/examples.yaml b/.github/workflows/examples.yaml
@@ -0,0 +1,30 @@
+name: Examples
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "examples/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "examples/**"
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/pnpm
+      - run: pnpm build:examples
+      - run: pnpx playwright install --with-deps # install browsers
+      - run: pnpm test:examples
+
+      # save test report
+      # - uses: actions/upload-artifact@v3
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report/
+      #     retention-days: 30
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -26,8 +26,10 @@ jobs:
         path_released: ${{fromJson(needs.release.outputs.paths_released)}}
     steps:
       - uses: actions/checkout@v3
-      - uses: ./.github/actions/test
-      - name: Run pnpm publish
+      - uses: ./.github/actions/pnpm
+      - run: pnpm lint
+      - run: pnpm test
+      - name: pnpm publish
         run: |
           cd ${{ matrix.path_released }}
           pnpm install

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -12,4 +12,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: ./.github/actions/test
+      - uses: ./.github/actions/pnpm
+      - run: pnpm lint
+      - run: pnpm test
diff --git a/examples/react/file-upload/vite.config.js b/examples/react/file-upload/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
   server: {
     port: 3000

diff --git a/examples/react/multi-file-upload/vite.config.js b/examples/react/multi-file-upload/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
   server: {
     port: 3000

diff --git a/examples/react/sign-up-in/index.html b/examples/react/sign-up-in/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>W3UI Signup/Login Example App</title>
+    <title>W3UI Sign Up / Sign In Example App</title>
     </head>
   <body style="background-color:#1d2027;">
     <div id="root"></div>

diff --git a/examples/react/sign-up-in/vite.config.js b/examples/react/sign-up-in/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
   server: {
     port: 3000

diff --git a/examples/react/template/vite.config.js b/examples/react/template/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
   server: {
     port: 3000

diff --git a/examples/react/uploads-list/vite.config.js b/examples/react/uploads-list/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
   server: {
     port: 3000

diff --git a/examples/serve.json b/examples/serve.json
@@ -0,0 +1,14 @@
+{
+  "unlisted": [
+    "README.md",
+    "test",
+    "serve.json",
+    "template"
+  ],
+  "rewrites": [
+    { "source": "/:ui/:eg", "destination": "/:ui/:eg/dist/index.html" },
+    { "source": "/:ui/:eg/", "destination": "/:ui/:eg/dist/index.html" },
+    { "source": "/:ui/:eg/favicon.ico", "destination": "/:ui/:eg/dist/favicon.ico" },
+    { "source": "/:ui/:eg/assets/:x", "destination": "/:ui/:eg/dist/assets/:x" }
+  ]
+}
diff --git a/examples/solid/file-upload/vite.config.js b/examples/solid/file-upload/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: '',
   plugins: [solidPlugin()],
   server: {
     port: 3000

diff --git a/examples/solid/multi-file-upload/vite.config.js b/examples/solid/multi-file-upload/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: '',
   plugins: [solidPlugin()],
   server: {
     port: 3000

diff --git a/examples/solid/sign-up-in/vite.config.js b/examples/solid/sign-up-in/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: '',
   plugins: [solidPlugin()],
   server: {
     port: 3000

diff --git a/examples/solid/template/vite.config.js b/examples/solid/template/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: '',
   plugins: [solidPlugin()],
   server: {
     port: 3000

diff --git a/examples/solid/uploads-list/vite.config.js b/examples/solid/uploads-list/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: '',
   plugins: [solidPlugin()],
   server: {
     port: 3000

diff --git a/examples/test/playwright/.gitignore b/examples/test/playwright/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/examples/test/playwright/README.md b/examples/test/playwright/README.md
@@ -0,0 +1,61 @@
+# W3UI Playwright tests
+
+_Test our examples across all UI libraties we support, in real browsers!_
+
+## Getting started
+
+Install the deps and the browsers from the root of the monorepo
+
+```bash
+# update deps
+$ pnpm i
+
+# fetch test browsers
+$ pnpx playwright install
+```
+
+Build the examples to their many dist folders
+
+```bash
+$ pnpm build:examples
+```
+
+Run the tests
+
+```bash
+$ pnpm test:examples
+
+examples/test/playwright test$ playwright test
+[30 lines collapsed]
+│ [30/33] [webkit] › sign-up-in.spec.ts:4:3 › vue: sign in
+│ [31/33] [webkit] › uploads-list.spec.ts:4:3 › react: uploads list
+│ [32/33] [webkit] › uploads-list.spec.ts:4:3 › solid: uploads list
+│ [33/33] [webkit] › uploads-list.spec.ts:4:3 › vue: uploads list
+│ 
+│   33 passed (7s)
+│ To open last HTML report run:
+│ 
+│   npx playwright show-report
+│ 
+└─ Done in 7.6s
+```
+
+## Debugging
+
+You can run the test server manually to see what requests are made, and the tests will re-use your running server on http://localhost:1337 - it's powered by `serve` a static webserver running over the examples dir, configured in `examples/serve.json`
+
+```bash
+$ pnpm serve:examples
+```
+
+You can also run the tests locally from this project, and have it show you the browser as the tests run to aid debugging
+
+```bash
+$ cd examples/test/playwright
+$ pnpm test
+
+# or to see what's going on in the browser as the test runs
+$ pnpm test:debug
+```
+
+
diff --git a/examples/test/playwright/package.json b/examples/test/playwright/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@w3ui/example-test-playwright",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "serve": "serve ../../",
+    "test": "playwright test",
+    "test:debug": "playwright test --project=chromium --headed"
+  },
+  "author": "olzilla",
+  "license": "Apache-2.0 OR MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.29.2",
+    "serve": "^14.1.2"
+  }
+}
diff --git a/examples/test/playwright/playwright.config.ts b/examples/test/playwright/playwright.config.ts
@@ -0,0 +1,101 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './src',
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* 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, // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0, // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined, // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+  /* 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: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:1337',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    reuseExistingServer: !process.env.CI, // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+    command: 'pnpm run serve -p 1337',
+    port: 1337
+  },
+
+  /* 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: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ]
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+}
+
+export default config
diff --git a/examples/test/playwright/src/file-upload.spec.ts b/examples/test/playwright/src/file-upload.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+for (const ui of ['react', 'solid', 'vue'/* 'vanilla' not work atm */]) {
+  test(`${ui}: file upload`, async ({ page }) => {
+    await page.goto(`/${ui}/file-upload/`)
+    await expect(page).toHaveTitle('W3UI File Upload Example App')
+
+    const input = page.getByRole('textbox', { name: 'Email address:' })
+    await input.fill('[email protected]')
+    await input.press('Enter')
+    await expect(page.getByText('Verify your email address!')).toBeVisible()
+  })
+}
diff --git a/examples/test/playwright/src/multi-file-upload.spec.ts b/examples/test/playwright/src/multi-file-upload.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+for (const ui of ['react', 'solid'/* `vue` not exit yet, 'vanilla' not work atm */]) {
+  test(`${ui}: multi file upload`, async ({ page }) => {
+    await page.goto(`/${ui}/multi-file-upload/`)
+    await expect(page).toHaveTitle('W3UI Multi File Upload Example App')
+
+    const input = page.getByRole('textbox', { name: 'Email address:' })
+    await input.fill('[email protected]')
+    await input.press('Enter')
+    await expect(page.getByText('Verify your email address!')).toBeVisible()
+  })
+}