diff --git a/Dockerfile.test b/Dockerfile.test new file mode 100644 index 0000000..8164562 --- /dev/null +++ b/Dockerfile.test @@ -0,0 +1,51 @@ +FROM node:18 + +WORKDIR /app + +# Install Playwright dependencies for Chromium only +RUN apt-get update && \ + apt-get install -y \ + libglib2.0-0 \ + libnss3 \ + libnspr4 \ + libatk1.0-0 \ + libatk-bridge2.0-0 \ + libcups2 \ + libdrm2 \ + libdbus-1-3 \ + libxcb1 \ + libxkbcommon0 \ + libx11-6 \ + libxcomposite1 \ + libxdamage1 \ + libxext6 \ + libxfixes3 \ + libxrandr2 \ + libgbm1 \ + libpango-1.0-0 \ + libcairo2 \ + libasound2 \ + && rm -rf /var/lib/apt/lists/* + +# Copy package files +COPY package.json package-lock.json ./ + +# Install dependencies and Chromium +RUN npm install --no-fund --ignore-scripts && \ + # Force install platform-specific Rollup + npm install --platform=linux --arch=arm64 @rollup/rollup-linux-arm64-gnu && \ + # Install only Chromium with no sandbox + PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install playwright-core && \ + npx playwright install --with-deps chromium + +# Copy source files +COPY . . + +# Build the app with explicit NODE_ENV +RUN NODE_ENV=production npm run build + +# Set environment variable to use no sandbox +ENV PLAYWRIGHT_SKIP_BROWSER_SANDBOX=1 + +# Command to run tests +CMD ["npm", "run", "test:visual:update-snapshots"] \ No newline at end of file diff --git a/package.json b/package.json index e45ab56..12063be 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "test:coverage": "vitest run --coverage", "test:e2e": "playwright test", "test:e2e:ui": "playwright test --ui", - "test:visual:update-snapshots": "bash ./scripts/update-visual-snapshots.sh" + "test:visual:update-snapshots": "bash ./scripts/update-visual-snapshots.sh", + "test:visual:update-snapshots:docker": "bash ./scripts/docker-test.sh" }, "dependencies": { "@ant-design/icons": "^5.3.0", diff --git a/playwright.config.ts b/playwright.config.ts index 7cfbce0..bd36845 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -12,18 +12,24 @@ export default defineConfig({ trace: "on-first-retry", screenshot: "only-on-failure", }, + expect: { + toMatchSnapshot: { + maxDiffPixelRatio: 0.1, + }, + }, projects: [ { name: "chromium", use: { ...devices["Desktop Chrome"] }, }, - { - name: "firefox", - use: { ...devices["Desktop Firefox"] }, - }, - { - name: "webkit", - use: { ...devices["Desktop Safari"] }, - }, + // Commenting out other browsers since we're only using Chromium + // { + // name: "firefox", + // use: { ...devices["Desktop Firefox"] }, + // }, + // { + // name: "webkit", + // use: { ...devices["Desktop Safari"] }, + // }, ], }); diff --git a/scripts/docker-test.sh b/scripts/docker-test.sh new file mode 100755 index 0000000..52f2179 --- /dev/null +++ b/scripts/docker-test.sh @@ -0,0 +1,69 @@ +#!/bin/bash + +# Enable error handling +set -e + +# Function to check Docker connection +check_docker() { + local max_attempts=5 + local attempt=1 + local wait_time=5 + + while [ $attempt -le $max_attempts ]; do + echo "Attempt $attempt of $max_attempts: Checking Docker connection..." + if $CLI info > /dev/null 2>&1; then + echo "Docker connection successful!" + return 0 + fi + echo "Docker connection failed. Waiting $wait_time seconds before retry..." + sleep $wait_time + attempt=$((attempt + 1)) + done + + echo "Failed to connect to Docker after $max_attempts attempts" + return 1 +} + +echo "๐Ÿš€ Starting container build process..." + +# Use full path to Docker from Rancher Desktop +CLI="${HOME}/.rd/bin/docker" + +# Switch to Rancher Desktop context +echo "Switching to Rancher Desktop context..." +$CLI context use rancher-desktop + +# Check Docker connection +if ! check_docker; then + echo "โŒ Error: Could not establish connection to Docker daemon" + exit 1 +fi + +# Clean up any existing containers and images +echo "๐Ÿงน Cleaning up any existing containers and images..." +$CLI rm -f react-gravity-test-run 2>/dev/null || true +$CLI rmi -f react-gravity-test 2>/dev/null || true + +# Build the container image with build progress +echo "๐Ÿ—๏ธ Building container image..." +$CLI build \ + --progress=plain \ + --no-cache \ + --network=host \ + --platform linux/arm64 \ + --build-arg BUILDPLATFORM=linux/arm64 \ + --build-arg TARGETPLATFORM=linux/arm64 \ + -t react-gravity-test \ + -f Dockerfile.test . + +# Run the container and copy the snapshots back +echo "๐Ÿƒ Running tests in container..." +$CLI run --platform linux/arm64 --name react-gravity-test-run react-gravity-test + +echo "๐Ÿ“ธ Copying snapshots from container..." +$CLI cp react-gravity-test-run:/app/src/e2e/visual.spec.ts-snapshots ./src/e2e/ + +echo "๐Ÿงน Cleaning up container..." +$CLI rm react-gravity-test-run + +echo "โœ… Done!" \ No newline at end of file diff --git a/src/e2e/visual.spec.ts b/src/e2e/visual.spec.ts index ca72f19..d8b19d1 100644 --- a/src/e2e/visual.spec.ts +++ b/src/e2e/visual.spec.ts @@ -13,15 +13,12 @@ test.describe("Gravity Simulator Visual Tests", () => { "Binary Pulsar", ]; - const getSnapshotName = (name: string, browserName: string) => { - // In CI (Linux), Playwright adds -linux suffix - const platformSuffix = process.env.CI - ? `-${browserName}-linux` - : `-${browserName}`; - return `${name}${platformSuffix}.png`; + const getSnapshotName = (name: string) => { + // Since we're only using Chromium, we don't need browser-specific names + return `${name}-chromium.png`; }; - test("Main app layout visual test", async ({ page, browserName }) => { + test("Main app layout visual test", async ({ page }) => { // Navigate to the app await page.goto("/"); @@ -39,15 +36,12 @@ test.describe("Gravity Simulator Visual Tests", () => { }); await expect(screenshot).toMatchSnapshot( - getSnapshotName("main-app-layout", browserName) + getSnapshotName("main-app-layout") ); }); for (const scenario of scenarios) { - test(`Screenshot test for ${scenario} scenario`, async ({ - page, - browserName, - }) => { + test(`Screenshot test for ${scenario} scenario`, async ({ page }) => { // Navigate to the app await page.goto("/"); @@ -76,8 +70,7 @@ test.describe("Gravity Simulator Visual Tests", () => { // Compare with baseline const snapshotName = getSnapshotName( - `scenario-${scenario.toLowerCase().replace(/\s+/g, "-")}`, - browserName + `scenario-${scenario.toLowerCase().replace(/\s+/g, "-")}` ); await expect(screenshot).toMatchSnapshot(snapshotName); diff --git a/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-darwin.png deleted file mode 100644 index 6dccf13..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-linux.png new file mode 100644 index 0000000..c029b19 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/main-app-layout-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/main-app-layout-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/main-app-layout-firefox-firefox-darwin.png deleted file mode 100644 index 4305bbb..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/main-app-layout-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/main-app-layout-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/main-app-layout-webkit-webkit-darwin.png deleted file mode 100644 index 93e6ad1..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/main-app-layout-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-darwin.png deleted file mode 100644 index 5d509be..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-linux.png new file mode 100644 index 0000000..c489a95 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-firefox-firefox-darwin.png deleted file mode 100644 index c1d9734..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-webkit-webkit-darwin.png deleted file mode 100644 index fdba9dc..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-binary-pulsar-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-darwin.png deleted file mode 100644 index ba94156..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-linux.png new file mode 100644 index 0000000..ebe5fac Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-firefox-firefox-darwin.png deleted file mode 100644 index 1e1d295..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-webkit-webkit-darwin.png deleted file mode 100644 index 5658b58..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-flower-dance-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-darwin.png deleted file mode 100644 index 76835e0..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-linux.png new file mode 100644 index 0000000..e783147 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-firefox-firefox-darwin.png deleted file mode 100644 index 3debe17..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-webkit-webkit-darwin.png deleted file mode 100644 index 09c026e..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-galaxy-collision-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-darwin.png deleted file mode 100644 index 021f825..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-linux.png new file mode 100644 index 0000000..6f2aa7d Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-firefox-firefox-darwin.png deleted file mode 100644 index f64d26a..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-webkit-webkit-darwin.png deleted file mode 100644 index 19e65a4..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-negative-mass-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-darwin.png deleted file mode 100644 index 17df5d1..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-linux.png new file mode 100644 index 0000000..98f6c12 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-orbit-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbit-firefox-firefox-darwin.png deleted file mode 100644 index 47921a9..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbit-webkit-webkit-darwin.png deleted file mode 100644 index 04f9689..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbit-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-darwin.png deleted file mode 100644 index 111602a..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-linux.png new file mode 100644 index 0000000..bb0d3db Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-firefox-firefox-darwin.png deleted file mode 100644 index f1c8e0f..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-webkit-webkit-darwin.png deleted file mode 100644 index 4a395f4..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-orbital-dance-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-darwin.png deleted file mode 100644 index 296c695..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-linux.png new file mode 100644 index 0000000..a1ed7a4 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-path-test-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-path-test-firefox-firefox-darwin.png deleted file mode 100644 index b6e457d..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-path-test-webkit-webkit-darwin.png deleted file mode 100644 index 0a7427e..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-path-test-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-darwin.png deleted file mode 100644 index 173a999..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-linux.png new file mode 100644 index 0000000..977a1fe Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-react-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-react-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-react-firefox-firefox-darwin.png deleted file mode 100644 index 995eb88..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-react-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-react-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-react-webkit-webkit-darwin.png deleted file mode 100644 index 88c88aa..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-react-webkit-webkit-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-darwin.png deleted file mode 100644 index e7b5de0..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-linux.png b/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-linux.png new file mode 100644 index 0000000..1a324e0 Binary files /dev/null and b/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-chromium-chromium-linux.png differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-firefox-firefox-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-firefox-firefox-darwin.png deleted file mode 100644 index bb9bbf7..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-firefox-firefox-darwin.png and /dev/null differ diff --git a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-webkit-webkit-darwin.png b/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-webkit-webkit-darwin.png deleted file mode 100644 index c4d7a00..0000000 Binary files a/src/e2e/visual.spec.ts-snapshots/scenario-three-stars-webkit-webkit-darwin.png and /dev/null differ