test(e2e): Add local npm registry for testing

.github/workflows/build.yml

@@ -24,26 +24,9 @@ jobs:
       - name: Build CLI
         working-directory: ./packages/cli
         run: tsc -b
-      - name: Set the template version
-        run: |
-          node scripts/store-next-test-version.js --variable=UI_TEMPLATE_VERSION --output=$GITHUB_ENV
-      - name: Bump template versions
-        run: |
-          echo "E2E tests should target template version ${{ env.UI_TEMPLATE_VERSION }}"
-          echo "//registry.npmjs.org/:_authToken=${{ env.NPM_TOKEN }}" > ~/.npmrc
-          npm run npm:bump:template -- -- ${{ env.UI_TEMPLATE_VERSION }}
-          npm run npm:publish:template
-          node scripts/wait-for-published-packages.js -v ${{ env.UI_TEMPLATE_VERSION }}
-      - uses: actions/upload-artifact@v2
-        if: failure()
-        with:
-          name: npm-logs
-          path: /home/runner/.npm/_logs/*debug.log
       - name: End-to-end Tests
         working-directory: ./packages/cli-e2e
-        run: |
-          echo "Running E2E tests with version ${{ env.UI_TEMPLATE_VERSION }}"
-          npm run test-e2e
+        run: npm run test-e2e
       - uses: actions/upload-artifact@v2
         with:
           name: test-screenshots

packages/angular/package.json

@@ -4,7 +4,7 @@
   "description": "Coveo schematic for angular",
   "scripts": {
     "test": "npm run build && jasmine dist/**/*_spec.js",
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.schematic.json",
     "prebuild": "node ./scripts/clean.js",
     "postbuild": "node ./scripts/setup.js",
     "prepublishOnly": "npm run build",

packages/angular/src/search-token-server/rules/proxy.ts

@@ -50,7 +50,7 @@ export function startProxyServerFromRootApp(_options: CoveoSchema): Rule {
       const packageJson = JSON.parse(packageJsonBuffer.toString());
 
       packageJson.scripts['start'] =
-        'concurrently "npm run start-server" "ng serve"';
+        'concurrently --raw "npm run start-server" "ng serve"';
       packageJson.scripts['start-server'] = 'node ./scripts/start-server.js';
 
       tree.overwrite(

packages/cli-e2e/__tests__/angular.specs.ts

@@ -1,16 +1,23 @@
 import retry from 'async-retry';
 
-import type {ChildProcessWithoutNullStreams} from 'child_process';
 import type {HTTPRequest, Browser, Page} from 'puppeteer';
 
-import {setupUIProject, teardownUIProject} from '../utils/cli';
+import {
+  answerPrompt,
+  getProjectPath,
+  isGenericYesNoPrompt,
+  setupUIProject,
+} from '../utils/cli';
 import {getNewBrowser} from '../utils/browser';
 import {isSearchRequest} from '../utils/platform';
+import {EOL} from 'os';
+import stripAnsi from 'strip-ansi';
+import {ProcessManager} from '../utils/processManager';
 
 describe('ui', () => {
   describe('create:angular', () => {
     let browser: Browser;
-    const cliProcesses: ChildProcessWithoutNullStreams[] = [];
+    let processManager: ProcessManager;
     // TODO: CDX-90: Assign a dynamic port for the search token server on all ui projects
     const clientPort = '4200';
     const projectName = 'angular-project';
@@ -19,16 +26,58 @@ describe('ui', () => {
     let interceptedRequests: HTTPRequest[] = [];
     let page: Page;
 
+    // TODO: Refactor.
+    const openNewPage = async () => {
+      const newPage = await browser.newPage();
+      if (page) {
+        await page.close();
+      }
+      return newPage;
+    };
+
     beforeAll(async () => {
+      processManager = new ProcessManager();
       browser = await getNewBrowser();
-      await setupUIProject('ui:create:angular', projectName, cliProcesses, {
-        flags: ['--defaults'],
-        timeout: 40e3,
+      const buildProcess = setupUIProject(
+        processManager,
+        'ui:create:angular',
+        projectName,
+        {
+          flags: ['--defaults'],
+        }
+      );
+
+      buildProcess.stdout.on('data', async (data) => {
+        if (isGenericYesNoPrompt(data.toString())) {
+          await answerPrompt(`y${EOL}`, buildProcess);
+        }
+      });
+
+      await new Promise<void>((resolve) => {
+        buildProcess.on('exit', async () => {
+          resolve();
+        });
+      });
+
+      const startServerProcess = processManager.spawn('npm', ['run', 'start'], {
+        cwd: getProjectPath(projectName),
       });
-    }, 3e6);
+
+      await new Promise<void>((resolve) => {
+        startServerProcess.stdout.on('data', async (data) => {
+          if (
+            /Compiled successfully/.test(
+              stripAnsi(data.toString()).replace('/\n/g', '')
+            )
+          ) {
+            resolve();
+          }
+        });
+      });
+    }, 420e3);
 
     beforeEach(async () => {
-      page = await browser.newPage();
+      page = await openNewPage();
 
       page.on('request', (request: HTTPRequest) => {
         interceptedRequests.push(request);
@@ -42,7 +91,7 @@ describe('ui', () => {
 
     afterAll(async () => {
       await browser.close();
-      await teardownUIProject(cliProcesses);
+      await processManager.killAllProcesses();
     }, 5e3);
 
     it('should contain a search page section', async () => {
@@ -51,12 +100,16 @@ describe('ui', () => {
       });
 
       expect(await page.$('app-search-page')).not.toBeNull();
-    });
+    }, 300e3);
 
     it('should retrieve the search token on the page load', async () => {
+      const tokenResponseListener = page.waitForResponse(tokenProxyEndpoint);
+
       page.goto(searchPageEndpoint);
-      const tokenResponse = await page.waitForResponse(tokenProxyEndpoint);
-      expect(JSON.parse(await tokenResponse.text())).toMatchObject({
+
+      expect(
+        JSON.parse(await (await tokenResponseListener).text())
+      ).toMatchObject({
         token: expect.stringMatching(/^eyJhb.+/),
       });
     });

packages/cli-e2e/__tests__/auth.specs.ts

@@ -1,34 +1,32 @@
-import {spawn} from 'child_process';
 import retry from 'async-retry';
 
 import type {Browser} from 'puppeteer';
-import type {ChildProcessWithoutNullStreams} from 'child_process';
 
-import {
-  answerPrompt,
-  CLI_EXEC_PATH,
-  isYesNoPrompt,
-  killCliProcess,
-} from '../utils/cli';
+import {answerPrompt, CLI_EXEC_PATH, isYesNoPrompt} from '../utils/cli';
 import {captureScreenshots, connectToChromeBrowser} from '../utils/browser';
+import {ProcessManager} from '../utils/processManager';
 
 describe('auth', () => {
   describe('login', () => {
     let browser: Browser;
-    let cliProcess: ChildProcessWithoutNullStreams;
+    let processManager: ProcessManager;
 
     beforeAll(async () => {
       browser = await connectToChromeBrowser();
+      processManager = new ProcessManager();
     });
 
     afterEach(async () => {
       await captureScreenshots(browser);
-      await killCliProcess(cliProcess);
+      await processManager.killAllProcesses();
     }, 5e3);
 
     it('should open the platform page', async () => {
       // TODO CDX-98: Remove `-e=dev`.
-      cliProcess = spawn(CLI_EXEC_PATH, ['auth:login', '-e=dev']);
+      const cliProcess = processManager.spawn(CLI_EXEC_PATH, [
+        'auth:login',
+        '-e=dev',
+      ]);
       cliProcess.stderr.on('data', async (data) => {
         if (isYesNoPrompt(data.toString())) {
           await answerPrompt('n', cliProcess);

packages/cli-e2e/__tests__/react.specs.ts

@@ -1,16 +1,17 @@
 import retry from 'async-retry';
 
-import type {ChildProcessWithoutNullStreams} from 'child_process';
 import type {HTTPRequest, Browser, Page} from 'puppeteer';
+import stripAnsi from 'strip-ansi';
 
-import {setupUIProject, teardownUIProject} from '../utils/cli';
 import {getNewBrowser} from '../utils/browser';
+import {getProjectPath, setupUIProject} from '../utils/cli';
 import {isSearchRequest} from '../utils/platform';
+import {ProcessManager} from '../utils/processManager';
 
 describe('ui', () => {
   describe('create:react', () => {
     let browser: Browser;
-    const cliProcesses: ChildProcessWithoutNullStreams[] = [];
+    let processManager: ProcessManager;
     // TODO: CDX-90: Assign a dynamic port for the search token server on all ui projects
     const clientPort = '3000';
     const projectName = 'react-project';
@@ -21,10 +22,48 @@ describe('ui', () => {
 
     beforeAll(async () => {
       browser = await getNewBrowser();
-      await setupUIProject('ui:create:react', projectName, cliProcesses, {
-        timeout: 30e3,
+      processManager = new ProcessManager();
+      const buildProcess = setupUIProject(
+        processManager,
+        'ui:create:react',
+        projectName
+      );
+
+      await Promise.race([
+        new Promise<void>((resolve) => {
+          buildProcess.on('exit', async () => {
+            resolve();
+          });
+        }),
+        new Promise<void>((resolve) => {
+          buildProcess.stdout.on('data', (data) => {
+            if (
+              /Happy hacking!/.test(
+                stripAnsi(data.toString()).replace('/\n/g', '')
+              )
+            ) {
+              resolve();
+            }
+          });
+        }),
+      ]);
+
+      const startServerProcess = processManager.spawn('npm', ['run', 'start'], {
+        cwd: getProjectPath(projectName),
       });
-    }, 3e6);
+
+      await new Promise<void>((resolve) => {
+        startServerProcess.stdout.on('data', async (data) => {
+          if (
+            /You can now view react-project in the browser/.test(
+              stripAnsi(data.toString()).replace('/\n/g', '')
+            )
+          ) {
+            resolve();
+          }
+        });
+      });
+    }, 15 * 60e3);
 
     beforeEach(async () => {
       page = await browser.newPage();
@@ -41,7 +80,7 @@ describe('ui', () => {
 
     afterAll(async () => {
       await browser.close();
-      await teardownUIProject(cliProcesses);
+      await processManager.killAllProcesses();
     }, 5e3);
 
     it('should contain a search page section', async () => {

packages/cli-e2e/__tests__/vue.specs.ts

@@ -1,24 +1,31 @@
 import retry from 'async-retry';
-
-import type {ChildProcessWithoutNullStreams} from 'child_process';
+import {mkdirSync, writeFileSync} from 'fs';
+import {join} from 'path';
 import type {HTTPRequest, Browser, Page} from 'puppeteer';
 
-import {setupUIProject, teardownUIProject} from '../utils/cli';
+import {
+  answerPrompt,
+  getProjectPath,
+  isGenericYesNoPrompt,
+  setupUIProject,
+} from '../utils/cli';
 import {captureScreenshots, getNewBrowser} from '../utils/browser';
 import {isSearchRequest} from '../utils/platform';
+import stripAnsi from 'strip-ansi';
+import {EOL} from 'os';
+import {ProcessManager} from '../utils/processManager';
 
 describe('ui', () => {
   describe('create:vue', () => {
     let browser: Browser;
-    const cliProcesses: ChildProcessWithoutNullStreams[] = [];
     // TODO: CDX-90: Assign a dynamic port for the search token server on all ui projects
     const clientPort = '8080';
     const projectName = 'vue-project';
     const searchPageEndpoint = `http://localhost:${clientPort}`;
     const tokenProxyEndpoint = `http://localhost:${clientPort}/token`;
     let interceptedRequests: HTTPRequest[] = [];
     let page: Page;
-
+    let processManager: ProcessManager;
     const openNewPage = async () => {
       const newPage = await browser.newPage();
       if (page) {
@@ -28,9 +35,57 @@ describe('ui', () => {
     };
 
     beforeAll(async () => {
+      processManager = new ProcessManager();
       browser = await getNewBrowser();
-      await setupUIProject('ui:create:vue', projectName, cliProcesses);
-    }, 240e3);
+      const projectPath = getProjectPath(projectName);
+      mkdirSync(projectPath, {recursive: true});
+      writeFileSync(
+        join(projectPath, '.yarnrc'),
+        'registry "http://verdaccio:4873"'
+      );
+      const buildProcess = setupUIProject(
+        processManager,
+        'ui:create:vue',
+        projectName
+      );
+
+      buildProcess.stdout.on('data', async (data) => {
+        if (
+          /Pick an action: \(Use arrow keys\)/.test(
+            stripAnsi(data.toString()).replace(/\n/g, '')
+          )
+        ) {
+          await answerPrompt('\u001b[B', buildProcess);
+          return;
+        }
+        if (/❯ Merge/.test(stripAnsi(data.toString()))) {
+          await answerPrompt(EOL, buildProcess);
+          return;
+        }
+        if (isGenericYesNoPrompt(data.toString())) {
+          await answerPrompt(`y${EOL}`, buildProcess);
+          return;
+        }
+      });
+
+      await new Promise<void>((resolve) => {
+        buildProcess.on('exit', async () => {
+          resolve();
+        });
+      });
+
+      const startServerProcess = processManager.spawn('npm', ['run', 'start'], {
+        cwd: projectPath,
+      });
+
+      await new Promise<void>((resolve) => {
+        startServerProcess.stdout.on('data', async (data) => {
+          if (stripAnsi(data.toString()).indexOf('App running at:') !== -1) {
+            resolve();
+          }
+        });
+      });
+    }, 420e3);
 
     beforeEach(async () => {
       page = await openNewPage();
@@ -46,7 +101,7 @@ describe('ui', () => {
 
     afterAll(async () => {
       await browser.close();
-      await teardownUIProject(cliProcesses);
+      await processManager.killAllProcesses();
     }, 5e3);
 
     it('should contain a search page section', async () => {