chore: make tests os agnostic

.github/workflows/tests.yml

@@ -1,61 +1,85 @@
-name: Tests
 on:
   push:
-    branches:
-      - main
-      - next
-      - v1
+    branches: [main, next, v1]
   pull_request:
-    branches:
-      - main
-      - next
-      - v1
+    branches: [main, next, v1]
 jobs:
-  unit:
-    name: API Tests
+  e2e:
+    name: E2E Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: macos-latest
+          - os: ubuntu-latest
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          version: 8
-      - name: Download deps
+          node-version: lts/*
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
         run: pnpm i
-      - name: Build packages
-        run: pnpm run build
-      - name: Run tests
-        run: pnpm exec vitest
-      - name: Typecheck
-        run: pnpm -r run typecheck
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [e2e]
 
-  e2e:
-    name: E2E Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          version: 8
-      - name: Download deps
+          node-version: lts/*
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
         run: pnpm i
-      - name: Install Playwright
-        run: pnpm exec playwright install --with-deps
-      - name: Run tests
-        run: pnpm exec playwright test
-      - name: Upload test result
-        uses: actions/upload-artifact@v2
-        if: always()
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: pnpm exec playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14
+  unit:
+    name: API Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          name: test-results
-          path: test-results/
-          retention-days: 30
+          node-version: lts/*
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: pnpm i
+      - name: Run Vitest tests
+        run: pnpm exec vitest
+      - name: Run Typecheck
+        run: pnpm -r run typecheck

.gitignore

@@ -1,6 +1,6 @@
 # Logs
-logs
 *.log
+logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -9,20 +9,20 @@ yarn-error.log*
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
-pids
 *.pid
-*.seed
 *.pid.lock
+*.seed
+pids
 
 # Build result
-/packages/*/*.js
 !/packages/*/rollup.config.js
+/packages/*/_virtual
 /packages/*/*.cjs
-/packages/*/*.mjs
 /packages/*/*.d.ts
-/packages/*/README
+/packages/*/*.js
+/packages/*/*.mjs
 /packages/*/LICENSE
-/packages/*/_virtual
+/packages/*/README
 
 # Anything built
 build/
@@ -41,10 +41,9 @@ node_modules/
 
 # Output of 'npm pack'
 *.tgz
-/test-results/
 /playwright-report/
 /playwright/.cache/
+/test-results/
 
 # DS Store
 .DS_Store
-**/.DS_Store

tests/integrations/async-validation.spec.ts → e2e/async-validation.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground, selectAll } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {
@@ -74,7 +74,7 @@ async function runTest(page: Page, javaScriptEnabled: boolean) {
 		'Title is required',
 	]);
 
-	await fieldset.email.press('Control+a');
+	await selectAll(fieldset.email);
 	await fieldset.email.press('ArrowRight');
 	await fieldset.email.type('u');
 	if (!javaScriptEnabled) {
@@ -86,7 +86,7 @@ async function runTest(page: Page, javaScriptEnabled: boolean) {
 		'Title is required',
 	]);
 
-	await fieldset.email.press('Control+a');
+	await selectAll(fieldset.email);
 	await fieldset.email.press('ArrowRight');
 	await fieldset.email.type('i');
 	if (!javaScriptEnabled) {
@@ -98,7 +98,7 @@ async function runTest(page: Page, javaScriptEnabled: boolean) {
 		'Title is required',
 	]);
 
-	await fieldset.email.press('Control+a');
+	await selectAll(fieldset.email);
 	await fieldset.email.press('ArrowRight');
 	await fieldset.email.type('d');
 	if (!javaScriptEnabled) {
@@ -117,7 +117,7 @@ async function runTest(page: Page, javaScriptEnabled: boolean) {
 
 	await expect(playground.error).toHaveText(['Email is already used', '']);
 
-	await fieldset.email.press('Control+a');
+	await selectAll(fieldset.email);
 	await fieldset.email.press('ArrowRight');
 	await fieldset.email.type('e');
 	await playground.submit.click();

tests/integrations/collection.spec.ts → e2e/collection.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 async function runTest(
 	page: Page,

tests/integrations/conform-validitystate.spec.ts → e2e/conform-validitystate.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 async function setupField(page: Page, constraint: object, secret?: any) {
 	const playground = getPlayground(page);

tests/integrations/custom-inputs.spec.ts → e2e/custom-inputs.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 async function runTest(page: Page) {
 	const playground = getPlayground(page);

tests/integrations/dom-value.spec.ts → e2e/dom-value.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {

tests/integrations/file-upload.spec.ts → e2e/file-upload.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {

tests/integrations/form-attributes.spec.ts → e2e/form-attributes.spec.ts

@@ -1,5 +1,5 @@
 import { type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {

tests/integrations/form-control.spec.ts → e2e/form-control.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {

e2e/helpers.ts

@@ -0,0 +1,46 @@
+import type { Locator, Page } from '@playwright/test';
+
+export function getPlayground(page: Page) {
+	const container = page.locator('body');
+	const submission = container.locator('pre');
+
+	return {
+		container,
+		form: container.locator('form'),
+		submit: container.locator('footer button[type="submit"]'),
+		reset: container.locator('footer button[type="reset"]'),
+		submission,
+		result: () => submission.innerText().then(JSON.parse),
+		error: container.locator('main p'),
+	};
+}
+
+export async function selectAll(locator: Locator) {
+	switch (process.platform) {
+		case 'darwin':
+			await locator.press('Meta+a');
+			break;
+		default:
+			await locator.press('Control+a');
+	}
+}
+
+export async function cut(locator: Locator) {
+	switch (process.platform) {
+		case 'darwin':
+			await locator.press('Meta+x');
+			break;
+		default:
+			await locator.press('Control+x');
+	}
+}
+
+export async function paste(locator: Locator) {
+	switch (process.platform) {
+		case 'darwin':
+			await locator.press('Meta+v');
+			break;
+		default:
+			await locator.press('Control+v');
+	}
+}

tests/integrations/input-attributes.spec.ts → e2e/input-attributes.spec.ts

@@ -1,5 +1,5 @@
 import { type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {

tests/integrations/input-event.spec.ts → e2e/input-event.spec.ts

@@ -1,4 +1,5 @@
 import { type Page, test, expect } from '@playwright/test';
+import { cut, paste, selectAll } from './helpers';
 
 async function getForm(
 	page: Page,
@@ -125,7 +126,7 @@ test('works with keyboard events', async ({ page }) => {
 	];
 
 	// Cut out 'c'
-	await form.nativeInput.press('Control+x');
+	await cut(form.nativeInput);
 	await expect(form.nativeLogs).toHaveText(logs2);
 	await expect(form.baseLogs).toHaveText(logs2);
 
@@ -145,7 +146,7 @@ test('works with keyboard events', async ({ page }) => {
 	];
 
 	// Paste the 'c' back
-	await form.nativeInput.press('Control+v');
+	await paste(form.nativeInput);
 	await expect(form.nativeLogs).toHaveText(logs3);
 	await expect(form.baseLogs).toHaveText(logs3);
 
@@ -164,8 +165,7 @@ test('works with keyboard events', async ({ page }) => {
 		createLog('change', 3),
 	];
 
-	// Select all text
-	await form.nativeInput.press('Control+a');
+	await selectAll(form.nativeInput);
 	await expect(form.nativeLogs).toHaveText(logs4);
 	await expect(form.baseLogs).toHaveText(logs4);
 

tests/integrations/metadata.spec.ts → e2e/metadata.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	const list = form.locator('fieldset');

tests/integrations/nested-list.spec.ts → e2e/nested-list.spec.ts

@@ -1,5 +1,5 @@
 import { type Page, type Locator, test, expect } from '@playwright/test';
-import { getPlayground } from '../helpers';
+import { getPlayground } from './helpers';
 
 function getFieldset(form: Locator) {
 	return {