test(e2e): Avoid race condition with event proxy (#7965)

Luca Forstner · web-flow · commit 5169c2ffac36 · 2023-04-26T17:00:07.000+02:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -770,7 +770,7 @@ jobs:
           ref: ${{ env.HEAD_COMMIT }}
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.3.1
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml
@@ -28,7 +28,7 @@ jobs:
           ref: ${{ env.HEAD_COMMIT }}
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.3.1
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
diff --git a/packages/e2e-tests/lib/runTestApp.ts b/packages/e2e-tests/lib/runTestApp.ts
@@ -16,7 +16,9 @@ export async function buildAndTestApp(
 
   const tmpFolder = path.join(__dirname, '..', 'tmp');
   await fs.promises.mkdir(tmpFolder, { recursive: true });
-  const targetDir = await fs.promises.mkdtemp(path.join(tmpFolder, 'tmp-app-'));
+  const targetDir = await fs.promises.mkdtemp(
+    path.join(tmpFolder, `${recipeInstance.recipe.testApplicationName}-${Date.now()}-`),
+  );
 
   await fsExtra.copy(recipeDirname, targetDir);
 
diff --git a/packages/e2e-tests/test-applications/create-next-app/playwright.config.ts b/packages/e2e-tests/test-applications/create-next-app/playwright.config.ts
@@ -67,7 +67,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: testEnv === 'development' ? `yarn next dev -p ${port}` : `yarn next start -p ${port}`,
+    command: testEnv === 'development' ? `pnpm next dev -p ${port}` : `pnpm next start -p ${port}`,
     port,
   },
 };
diff --git a/packages/e2e-tests/test-applications/create-next-app/test-recipe.json b/packages/e2e-tests/test-applications/create-next-app/test-recipe.json
@@ -5,11 +5,11 @@
   "tests": [
     {
       "testName": "Playwright tests - Prod Mode",
-      "testCommand": "yarn test:prod"
+      "testCommand": "pnpm test:prod"
     },
     {
       "testName": "Playwright tests - Dev Mode",
-      "testCommand": "yarn test:dev"
+      "testCommand": "pnpm test:dev"
     }
   ]
 }
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/package.json b/packages/e2e-tests/test-applications/nextjs-app-dir/package.json
@@ -16,9 +16,8 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.4"
-  },
-  "devDependencies": {
+    "typescript": "4.9.4",
+    "wait-port": "1.0.4",
     "ts-node": "10.9.1",
     "@playwright/test": "^1.27.1"
   },
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/playwright.config.ts b/packages/e2e-tests/test-applications/nextjs-app-dir/playwright.config.ts
@@ -7,7 +7,8 @@ if (!testEnv) {
   throw new Error('No test env defined');
 }
 
-const port = Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO);
+const nextPort = Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO);
+const eventProxyPort = Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO) + Number(process.env.PORT_GAP);
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -36,7 +37,7 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: `http://localhost:${port}`,
+    baseURL: `http://localhost:${nextPort}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -55,12 +56,15 @@ const config: PlaywrightTestConfig = {
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: testEnv === 'development' ? `yarn next dev -p ${port}` : `yarn next start -p ${port}`,
-      port,
+      command: 'pnpm ts-node-script start-event-proxy.ts',
+      port: eventProxyPort,
     },
     {
-      command: 'yarn ts-node-script start-event-proxy.ts',
-      port: Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO) + Number(process.env.PORT_GAP),
+      command:
+        testEnv === 'development'
+          ? `pnpm wait-port ${eventProxyPort} && pnpm next dev -p ${nextPort}`
+          : `pnpm wait-port ${eventProxyPort} && pnpm next start -p ${nextPort}`,
+      port: nextPort,
     },
   ],
 };
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/test-recipe.json b/packages/e2e-tests/test-applications/nextjs-app-dir/test-recipe.json
@@ -2,15 +2,15 @@
   "$schema": "../../test-recipe-schema.json",
   "testApplicationName": "nextjs-13-app-dir",
   "buildCommand": "pnpm install && npx playwright install && pnpm build",
-  "buildAssertionCommand": "yarn ts-node --script-mode assert-build.ts",
+  "buildAssertionCommand": "pnpm ts-node --script-mode assert-build.ts",
   "tests": [
     {
       "testName": "Prod Mode",
-      "testCommand": "yarn test:prod"
+      "testCommand": "pnpm test:prod"
     },
     {
       "testName": "Dev Mode",
-      "testCommand": "yarn test:dev"
+      "testCommand": "pnpm test:dev"
     }
   ],
   "canaryVersions": [
diff --git a/packages/e2e-tests/test-applications/node-express-app/package.json b/packages/e2e-tests/test-applications/node-express-app/package.json
@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "yarn tsc",
+    "build": "tsc",
     "start": "node dist/app.js",
-    "test": "yarn playwright test"
+    "test": "playwright test"
   },
   "dependencies": {
     "@sentry/integrations": "*",
diff --git a/packages/e2e-tests/test-applications/node-express-app/playwright.config.ts b/packages/e2e-tests/test-applications/node-express-app/playwright.config.ts
@@ -57,7 +57,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn start',
+    command: 'pnpm start',
     port: Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO),
   },
 };
diff --git a/packages/e2e-tests/test-applications/node-express-app/test-recipe.json b/packages/e2e-tests/test-applications/node-express-app/test-recipe.json
@@ -5,7 +5,7 @@
   "tests": [
     {
       "testName": "Test express server",
-      "testCommand": "yarn test",
+      "testCommand": "pnpm test",
       "timeoutSeconds": 60
     }
   ]
diff --git a/packages/e2e-tests/test-applications/standard-frontend-react-tracing-import/playwright.config.ts b/packages/e2e-tests/test-applications/standard-frontend-react-tracing-import/playwright.config.ts
@@ -59,7 +59,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn start',
+    command: 'pnpm start',
     port: Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO),
     env: {
       PORT: String(Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO)),
diff --git a/packages/e2e-tests/test-applications/standard-frontend-react-tracing-import/test-recipe.json b/packages/e2e-tests/test-applications/standard-frontend-react-tracing-import/test-recipe.json
@@ -5,7 +5,7 @@
   "tests": [
     {
       "testName": "Playwright tests",
-      "testCommand": "yarn test"
+      "testCommand": "pnpm test"
     }
   ],
   "canaryVersions": []
diff --git a/packages/e2e-tests/test-applications/standard-frontend-react/playwright.config.ts b/packages/e2e-tests/test-applications/standard-frontend-react/playwright.config.ts
@@ -59,7 +59,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn start',
+    command: 'pnpm start',
     port: Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO),
     env: {
       PORT: String(Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO)),
diff --git a/packages/e2e-tests/test-applications/standard-frontend-react/test-recipe.json b/packages/e2e-tests/test-applications/standard-frontend-react/test-recipe.json
@@ -5,7 +5,7 @@
   "tests": [
     {
       "testName": "Playwright tests",
-      "testCommand": "yarn test"
+      "testCommand": "pnpm test"
     }
   ],
   "canaryVersions": [

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@`
`5`	`5`	`"tests": [`
`6`	`6`	`{`
`7`	`7`	`"testName": "Playwright tests - Prod Mode",`
`8`		`- "testCommand": "yarn test:prod"`
	`8`	`+ "testCommand": "pnpm test:prod"`
`9`	`9`	`},`
`10`	`10`	`{`
`11`	`11`	`"testName": "Playwright tests - Dev Mode",`
`12`		`- "testCommand": "yarn test:dev"`
	`12`	`+ "testCommand": "pnpm test:dev"`
`13`	`13`	`}`
`14`	`14`	`]`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,15 +2,15 @@`
`2`	`2`	`"$schema": "../../test-recipe-schema.json",`
`3`	`3`	`"testApplicationName": "nextjs-13-app-dir",`
`4`	`4`	`"buildCommand": "pnpm install && npx playwright install && pnpm build",`
`5`		`- "buildAssertionCommand": "yarn ts-node --script-mode assert-build.ts",`
	`5`	`+ "buildAssertionCommand": "pnpm ts-node --script-mode assert-build.ts",`
`6`	`6`	`"tests": [`
`7`	`7`	`{`
`8`	`8`	`"testName": "Prod Mode",`
`9`		`- "testCommand": "yarn test:prod"`
	`9`	`+ "testCommand": "pnpm test:prod"`
`10`	`10`	`},`
`11`	`11`	`{`
`12`	`12`	`"testName": "Dev Mode",`
`13`		`- "testCommand": "yarn test:dev"`
	`13`	`+ "testCommand": "pnpm test:dev"`
`14`	`14`	`}`
`15`	`15`	`],`
`16`	`16`	`"canaryVersions": [`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"tests": [`
`6`	`6`	`{`
`7`	`7`	`"testName": "Test express server",`
`8`		`- "testCommand": "yarn test",`
	`8`	`+ "testCommand": "pnpm test",`
`9`	`9`	`"timeoutSeconds": 60`
`10`	`10`	`}`
`11`	`11`	`]`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"tests": [`
`6`	`6`	`{`
`7`	`7`	`"testName": "Playwright tests",`
`8`		`- "testCommand": "yarn test"`
	`8`	`+ "testCommand": "pnpm test"`
`9`	`9`	`}`
`10`	`10`	`],`
`11`	`11`	`"canaryVersions": []`