chore: add -ct for future component testing (#20)

pavelfeldman · web-flow · commit 028b0b712ed5 · 2022-05-05T17:54:16.000-07:00
diff --git a/assets/playwright.config.js b/assets/playwright.config.js
@@ -1,5 +1,8 @@
 // @ts-check
 const { devices } = require('@playwright/test');
+//--begin-ct
+const ct = require('{{ctPackageName}}');
+//--end-ct
 
 /**
  * Read environment variables from file.
@@ -31,6 +34,10 @@ const config = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
+  //--begin-ct
+  /* Enable component testing */
+  plugins: [ ct() ],
+  //--end-ct
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
diff --git a/assets/playwright.config.ts b/assets/playwright.config.ts
@@ -1,5 +1,8 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
+//--begin-ct
+import ct from '{{ctPackageName}}';
+//--end-ct
 
 /**
  * Read environment variables from file.
@@ -29,6 +32,10 @@ const config: PlaywrightTestConfig = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
+  //--begin-ct
+  /* Enable component testing */
+  plugins: [ ct() ],
+  //--end-ct
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
diff --git a/assets/playwright/index.html b/assets/playwright/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/playwright/index.{{extension}}"></script>
+  </body>
+</html>
diff --git a/assets/playwright/index.js b/assets/playwright/index.js
@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';
diff --git a/assets/tsconfig.json b/assets/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+  },
+  "include": ["src", "playwright.d.ts"],
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-playwright",
-  "version": "1.17.110",
+  "version": "1.17.111",
   "description": "Getting started with writing end-to-end tests with Playwright.",
   "repository": "github:Microsoft/playwright",
   "homepage": "https://playwright.dev",
diff --git a/src/generator.ts b/src/generator.ts
@@ -24,7 +24,8 @@ import { executeCommands, createFiles, determinePackageManager, executeTemplate,
 export type PromptOptions = {
   testDir: string,
   installGitHubActions: boolean,
-  language: 'JavaScript' | 'TypeScript'
+  language: 'JavaScript' | 'TypeScript',
+  framework: 'react' | 'vue' | 'svelte' | undefined,
   installPlaywrightDependencies: boolean,
 };
 
@@ -63,10 +64,14 @@ export class Generator {
         language: this.options.lang?.[0] === 'js' ? 'JavaScript' : 'TypeScript',
         installPlaywrightDependencies: !!this.options['install-deps'],
         testDir: fs.existsSync(path.join(this.rootDir, 'tests')) ? 'e2e' : 'tests',
+        framework: undefined,
       };
     }
-    return await prompt<PromptOptions>([
-      {
+
+    const isDefinitelyTS = fs.existsSync(path.join(this.rootDir, 'tsconfig.json'));
+
+    const questions = [
+      !isDefinitelyTS && {
         type: 'select',
         name: 'language',
         message: 'Do you want to use TypeScript or JavaScript?',
@@ -75,27 +80,41 @@ export class Generator {
           { name: 'JavaScript' },
         ],
       },
-      {
+      this.options.ct && {
+        type: 'select',
+        name: 'framework',
+        message: 'Which framework do you use? (experimental)',
+        choices: [
+          { name: 'react' },
+          { name: 'vue' },
+          { name: 'svelte' },
+        ],
+      },
+      !this.options.ct && {
         type: 'text',
         name: 'testDir',
         message: 'Where to put your end-to-end tests?',
         initial: fs.existsSync(path.join(this.rootDir, 'tests')) ? 'e2e' : 'tests',
       },
-      {
+      !this.options.ct && {
         type: 'confirm',
         name: 'installGitHubActions',
         message: 'Add a GitHub Actions workflow?',
-        initial: true,
+        initial: false,
       },
       // Avoid installing dependencies on Windows (vast majority does not run create-playwright on Windows)
       // Avoid installing dependencies on Mac (there are no dependencies)
-      ...(process.platform === 'linux' ? [{
+      process.platform === 'linux' && {
         type: 'confirm',
         name: 'installPlaywrightDependencies',
         message: 'Install Playwright operating system dependencies (requires sudo / root - can be done manually via \sudo npx playwright install-deps\')?',
         initial: false,
-      }] : []),
-    ]);
+      },
+    ];
+    const result = await prompt<PromptOptions>(questions.filter(Boolean) as any);
+    if (isDefinitelyTS)
+      result.language = 'TypeScript';
+    return result;
   }
 
   private async _identifyChanges(answers: PromptOptions) {
@@ -107,8 +126,17 @@ export class Generator {
     for (const browserName of ['chromium', 'firefox', 'webkit'])
       sections.set(browserName, !this.options.browser || this.options.browser.includes(browserName) ? 'show' : 'comment');
 
+    let installExamples = true;
+    let ctPackageName = '';
+    if (answers.framework) {
+      ctPackageName = `@playwright/experimental-ct-${answers.framework}`;
+      sections.set('ct', 'show');
+      installExamples = false;
+    }
+
     files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
-      testDir: answers.testDir,
+      testDir: answers.testDir || '',
+      ctPackageName,
     }, sections));
 
     if (answers.installGitHubActions) {
@@ -119,7 +147,8 @@ export class Generator {
       files.set('.github/workflows/playwright.yml', githubActionsScript);
     }
 
-    files.set(path.join(answers.testDir, `example.spec.${fileExtension}`), this._readAsset(`example.spec.${fileExtension}`));
+    if (installExamples)
+      files.set(path.join(answers.testDir, `example.spec.${fileExtension}`), this._readAsset(`example.spec.${fileExtension}`));
 
     if (!fs.existsSync(path.join(this.rootDir, 'package.json'))) {
       commands.push({
@@ -138,6 +167,25 @@ export class Generator {
       command: this.packageManager === 'yarn' ? `yarn add --dev ${packageName}` : `npm install --save-dev ${packageName}`,
     });
 
+    if (ctPackageName) {
+      commands.push({
+        name: 'Installing Playwright Component Testing',
+        command: this.packageManager === 'yarn' ? `yarn add --dev ${ctPackageName}@latest` : `npm install --save-dev ${ctPackageName}@latest`,
+      });
+
+      const extension = languageToFileExtension(answers.language);
+      const htmlTemplate = executeTemplate(this._readAsset(path.join('playwright', 'index.html')), { extension }, new Map());
+      files.set('playwright/index.html', htmlTemplate);
+
+      const jsTemplate = this._readAsset(path.join('playwright', 'index.js'));
+      files.set(`playwright/index.${extension}`, jsTemplate);
+
+      if (answers.language === 'TypeScript') {
+        files.set(`playwright/types.d.ts`, `import '${ctPackageName}';\n`);
+        this._patchTsconfigJSON();
+      }
+    }
+
     const browsersSuffix = this.options.browser ? ' ' + this.options.browser.join(' ') : '';
     commands.push({
       name: 'Downloading browsers',
@@ -154,8 +202,9 @@ export class Generator {
       gitIgnore = fs.readFileSync(gitIgnorePath, 'utf-8').trimEnd() + '\n';
     if (!gitIgnore.includes('node_modules'))
       gitIgnore += 'node_modules/\n';
-    gitIgnore += 'test-results/\n';
-    gitIgnore += 'playwright-report/\n';
+    gitIgnore += '/test-results/\n';
+    gitIgnore += '/playwright-report/\n';
+    gitIgnore += '/dist-pw/\n';
     fs.writeFileSync(gitIgnorePath, gitIgnore);
   }
 
@@ -175,11 +224,25 @@ export class Generator {
     await createFiles(this.rootDir, files, true);
   }
 
+  private async _patchTsconfigJSON() {
+    const tsconfigFile = path.join(this.rootDir, 'tsconfig.json');
+    const files = new Map<string, string>();
+    if (!fs.existsSync(tsconfigFile)) {
+      files.set(`tsconfig.json`, this._readAsset(path.join('tsconfig.json')));
+    } else {
+      const tsconfigJSON = fs.readFileSync(path.join(this.rootDir, 'tsconfig.json'), 'utf-8');
+      const newJSON = tsconfigJSON.replace(/("include"[\s\S]*:[\s\S]\[[\s\S]*"src")/m, '$1, "playwright/types.d.ts"');
+      if (!tsconfigJSON.includes('playwright') && tsconfigJSON !== newJSON)
+        files.set('tsconfig.json', newJSON);
+    }
+    await createFiles(this.rootDir, files, true);
+  }
+
   private _printEpilogue(answers: PromptOptions) {
     console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
     const pathToNavigate = path.relative(process.cwd(), this.rootDir);
     const prefix = pathToNavigate !== '' ? `  cd ${pathToNavigate}\n` : '';
-    const exampleSpecPath = `${answers.testDir}${path.sep}example.spec.${languageToFileExtension(answers.language)}`;
+    const exampleSpecPath = `example.spec.${languageToFileExtension(answers.language)}`;
     const playwrightConfigPath = `playwright.config.${languageToFileExtension(answers.language)}`;
     console.log(`Inside that directory, you can run several commands:
 
diff --git a/src/utils.ts b/src/utils.ts
@@ -70,7 +70,7 @@ export function executeTemplate(input: string, args: Record<string, string>, sec
   let mode: 'show' | 'hide' | 'comment' = 'show';
   let indent = '';
   for (const line of input.split('\n')) {
-    const match = line.match(/([\s]+)\/\/--begin-(.*)/);
+    const match = line.match(/(\s*)\/\/--begin-(.*)/);
     if (match) {
       mode = sections.get(match[2]) || 'comment';
       indent = match[1];

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Import styles, initialize component theme here.`
	`2`	`+// import '../src/common.css';`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-playwright",`
`3`		`- "version": "1.17.110",`
	`3`	`+ "version": "1.17.111",`
`4`	`4`	`"description": "Getting started with writing end-to-end tests with Playwright.",`
`5`	`5`	`"repository": "github:Microsoft/playwright",`
`6`	`6`	`"homepage": "https://playwright.dev",`