diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0b4d28e4..83ee7c4d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -193,6 +193,66 @@ jobs: name: ios-build-logs path: ~/Library/Logs/DiagnosticReports/ + build-ios-new-arch: + name: Build iOS App (New Architecture) + runs-on: macos-15 + needs: lint-and-type-check + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Cache CocoaPods (new arch) + uses: actions/cache@v4 + with: + path: example/ios/Pods + key: ${{ runner.os }}-pods-newarch-${{ hashFiles('**/Podfile.lock') }} + restore-keys: | + ${{ runner.os }}-pods-newarch- + + - name: Install dependencies + run: npm install --legacy-peer-deps + + - name: Build library + run: npm run build + + - name: Install example dependencies + working-directory: example + run: npm ci --legacy-peer-deps + + - name: Setup CocoaPods + uses: maxim-lobanov/setup-cocoapods@v1 + with: + version: latest + + - name: Pod install (new arch) + working-directory: example/ios + env: + RCT_NEW_ARCH_ENABLED: '1' + run: pod install --verbose + + - name: Build iOS (new arch) + working-directory: example + run: | + xcodebuild -workspace ios/ViewShotExample.xcworkspace \ + -scheme ViewShotExample \ + -configuration Debug \ + -destination 'generic/platform=iOS Simulator' \ + build CODE_SIGNING_ALLOWED=NO + + - name: Upload iOS Build Logs (new arch) + if: failure() + uses: actions/upload-artifact@v4 + with: + name: ios-build-logs-new-arch + path: ~/Library/Logs/DiagnosticReports/ + test-windows-unit: name: Run Windows unit tests runs-on: ubuntu-latest @@ -568,18 +628,17 @@ jobs: - name: Report iOS test results if: always() + # Non-blocking: Jest SummaryReporter crashes (isSet TypeError) and the + # snapshot-content-container / style-filters suites are known-failing. run: | - # Note: Detox exit code is unreliable due to Jest SummaryReporter crash - # (TypeError: Cannot read properties of undefined reading 'isSet') - # Tests results are best checked via the uploaded artifacts and screenshots if [ "${{ steps.detox_ios_tests.outcome }}" == "failure" ]; then echo "⚠️ Detox exited with error (may be Jest reporter crash, check artifacts for actual results)" else echo "✅ Detox iOS tests completed" fi - # TODO: Android Detox E2E tests disabled temporarily - not stable on CI. - # Re-enable when Android emulator reliability is improved. + # Android Detox is disabled on CI: native library conflicts not yet + # reproduced outside the runner. Track via the PR description. # test-detox-android: # name: Detox E2E Tests (Android) # runs-on: ubuntu-latest @@ -694,7 +753,6 @@ jobs: - name: Run Playwright tests working-directory: example-web run: npm run test:e2e - continue-on-error: true id: playwright_tests - name: Stop web development server @@ -719,8 +777,8 @@ jobs: echo "- Font or styling differences" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY echo "**To update snapshots:**" >> $GITHUB_STEP_SUMMARY - echo "1. Download the \`web-snapshots-reference\` artifact" >> $GITHUB_STEP_SUMMARY - echo "2. Replace \`example-web/e2e/snapshots/reference/\` with the downloaded files" >> $GITHUB_STEP_SUMMARY + echo "1. Download the \`web-snapshots-actual\` artifact (uploaded below)" >> $GITHUB_STEP_SUMMARY + echo "2. Take the \`*-actual.png\` files and copy them over the matching baselines in \`example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/\` (drop the \`-actual\` suffix)" >> $GITHUB_STEP_SUMMARY echo "3. Commit the updated snapshots" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY echo "**Diff files available in artifacts:**" >> $GITHUB_STEP_SUMMARY diff --git a/example-web/e2e/snapshots/README.md b/example-web/e2e/snapshots/README.md index 026e4c55..29e3dfe2 100644 --- a/example-web/e2e/snapshots/README.md +++ b/example-web/e2e/snapshots/README.md @@ -1,40 +1,40 @@ # Web Example Snapshots -This directory contains reference screenshots for visual regression testing with Playwright. - -## Directory Structure +Reference screenshots for visual regression testing with Playwright. ``` snapshots/ -├── reference/ # Golden snapshots (committed to git) -│ ├── basic-test-png-capture-chromium-darwin.png -│ └── transparency-solid-capture-chromium-darwin.png -└── output/ # Test results (git ignored) -``` - -## Updating Snapshots - -### Local Development - -Run tests in update mode to regenerate all snapshots: - -```bash -npm run test:e2e:update-snapshots +├── reference/ +│ └── .ts-snapshots/ # Golden snapshots (committed) +│ └── -chromium.png +└── output/ # Test results (git-ignored) ``` -### From CI - -When tests fail in CI due to visual changes: - -1. Go to the failed GitHub Actions workflow -2. Download the `web-snapshots-reference` artifact -3. Extract the PNG files -4. Replace files in `example-web/e2e/snapshots/reference/` -5. Review the changes with `git diff` -6. Commit if the changes are expected - -## Platform Notes - -Snapshots are platform-specific (e.g., `-chromium-darwin.png`). The CI runs on Linux, so you may see different snapshot names in CI vs local macOS development. - -For consistent CI testing, we use the snapshots generated on the CI platform (Linux + Chromium). +The CI (Linux + Chromium) writes a single shared golden file per test, +which is what gets committed. Local non-Linux runs use a per-platform +file (`-chromium-darwin.png` etc.) so font/anti-aliasing diffs +don't fail your local e2e and don't overwrite the committed Linux +baseline. Those local files are not committed. + +## Updating snapshots + +Baselines must be regenerated **on Linux only**. +`npm run test:e2e:update-snapshots` refuses to run on macOS / Windows +to prevent overwriting the committed Linux references. + +The recommended flow is to update via CI artifacts: + +1. Push your branch. CI runs Playwright; if your visual change made + tests fail, the failing job uploads the rendered screenshots as the + `web-snapshots-actual` artifact. +2. Download `web-snapshots-actual` from the failed GitHub Actions run. +3. For each `*-actual.png` file, copy it over the matching baseline + under the corresponding `.ts-snapshots/` directory in + `example-web/e2e/snapshots/reference/`, dropping the `-actual` + suffix. +4. Review the diff with `git diff` (image diffs render in GitHub PRs). +5. Commit if the visual change is intended. + +If you really need to regenerate locally (e.g. to bootstrap a brand new +test), do it inside a Linux container or VM; do not commit baselines +generated on macOS or Windows. diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-darwin.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-darwin.png deleted file mode 100644 index 5c293b7e..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-darwin.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-linux.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-linux.png deleted file mode 100644 index ff338905..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium-linux.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/basic-test-png-capture.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium.png similarity index 100% rename from example-web/e2e/snapshots/reference/basic-test-png-capture.png rename to example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/basic-test-png-capture-chromium.png diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-darwin.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-darwin.png deleted file mode 100644 index 71c05c47..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-darwin.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-linux.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-linux.png deleted file mode 100644 index 09bc9735..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium-linux.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/complex-layout-capture.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium.png similarity index 100% rename from example-web/e2e/snapshots/reference/complex-layout-capture.png rename to example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/complex-layout-capture-chromium.png diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium-darwin.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium-darwin.png deleted file mode 100644 index d4982969..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium-darwin.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium-linux.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium.png similarity index 100% rename from example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium-linux.png rename to example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/cors-image-capture-chromium.png diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-darwin.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-darwin.png deleted file mode 100644 index 634a3baf..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-darwin.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-linux.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-linux.png deleted file mode 100644 index 39635c0e..00000000 Binary files a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium-linux.png and /dev/null differ diff --git a/example-web/e2e/snapshots/reference/image-test-screen-capture.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium.png similarity index 100% rename from example-web/e2e/snapshots/reference/image-test-screen-capture.png rename to example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/image-test-screen-capture-chromium.png diff --git a/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/viewshot-component-manual-chromium-linux.png b/example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/viewshot-component-manual-chromium.png similarity index 100% rename from example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/viewshot-component-manual-chromium-linux.png rename to example-web/e2e/snapshots/reference/viewshot.spec.ts-snapshots/viewshot-component-manual-chromium.png diff --git a/example-web/package.json b/example-web/package.json index caa682a8..b1c3d022 100644 --- a/example-web/package.json +++ b/example-web/package.json @@ -10,7 +10,7 @@ "test:e2e": "playwright test --reporter=list", "test:e2e:headed": "playwright test --headed --reporter=list", "test:e2e:debug": "playwright test --headed --debug", - "test:e2e:update-snapshots": "playwright test --update-snapshots" + "test:e2e:update-snapshots": "node scripts/require-linux.js && playwright test --update-snapshots" }, "dependencies": { "html2canvas": "^1.4.1", diff --git a/example-web/playwright.config.ts b/example-web/playwright.config.ts index df5e75df..8e654f51 100644 --- a/example-web/playwright.config.ts +++ b/example-web/playwright.config.ts @@ -3,6 +3,13 @@ import {defineConfig, devices} from "@playwright/test"; export default defineConfig({ testDir: "./e2e", snapshotDir: "./e2e/snapshots/reference", + // CI (Linux) writes/reads a single shared baseline; local non-Linux runs + // get their own per-platform files so font/anti-aliasing diffs don't fail + // local e2e and don't overwrite the committed Linux baseline. + snapshotPathTemplate: + process.env.CI || process.platform === "linux" + ? "{snapshotDir}/{testFilePath}-snapshots/{arg}-{projectName}{ext}" + : "{snapshotDir}/{testFilePath}-snapshots/{arg}-{projectName}-{platform}{ext}", fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, diff --git a/example-web/scripts/require-linux.js b/example-web/scripts/require-linux.js new file mode 100644 index 00000000..29d46387 --- /dev/null +++ b/example-web/scripts/require-linux.js @@ -0,0 +1,9 @@ +if (process.platform !== "linux") { + console.error( + "\n Snapshot baselines must be regenerated on Linux (the CI platform).\n" + + " On macOS / Windows the renders differ enough to overwrite the committed Linux baselines and fail CI.\n\n" + + " Push your branch and grab the web-snapshots-actual artifact from the failing CI run\n" + + " (see e2e/snapshots/README.md).\n", + ); + process.exit(1); +}