From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 21 Oct 2022 08:00:43 +0000 (+0800)
Subject: refactor(playwright)!: use prod bundle & preview server on CI (#182)
X-Git-Tag: v3.4.0~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=11fc2a153c2a2989b3c5ea07cc8b866247e0829f;p=thirdparty%2Fvuejs%2Fcreate-vue.git

refactor(playwright)!: use prod bundle & preview server on CI (#182)

Co-authored-by: Max Schmitt <max@schmitt.mx>
---

diff --git a/template/base/package.json b/template/base/package.json
index e89a1dad..abc37add 100644
--- a/template/base/package.json
+++ b/template/base/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 4173"
+    "preview": "vite preview"
   },
   "dependencies": {
     "vue": "^3.2.40"
diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js
index 0fadfcd1..1c1ea7cc 100644
--- a/template/config/playwright/playwright.config.js
+++ b/template/config/playwright/playwright.config.js
@@ -99,7 +99,11 @@ const config = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }
diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts
index 5bb8d795..333a4dc0 100644
--- a/template/config/playwright/playwright.config.ts
+++ b/template/config/playwright/playwright.config.ts
@@ -98,7 +98,12 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+    Playwright will re-use the local server if there is already a dev-server running.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }
diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts
index 9f5d997a..bbebc131 100644
--- a/utils/generateReadme.ts
+++ b/utils/generateReadme.ts
@@ -25,7 +25,8 @@ export default function generateReadme({
   needsVitest,
   needsEslint
 }) {
-  const commandFor = (scriptName) => getCommand(packageManager, scriptName)
+  const commandFor = (scriptName: string, args?: string) =>
+    getCommand(packageManager, scriptName, args)
 
   let readme = `# ${projectName}
 
@@ -99,14 +100,17 @@ ${commandFor('test:e2e')} # or \`${commandFor('test:e2e:ci')}\` for headless tes
 # Install browsers for the first run
 npx playwright install
 
+# When testing on CI, must build the project first
+${commandFor('build')}
+
 # Runs the end-to-end tests
 ${commandFor('test:e2e')}
 # Runs the tests only on Chromium
-${commandFor('test:e2e -- --project=chromium')}
+${commandFor('test:e2e', '--project=chromium')}
 # Runs the tests of a specific file
-${commandFor('test:e2e -- tests/example.spec.ts')}
+${commandFor('test:e2e', 'tests/example.spec.ts')}
 # Runs the tests in debug mode
-${commandFor('test:e2e -- --debug')}
+${commandFor('test:e2e', '--debug')}
 \`\`\`
 `
   }
diff --git a/utils/getCommand.ts b/utils/getCommand.ts
index 96d4976f..ea3a4e19 100644
--- a/utils/getCommand.ts
+++ b/utils/getCommand.ts
@@ -1,7 +1,13 @@
-export default function getCommand(packageManager, scriptName) {
+export default function getCommand(packageManager: string, scriptName: string, args?: string) {
   if (scriptName === 'install') {
     return packageManager === 'yarn' ? 'yarn' : `${packageManager} install`
   }
 
-  return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
+  if (args) {
+    return packageManager === 'npm'
+      ? `npm run ${scriptName} -- ${args}`
+      : `${packageManager} ${scriptName} ${args}`
+  } else {
+    return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
+  }
 }