chore: make tests os agnostic

.github/workflows/tests.yml

@@ -1,61 +1,86 @@
-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
-    runs-on: ubuntu-latest
+  e2e:
+    name: E2E Tests
+    timeout-minutes: 60
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Setup node
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: pnpm i
+      - 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:
-          node-version: 20
-      - uses: pnpm/action-setup@v2
+          name: blob-report-${{ matrix.os }}-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+  merge-reports:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [e2e]
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - 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: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-${{ matrix.os }}-*
+          merge-multiple: true
 
-  e2e:
-    name: E2E Tests
+      - 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-${{ matrix.os }}-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14
+  unit:
+    name: API 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()
-        with:
-          name: test-results
-          path: test-results/
-          retention-days: 30
+      - 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

package.json

@@ -20,7 +20,7 @@
 		"@conform-to/validitystate": "workspace:*",
 		"@conform-to/yup": "workspace:*",
 		"@conform-to/zod": "workspace:*",
-		"@playwright/test": "^1.40.1",
+		"@playwright/test": "^1.44.0",
 		"@remix-run/eslint-config": "^1.19.3",
 		"@remix-run/node": "^1.19.3",
 		"@types/node": "^20.10.4",
@@ -35,6 +35,7 @@
 	"engines": {
 		"node": "20.x"
 	},
+	"packageManager": "pnpm@9.1.0+sha256.22e36fba7f4880ecf749a5ca128b8435da085ecd49575e7fb9e64d6bf4fad394",
 	"lint-staged": {
 		"*.{js,jsx,ts,tsx}": "eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx",
 		"*.{js,jsx,ts,tsx,css,json,yaml}": "prettier --ignore-path .gitignore --write"

playground/app/routes/subscription.tsx

@@ -37,7 +37,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	return {
 		noClientValidate: url.searchParams.get('noClientValidate') === 'yes',
-		isStrcitMode: Boolean(process.env.CI),
+		isStrictMode: Boolean(process.env.NODE_ENV === 'production'),
 	};
 }
 
@@ -54,7 +54,7 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export default function Example() {
-	const { noClientValidate, isStrcitMode: strict } =
+	const { noClientValidate, isStrictMode: strict } =
 		useLoaderData<typeof loader>();
 	const actionData = useActionData<typeof action>();
 	const [form, fields] = useForm({

playwright.config.ts

@@ -1,5 +1,4 @@
-import { type PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
 /**
  * Read environment variables from file.
@@ -10,17 +9,8 @@ import { devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config: PlaywrightTestConfig = {
-	testDir: './tests/integrations',
-	/* Maximum time one test can run for. */
-	timeout: 30 * 1000,
-	expect: {
-		/**
-		 * Maximum time expect() should wait for the condition to be met.
-		 * For example in `await expect(locator).toHaveText();`
-		 */
-		timeout: 5000,
-	},
+export default defineConfig({
+	testDir: './tests/integration',
 	/* Run tests in files in parallel */
 	fullyParallel: true,
 	/* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -30,46 +20,53 @@ const config: PlaywrightTestConfig = {
 	/* 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',
+	reporter: process.env.CI ? 'blob' : '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:3000',
+		// baseURL: 'http://127.0.0.1:3000',
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: 'on-first-retry',
-		/* Take screenshot on testrun failure. */
-		screenshot: 'only-on-failure',
 	},
 
 	/* Configure projects for major browsers */
 	projects: [
 		{
 			name: 'chromium',
-			use: {
-				...devices['Desktop Chrome'],
-			},
+			use: { ...devices['Desktop Chrome'] },
 		},
 
 		{
 			name: 'firefox',
-			use: {
-				...devices['Desktop Firefox'],
-			},
+			use: { ...devices['Desktop Firefox'] },
 		},
 
 		{
 			name: 'webkit',
-			use: {
-				...devices['Desktop Safari'],
-			},
+			use: { ...devices['Desktop Safari'] },
 		},
-	],
 
-	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
-	outputDir: 'test-results/',
+		/* 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: {
@@ -79,6 +76,4 @@ const config: PlaywrightTestConfig = {
 		stderr: 'pipe',
 		stdout: 'pipe',
 	},
-};
-
-export default config;
+});