chore: package manager cleanups (#38)

Author: mxschmitt

.github/workflows/ci.yml

@@ -25,4 +25,5 @@ jobs:
     - run: npm ci
     - run: npx playwright install-deps
     - run: npm run build
+    - run: npx tsc --noEmit
     - run: npm run test

src/generator.ts

@@ -19,25 +19,23 @@ import fs from 'fs';
 import { prompt } from 'enquirer';
 import colors from 'ansi-colors';
 
-import { executeCommands, createFiles, determinePackageManager, executeTemplate, Command, languageToFileExtension } from './utils';
-import { PackageManager } from './types';
+import { executeCommands, createFiles, executeTemplate, Command, languageToFileExtension } from './utils';
+import { packageManager } from './packageManager';
 
 export type PromptOptions = {
   testDir: string,
   installGitHubActions: boolean,
   language: 'JavaScript' | 'TypeScript',
-  framework: 'react' | 'vue' | 'svelte' | undefined,
+  framework?: 'react' | 'vue' | 'svelte' | undefined,
   installPlaywrightDependencies: boolean,
 };
 
 const assetsDir = path.join(__dirname, '..', 'assets');
 
 export class Generator {
-  packageManager: PackageManager;
   constructor(private readonly rootDir: string, private readonly options: { [key: string]: string[] }) {
     if (!fs.existsSync(rootDir))
       fs.mkdirSync(rootDir);
-    this.packageManager = determinePackageManager(this.rootDir);
   }
 
   async run() {
@@ -146,14 +144,9 @@ export class Generator {
     }
 
     if (answers.installGitHubActions) {
-      const pmInstallCommand: Record<PackageManager, string> = {
-        npm: 'npm ci',
-        pnpm: 'pnpm install',
-        yarn: 'yarn',
-      }
       const githubActionsScript = executeTemplate(this._readAsset('github-actions.yml'), {
-        installDepsCommand: pmInstallCommand[this.packageManager],
-        runTestsCommand: commandToRunTests(this.packageManager),
+        installDepsCommand: packageManager.ci(),
+        runTestsCommand: packageManager.runPlaywrightTest(),
       }, new Map());
       files.set('.github/workflows/playwright.yml', githubActionsScript);
     }
@@ -164,45 +157,29 @@ export class Generator {
     }
 
     if (!fs.existsSync(path.join(this.rootDir, 'package.json'))) {
-      const pmInitializeCommand: Record<PackageManager, string> = {
-        npm: 'npm init -y',
-        pnpm: 'pnpm init',
-        yarn: 'yarn init -y'
-      }
-      const pmOfficialName: Record<PackageManager, string> = {
-        npm: 'NPM',
-        pnpm: 'Pnpm',
-        yarn: 'Yarn',
-      }
       commands.push({
-        name: `Initializing ${pmOfficialName[this.packageManager]} project`,
-        command: pmInitializeCommand[this.packageManager],
+        name: `Initializing ${packageManager.name} project`,
+        command: packageManager.init(),
       });
     }
 
-    let packageLine = '';
-    const packageName = '@playwright/test';
+    let packageTag = '';
     if (this.options.beta)
-      packageLine = '@beta';
+      packageTag = '@beta';
     if (this.options.next)
-      packageLine = '@next';
+      packageTag = '@next';
 
-    const pmInstallDevDepCommand: Record<PackageManager, string> = {
-      npm: 'npm install --save-dev',
-      pnpm: 'pnpm add --save-dev',
-      yarn: 'yarn add --dev'
-    }
     if (!this.options.ct) {
       commands.push({
         name: 'Installing Playwright Test',
-        command: `${pmInstallDevDepCommand[this.packageManager]} ${packageName}${packageLine}`,
+        command: packageManager.installDevDependency(`@playwright/test${packageTag}`),
       });
     }
 
     if (this.options.ct) {
       commands.push({
         name: 'Installing Playwright Component Testing',
-        command: `${pmInstallDevDepCommand[this.packageManager]} ${ctPackageName}${packageLine}`,
+        command: packageManager.installDevDependency(`${ctPackageName}${packageTag}`),
       });
 
       const extension = languageToFileExtension(answers.language);
@@ -265,24 +242,24 @@ export class Generator {
     console.log(`
 Inside that directory, you can run several commands:
 
-  ${colors.cyan(commandToRunTests(this.packageManager))}
+  ${colors.cyan(packageManager.runPlaywrightTest())}
     Runs the end-to-end tests.
 
-  ${colors.cyan(commandToRunTests(this.packageManager, '--project=chromium'))}
+  ${colors.cyan(packageManager.runPlaywrightTest('--project=chromium'))}
     Runs the tests only on Desktop Chrome.
 
-  ${colors.cyan(commandToRunTests(this.packageManager, 'example'))}
+  ${colors.cyan(packageManager.runPlaywrightTest('example'))}
     Runs the tests in a specific file.
 
-  ${colors.cyan(`${commandToRunTests(this.packageManager, '--debug')}`)}
+  ${colors.cyan(packageManager.runPlaywrightTest('--debug'))}
     Runs the tests in debug mode.
 
-  ${colors.cyan(`${commandToRunCodegen(this.packageManager)}`)}
+  ${colors.cyan(packageManager.npx('playwright', 'codegen'))}
     Auto generate tests with Codegen.
 
 We suggest that you begin by typing:
 
-  ${colors.cyan(prefix + '  ' + commandToRunTests(this.packageManager))}
+  ${colors.cyan(prefix + '  ' + packageManager.runPlaywrightTest())}
 
 And check out the following files:
   - .${path.sep}${pathToNavigate ? path.join(pathToNavigate, exampleSpecPath) : exampleSpecPath} - Example end-to-end test
@@ -299,40 +276,24 @@ Happy hacking! 🎭`);
     console.log(`
 Inside that directory, you can run several commands:
 
-  ${colors.cyan(`${this.packageManager} run test-ct`)}
+  ${colors.cyan(`${packageManager.cli} run test-ct`)}
     Runs the component tests.
 
-  ${colors.cyan(`${this.packageManager} run test-ct -- --project=chromium`)}
+  ${colors.cyan(`${packageManager.cli} run test-ct -- --project=chromium`)}
     Runs the tests only on Desktop Chrome.
 
-  ${colors.cyan(`${this.packageManager} run test-ct App.test.ts`)}
+  ${colors.cyan(`${packageManager.cli} run test-ct App.test.ts`)}
     Runs the tests in the specific file.
 
-  ${colors.cyan(`${this.packageManager} run test-ct -- --debug`)}
+  ${colors.cyan(`${packageManager.cli} run test-ct -- --debug`)}
     Runs the tests in debug mode.
 
 We suggest that you begin by typing:
 
-  ${colors.cyan(`${this.packageManager} run test-ct`)}
+  ${colors.cyan(`${packageManager.cli} run test-ct`)}
 
 Visit https://playwright.dev/docs/intro for more information. ✨
 
 Happy hacking! 🎭`);
   }
 }
-
-export function commandToRunTests(packageManager: PackageManager, args?: string) {
-  if (packageManager === 'pnpm')
-    return `pnpm playwright test${args ? (' ' + args) : ''}`;
-  if (packageManager === 'yarn')
-    return `yarn playwright test${args ? (' ' + args) : ''}`;
-  return `npx playwright test${args ? (' ' + args) : ''}`;
-}
-
-export function commandToRunCodegen(packageManager: PackageManager) {
-  if (packageManager === 'pnpm')
-    return `pnpm playwright codegen`;
-  if (packageManager === 'yarn')
-    return `yarn playwright codegen`;
-  return `npx playwright codegen`;
-}

src/packageManager.ts

@@ -0,0 +1,97 @@
+interface PackageManager {
+  cli: string;
+  name: string
+  init(): string
+  npx(command: string, args: string): string
+  ci(): string
+  installDevDependency(name: string): string
+  runPlaywrightTest(args?: string): string
+}
+
+class NPM implements PackageManager {
+  name = 'NPM'
+  cli = 'npm'
+
+  init(): string {
+    return 'npm init -y'
+  }
+
+  npx(command: string, args: string): string {
+    return `npx ${command} ${args}`
+  }
+
+  ci(): string {
+    return 'npm ci'
+  }
+
+  installDevDependency(name: string): string {
+    return `npm install --save-dev ${name}`
+  }
+
+  runPlaywrightTest(args: string): string {
+    return this.npx('playwright', `test${args ? (' ' + args) : ''}`);
+  }
+}
+
+class Yarn implements PackageManager {
+  name = 'Yarn'
+  cli = 'yarn'
+
+  init(): string {
+    return 'yarn init -y'
+  }
+
+  npx(command: string, args: string): string {
+    return `yarn ${command} ${args}`
+  }
+
+  ci(): string {
+    return 'yarn'
+  }
+
+  installDevDependency(name: string): string {
+    return `yarn add --dev ${name}`
+  }
+
+  runPlaywrightTest(args: string): string {
+    return this.npx('playwright', `test${args ? (' ' + args) : ''}`);
+  }
+}
+
+class PNPM implements PackageManager {
+  name = 'pnpm'
+  cli = 'pnpm'
+
+  init(): string {
+    return 'pnpm init'
+  }
+
+  npx(command: string, args: string): string {
+    return `pnpm dlx ${command} ${args}`
+  }
+
+  ci(): string {
+    return 'pnpm install'
+  }
+
+  installDevDependency(name: string): string {
+    return `pnpm add --save-dev ${name}`
+  }
+
+  runPlaywrightTest(args: string): string {
+    return this.npx('playwright', `test${args ? (' ' + args) : ''}`);
+  }
+}
+
+function determinePackageManager(): PackageManager {
+  if (process.env.npm_config_user_agent) {
+    if (process.env.npm_config_user_agent.includes('yarn'))
+      return new Yarn()
+    if (process.env.npm_config_user_agent.includes('pnpm'))
+      return new PNPM()
+    return new NPM()
+  }
+  return new NPM()
+}
+
+export const packageManager = determinePackageManager();

src/types.ts

@@ -20,7 +20,6 @@ import path from 'path';
 
 import { prompt } from 'enquirer';
 import colors from 'ansi-colors';
-import { PackageManager } from './types';
 
 export type Command = {
   command: string;
@@ -56,21 +55,6 @@ export async function createFiles(rootDir: string, files: Map<string, string>, f
   }
 }
 
-export function determinePackageManager(rootDir: string): PackageManager {
-  if (fs.existsSync(path.join(rootDir, 'yarn.lock')))
-    return 'yarn';
-  if (fs.existsSync(path.join(rootDir, 'pnpm-lock.yaml')))
-    return 'pnpm';
-  if (process.env.npm_config_user_agent) {
-    if (process.env.npm_config_user_agent.includes('yarn'))
-      return 'yarn'
-    if (process.env.npm_config_user_agent.includes('pnpm'))
-      return 'pnpm'
-    return 'npm';
-  }
-  return 'npm';
-}
-
 export function executeTemplate(input: string, args: Record<string, string>, sections: Map<string, 'show' | 'hide' | 'comment'>): string {
   for (const key in args)
     input = input.replace(new RegExp('{{' + key + '}}', 'g'), args[key]);

src/utils.ts

@@ -19,7 +19,8 @@ import { spawn, SpawnOptionsWithoutStdio } from 'child_process';
 import path from 'path';
 import fs from 'fs';
 import { PromptOptions } from '../src/generator';
-import { PackageManager } from '../src/types';
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn'
 
 type TestFixtures = {
   packageManager: PackageManager;

tests/baseFixtures.ts

@@ -13,10 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { test, expect } from './baseFixtures';
+import { test, expect, PackageManager } from './baseFixtures';
 import path from 'path';
 import fs from 'fs';
-import { PackageManager } from '../src/types';
 
 for (const packageManager of ['npm', 'pnpm', 'yarn'] as PackageManager[]) {
   test.describe(`Package manager: ${packageManager}`, () => {
@@ -91,11 +90,11 @@ for (const packageManager of ['npm', 'pnpm', 'yarn'] as PackageManager[]) {
       expect(fs.existsSync(path.join(dir, 'playwright.config.ts'))).toBeTruthy();
 
       {
-        const { code } = await exec(packageManager === 'npm' ? 'npx' : packageManager === 'pnpm' ? 'pnpm dlx' : 'yarn', ['playwright', 'install-deps']);
+        const { code } = await exec(packageManagerToNpxCommand(packageManager), ['playwright', 'install-deps']);
         expect(code).toBe(0);
       }
 
-      const { code } = await exec(packageManager === 'npm' ? 'npx' : packageManager === 'pnpm' ? 'pnpm dlx' : 'yarn', ['playwright', 'test']);
+      const { code } = await exec(packageManagerToNpxCommand(packageManager), ['playwright', 'test']);
       expect(code).toBe(0);
     });
 
@@ -108,12 +107,23 @@ for (const packageManager of ['npm', 'pnpm', 'yarn'] as PackageManager[]) {
       expect(fs.existsSync(path.join(dir, 'playwright.config.js'))).toBeTruthy();
 
       {
-        const { code } = await exec(packageManager === 'npm' ? 'npx' : packageManager === 'pnpm' ? 'pnpm dlx' : 'yarn', ['playwright', 'install-deps']);
+        const { code } = await exec(packageManagerToNpxCommand(packageManager), ['playwright', 'install-deps']);
         expect(code).toBe(0);
       }
 
-      const { code } = await exec(packageManager === 'npm' ? 'npx' : packageManager === 'pnpm' ? 'pnpm dlx' : 'yarn', ['playwright', 'test']);
+      const { code } = await exec(packageManagerToNpxCommand(packageManager), ['playwright', 'test']);
       expect(code).toBe(0);
     });
   });
 }
+
+function packageManagerToNpxCommand(packageManager: PackageManager): string {
+  switch (packageManager) {
+    case 'npm':
+      return 'npx';
+    case 'yarn':
+      return 'yarn';
+    case 'pnpm':
+      return 'pnpm dlx';
+  }
+}

tests/integration.spec.ts

@@ -12,5 +12,5 @@
     "useUnknownInCatchVariables": false,
   },
   "compileOnSave": true,
-  "include": ["src"],
+  "include": ["src", "tests"],
 }