setup: fix playwright Dockerfile for monorepo

packages/app/package.json

@@ -20,7 +20,7 @@
     "pretest:pw": "playwright install",
     "test:pw": "playwright test --config=playwright/playwright.config.ts",
     "test:pw:update": "pnpm run test:pw --update-snapshots",
-    "test:pw-docker": "docker-compose -f ./playwright/docker-compose.yml build playwright-service && docker-compose -f ./playwright/docker-compose.yml run --rm playwright-service",
+    "test:pw-docker": "docker compose -f ./playwright/docker-compose.yml build playwright-service && docker compose -f ./playwright/docker-compose.yml run --rm playwright-service",
     "test:pw-docker:update": "pnpm run test:pw-docker --update-snapshots",
     "storybook": "cross-env STORYBOOK_RQDEVTOOLS_ENABLED=false start-storybook -c storybook -p 6006",
     "build-storybook": "cross-env STORYBOOK_RQDEVTOOLS_ENABLED=false build-storybook -c storybook",

packages/app/playwright/Dockerfile

@@ -1,13 +1,21 @@
 FROM mcr.microsoft.com/playwright:v1.29.1-focal
 
-WORKDIR /app
+# Install pnpm
+RUN npm i -g pnpm@7.11.0
+
+WORKDIR /file-explorer
+
+COPY ./.npmrc ./.npmrc
+COPY ./package.json ./package.json
+COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
+COPY ./pnpm-workspace.yaml ./pnpm-workspace.yaml
+COPY ./packages/app/package.json ./packages/app/package.json
+COPY ./packages/app/scripts/ ./packages/app/scripts/
 
-COPY ../package.json ./package.json
-COPY ../pnpm-lock.yaml ./pnpm-lock.yaml
-COPY ../.npmrc ./.npmrc
-COPY ../scripts ./scripts
 RUN pnpm i
 
-COPY ../ ./
+COPY ./packages/app/ ./packages/app/
+
+WORKDIR /file-explorer/packages/app
 
 ENTRYPOINT ["pnpm", "run", "test:pw"]

packages/app/playwright/Dockerfile.dockerignore

@@ -1,7 +1,7 @@
-.webpack
-node_modules
-out
-src
-storybook-static
-test-results
-TODO.md
+**/node_modules
+packages/app/.webpack
+packages/app/out
+packages/app/src
+packages/app/storybook-static
+packages/app/test-results
+packages/app/TODO.md

packages/app/playwright/README.md

@@ -15,16 +15,16 @@ To run the Docker container, use these two commands:
 
 1. Build the Docker image:
    ```sh
-   docker-compose -f ./docker-compose.yml build playwright-service
+   docker compose -f ./docker-compose.yml build playwright-service
    ```
 2. Create a container and run the tests:
 
    ```sh
-   docker-compose -f ./docker-compose.yml run --rm playwright-service
+   docker compose -f ./docker-compose.yml run --rm playwright-service
 
    # Additional arguments are passed through to "playwright test", therefore you can use all CLI options from here: https://playwright.dev/docs/test-cli.
    # E.g. to run only a specific spec file:
-   docker-compose -f ./docker-compose.yml run --rm playwright-service ./src/ui/shell/Shell.visual.spec.ts
+   docker compose -f ./docker-compose.yml run --rm playwright-service ./src/ui/shell/Shell.visual.spec.ts
    ```
 
-This project uses a NPM script `test:pw-docker` to abstract the two docker-compose commands away, see the script here: [`../package.json`](../package.json).
+This project uses a NPM script `test:pw-docker` to abstract the two `docker compose` commands away, see the script here: [`../package.json`](../package.json).

packages/app/playwright/docker-compose.yml

@@ -3,13 +3,13 @@ version: '3.9'
 services:
   playwright-service:
     build:
-      context: ../
-      dockerfile: ./playwright/Dockerfile
+      context: ../../../
+      dockerfile: ./packages/app/playwright/Dockerfile
       # Playwright needs 1GB shared memory space (https://playwright.dev/docs/ci#docker)
       shm_size: '1gb'
     volumes:
-      - ../src:/app/src
-      - ../test-results:/app/test-results
+      - ../src:/file-explorer/packages/app/src
+      - ../test-results:/file-explorer/packages/app/test-results
     environment:
       - WEB_APP_ORIGIN=host.docker.internal:6006
     # allow access to the host (https://stackoverflow.com/a/43541732/1700319)

packages/app/playwright/playwright.util.ts

@@ -26,7 +26,7 @@ export async function bootstrap({
   await Promise.all([
     page.goto(
       `http://${WEB_APP_ORIGIN}/iframe.html?viewMode=story&args=&id=${storybookIdToVisit}`,
-      { waitUntil: 'networkidle' },
+      { waitUntil: 'load' },
     ),
     page.waitForResponse(/fonts\/SegoeUI-VF.ttf/i),
   ]);