Get Playwright running amd64 host

WordPress · Dec 22, 2023 · d6f6d2e · d6f6d2e
1 parent e09dbf3
commit d6f6d2e
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 13 deletions.
diff --git a/frontend/Dockerfile.playwright b/frontend/Dockerfile.playwright
@@ -6,11 +6,14 @@ FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-jammy
 
 ARG PACKAGE_MANAGER
 
+WORKDIR /frontend
+
 COPY package.json .
 
 # Requires `packageManager` field to be present in `frontend/package.json`.
 RUN npm install -g $PACKAGE_MANAGER
 
-RUN pnpm install
-
-RUN pnpx nuxi prepare
+# DO NOT actually run `pnpm install` here. Doing so requires us to copy the the source into the container.
+# However, that's a waste of time because we mount the source in the compose file anyway.
+# Instead, we run `pnpm install` in the entrypoint script defined in the compose file.
+# ENTRYPOINT ["pnpm", "install", "&&"]
diff --git a/frontend/docker-compose.playwright.yml b/frontend/docker-compose.playwright.yml
@@ -8,11 +8,15 @@ services:
         - PACKAGE_MANAGER=${PACKAGE_MANAGER}
         - PLAYWRIGHT_VERSION=${PLAYWRIGHT_VERSION}
     volumes:
-      - ../node_modules:/node_modules
-      - .:/frontend
+      - ../node_modules:/node_modules:rw,Z
+      - .:/frontend:rw,Z
     user: ${USER_ID}
     working_dir: /frontend
-    command: pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-}
+    entrypoint: >
+      /bin/sh -c '
+      pnpm install;
+      pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-};
+      '
     environment:
       # This makes the webserver that Playwright runs show the build
       - DEBUG=pw:webserver

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from "nuxt/config"
+import { defineNuxtConfig, NuxtConfig } from "nuxt/config"
 
 import locales from "./src/locales/scripts/valid-locales.json"
 
@@ -77,6 +77,13 @@ export default defineNuxtConfig({
     },
   },
   dev: !isProd,
+  /**
+   * Disable debug mode in production.
+   *
+   * Do not use `isProdNotPlaywright` for this otherwise the debug logger will log hook
+   * timings for every single request, making the Playwright logs unusable.
+   */
+  debug: !isProd,
   modules: [
     "@pinia/nuxt",
     "@nuxtjs/i18n",

diff --git a/frontend/package.json b/frontend/package.json
@@ -10,13 +10,13 @@
     "dev:secure": "LOCAL_SSL=enabled pnpm dev",
     "prebuild": "pnpm install && pnpm i18n",
     "build": "pnpm build:only",
-    "build:only": "nuxt build",
+    "build:only": "NODE_ENV=production nuxt build",
     "build:clean": "rm -rf .nuxt",
     "docker:build": "docker build . -t openverse-frontend:latest",
     "docker:run": "docker run --rm -it -p 127.0.0.1:8443:8443/tcp openverse-frontend:latest",
     "generate": "nuxt generate",
     "postinstall": "pnpm i18n:copy-test-locales && npx nuxi prepare",
-    "start": "nuxt start",
+    "start": "PORT=\"${PORT:-8443}\" CONSOLA_LEVEL=\"${CONSOLA_LEVEL:-1}\" node .output/server/index.mjs",
     "start:playwright": "pnpm i18n:copy-test-locales && pnpm start",
     "prod": "pnpm build:only && pnpm start",
     "prod:playwright": "pnpm i18n:copy-test-locales && pnpm prod",
@@ -42,7 +42,7 @@
     "types": "vue-tsc -p .",
     "i18n": "pnpm i18n:create-locales-list && pnpm i18n:get-translations && pnpm i18n:update-locales",
     "i18n:en": "pnpm i18n:get-translations --en-only",
-    "i18n:copy-test-locales": "cp -r test/locales/* src/locales/",
+    "i18n:copy-test-locales": "cp test/locales/*.json src/locales/",
     "i18n:no-get": "pnpm i18n:create-locales-list && pnpm i18n:update-locales",
     "i18n:create-locales-list": "node src/locales/scripts/create-wp-locale-list",
     "i18n:get-translations": "node src/locales/scripts/get-translations",

diff --git a/frontend/test/playwright/playwright.config.ts b/frontend/test/playwright/playwright.config.ts
@@ -19,8 +19,7 @@ const pwCommand =
 const config: PlaywrightTestConfig = {
   forbidOnly: !!process.env.CI,
   webServer: {
-    command: `./node_modules/.bin/npm-run-all -p -r talkback ${pwCommand}`,
-    cwd: "/frontend",
+    command: `pnpm exec npm-run-all -p -r talkback ${pwCommand}`,
     timeout: process.env.CI ? 60_000 * 5 : 60_000 * 10, // 5 minutes in CI, 10 in other envs
     port: 8443,
     reuseExistingServer: !process.env.CI || process.env.PWDEBUG === "1",

diff --git a/frontend/test/unit/not-working-specs/pages/index-page.spec.js b/frontend/test/unit/not-working-specs/pages/index-page.spec.js
@@ -9,6 +9,7 @@ import { useAnalytics } from "~/composables/use-analytics"
 vi.mock("~/composables/use-analytics", () => ({
   useAnalytics: vi.fn(),
 }))
+
 describe("IndexPage", () => {
   let options
   const sendCustomEventMock = vi.fn()

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "verbatimModuleSyntax": false
+    "verbatimModuleSyntax": false,
+    "baseUrl": ".nuxt/"
   }
 }