test: Fix updating snapshots (#1469)

* test: attempt at getting test snapshots updated

* build: run tests in docker image

* chore: add some base deps to compile canvas dep

* test: non-interactive mode

* build: as root

* build: update before

* build: tests from the right dir

* test: run playwright & server at the same time

* build: fix directory

* build: use env var

* chore: chill the output

* build: move relative CI build into build workflow

* revert: "build: move relative CI build into build workflow"

This reverts commit bcabb7c.

Author: nperez0111

.github/workflows/build.yml

@@ -30,13 +30,6 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-      - name: cache playwright
-        id: playwright-cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: pw-new-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-
       - name: Install Dependencies
         run: npm install
 
@@ -45,40 +38,44 @@ jobs:
 
       - name: Lint packages
         run: npm run lint
-        env:
-          CI: true
 
       - name: Build packages
         run: npm run build
-        env:
-          CI: true
 
       - name: Run unit tests
         run: npm run test
-        env:
-          CI: true
 
-      - name: Run server
-        run: npm run start:built & npx wait-on http://localhost:3000
-        env:
-          CI: true
+      - name: Upload webpack stats artifact (editor)
+        uses: relative-ci/agent-upload-artifact-action@v2
+        with:
+          webpackStatsFile: ./playground/dist/webpack-stats.json
+          artifactName: relative-ci-artifacts-editor
+  playwright:
+    name: "Playwright Tests"
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.1-noble
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - run: apt-get update && apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Install Playwright
-        run: npm run install-playwright
+      - name: Build packages
+        run: npm run build
 
-      - name: Run Playwright tests
-        working-directory: ./tests
-        run: npx playwright test
+      - name: Run server and Playwright tests
+        run: |
+          npm run start:built > /dev/null & 
+          npx wait-on http://localhost:3000
+          cd tests && HOME=/root npx playwright test
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
           path: tests/playwright-report/
           retention-days: 30
-
-      - name: Upload webpack stats artifact (editor)
-        uses: relative-ci/agent-upload-artifact-action@v2
-        with:
-          webpackStatsFile: ./playground/dist/webpack-stats.json
-          artifactName: relative-ci-artifacts-editor

tests/playwright.config.ts

@@ -23,8 +23,7 @@ const config: PlaywrightTestConfig = {
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: 2,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

tests/src/end-to-end/ariakit/ariakit.test.ts-snapshots/ariakit-emoji-picker-webkit-linux.png

@@ -54,7 +54,8 @@ test.describe("Check Draghandle functionality", () => {
     const h2y = await getDragHandleYCoord(page, H_TWO_BLOCK_SELECTOR);
     const h3y = await getDragHandleYCoord(page, H_THREE_BLOCK_SELECTOR);
 
-    expect(h1y < h2y && h1y < h3y && h2y < h3y).toBeTruthy();
+    expect(h1y < h2y).toBeTruthy();
+    expect(h2y < h3y).toBeTruthy();
   });
 
   test("Draghandle should display next to correct nested block", async () => {
@@ -69,7 +70,8 @@ test.describe("Check Draghandle functionality", () => {
     const h2y = await getDragHandleYCoord(page, H_TWO_BLOCK_SELECTOR);
     const h3y = await getDragHandleYCoord(page, H_THREE_BLOCK_SELECTOR);
 
-    expect(h1y < h2y && h1y < h3y && h2y < h3y).toBeTruthy();
+    expect(h1y < h2y).toBeTruthy();
+    expect(h2y < h3y).toBeTruthy();
   });
 
   test("Clicking draghandle should open menu", async () => {

tests/src/end-to-end/draghandle/draghandle.test.ts

@@ -25,7 +25,10 @@ async function getElementCenterCoords(_page: Page, element: Locator) {
 
 export async function moveMouseOverElement(page: Page, element: Locator) {
   const boundingBox = (await element.boundingBox())!;
-  const coords = { x: boundingBox.x + 1, y: boundingBox.y + 1 };
+  const coords = {
+    x: boundingBox.x + boundingBox.width / 2,
+    y: boundingBox.y + boundingBox.height / 2,
+  };
   await page.mouse.move(coords.x, coords.y, { steps: 5 });
 }