From a5c0ecf8188455b9a1bd2939b1226bdf57239658 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 24 Dec 2025 01:29:34 +0000 Subject: [PATCH 1/3] Fix E2E tests to skip when dependencies unavailable - Skip validate-visual tests when ImageMagick is not installed - Skip preview wrapper dimension tests when Playwright browsers missing - Remove hardcoded port from vite config to fix dev server test flakiness - Add isPlaywrightAvailable() helper to check for browser installation --- tests/e2e/fixtures/test-project/package.json | 2 +- tests/e2e/fixtures/test-project/vite.config.ts | 3 --- tests/e2e/skill-integration.test.ts | 10 +++++++--- tests/e2e/utils/cleanup.ts | 18 ++++++++++++++++++ tests/e2e/validate-visual.test.ts | 6 +++++- 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/tests/e2e/fixtures/test-project/package.json b/tests/e2e/fixtures/test-project/package.json index b0c88a1..1ea6a34 100644 --- a/tests/e2e/fixtures/test-project/package.json +++ b/tests/e2e/fixtures/test-project/package.json @@ -4,7 +4,7 @@ "version": "1.0.0", "type": "module", "scripts": { - "dev": "vite --port 5173", + "dev": "vite", "build": "tsc && vite build", "preview": "vite preview" }, diff --git a/tests/e2e/fixtures/test-project/vite.config.ts b/tests/e2e/fixtures/test-project/vite.config.ts index 5c59447..0466183 100644 --- a/tests/e2e/fixtures/test-project/vite.config.ts +++ b/tests/e2e/fixtures/test-project/vite.config.ts @@ -3,7 +3,4 @@ import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], - server: { - port: 5173, - }, }); diff --git a/tests/e2e/skill-integration.test.ts b/tests/e2e/skill-integration.test.ts index 3f8656e..4f6604b 100644 --- a/tests/e2e/skill-integration.test.ts +++ b/tests/e2e/skill-integration.test.ts @@ -18,9 +18,13 @@ import { fileURLToPath } from 'url'; import fs from 'fs-extra'; import { execSync } from 'child_process'; import { startDevServer, stopDevServer, waitForServer, getDevServerPort } from './utils/dev-server'; -import { resetTestProject, cleanTmpDir, isImageMagickAvailable, getTmpDir } from './utils/cleanup'; +import { resetTestProject, cleanTmpDir, isImageMagickAvailable, isPlaywrightAvailable, getTmpDir } from './utils/cleanup'; import { TEST_PROJECT_DIR } from './setup'; +// Check tool availability for tests that require them +const hasImageMagick = isImageMagickAvailable(); +const hasPlaywright = isPlaywrightAvailable(); + const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); @@ -133,8 +137,8 @@ describeIf('Figma Integration Tests (requires Figma MCP)', () => { }); }); -// Always run these tests (no Figma needed) -describe('Preview Wrapper Dimension Tests', () => { +// These tests require Playwright and ImageMagick +describe.skipIf(!hasPlaywright || !hasImageMagick)('Preview Wrapper Dimension Tests', () => { afterAll(async () => { await stopDevServer(); }); diff --git a/tests/e2e/utils/cleanup.ts b/tests/e2e/utils/cleanup.ts index 5574db1..3631a6e 100644 --- a/tests/e2e/utils/cleanup.ts +++ b/tests/e2e/utils/cleanup.ts @@ -209,3 +209,21 @@ export function isImageMagickAvailable(): boolean { return false; } } + +/** + * Checks if Playwright browsers are installed + */ +export function isPlaywrightAvailable(): boolean { + try { + // Check if chromium browser is available by running a quick check + execSync('npx playwright --version', { stdio: 'ignore' }); + // Also check if browsers are actually installed + const result = execSync('ls ~/.cache/ms-playwright/chromium-* 2>/dev/null || echo "not found"', { + encoding: 'utf-8', + stdio: ['pipe', 'pipe', 'ignore'], + }); + return !result.includes('not found'); + } catch { + return false; + } +} diff --git a/tests/e2e/validate-visual.test.ts b/tests/e2e/validate-visual.test.ts index 105bb44..0e76a31 100644 --- a/tests/e2e/validate-visual.test.ts +++ b/tests/e2e/validate-visual.test.ts @@ -4,6 +4,7 @@ import os from 'os'; import fs from 'fs-extra'; import { execSync, spawnSync } from 'child_process'; import { fileURLToPath } from 'url'; +import { isImageMagickAvailable } from './utils/cleanup'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); @@ -11,6 +12,9 @@ const __dirname = path.dirname(__filename); const SCRIPT_PATH = path.resolve(__dirname, '../../skills/figma-to-react/scripts/validate-visual.sh'); const TMP_DIR = path.join(os.tmpdir(), 'figma-to-react-validate-visual-tests'); +// Check if ImageMagick is available for tests that require it +const hasImageMagick = isImageMagickAvailable(); + // Helper to create a solid color test image with ImageMagick const createTestImage = (filepath: string, width: number, height: number, color: string = 'blue') => { execSync(`magick -size ${width}x${height} xc:${color} "${filepath}"`, { stdio: 'pipe' }); @@ -36,7 +40,7 @@ const runValidation = ( }; }; -describe('validate-visual.sh - Visual Validation', () => { +describe.skipIf(!hasImageMagick)('validate-visual.sh - Visual Validation', () => { beforeEach(async () => { await fs.ensureDir(TMP_DIR); // Clean up any previous validation output From 3b1f0360a4dc8738870e48507bf7e964b4883e40 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 24 Dec 2025 01:50:01 +0000 Subject: [PATCH 2/3] Add ImageMagick and Playwright to CI workflow Install system dependencies needed for E2E tests: - ImageMagick for visual diff validation tests - Playwright chromium for screenshot capture tests --- .github/workflows/ci.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1f2b7ba..c116eaa 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -29,5 +29,11 @@ jobs: - name: Install dependencies run: pnpm install + - name: Install ImageMagick + run: sudo apt-get update && sudo apt-get install -y imagemagick + + - name: Install Playwright browsers + run: npx playwright install chromium --with-deps + - name: Run tests run: pnpm test:e2e From ce422c5e7a27c2e7105185a2ea5480e800302191 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 24 Dec 2025 01:53:10 +0000 Subject: [PATCH 3/3] Fix pnpm version conflict in CI - use packageManager from package.json --- .github/workflows/ci.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c116eaa..75c3e31 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,8 +18,6 @@ jobs: bun-version: latest - uses: pnpm/action-setup@v4 - with: - version: 9 - uses: actions/setup-node@v4 with: