ci: add initial E2E test subset for experimental esbuild builder

The basic suite of E2E tests are now run against the newly introduced experimental esbuild-based builder (`browser-esbuild`).
Several tests are currently ignored based on the current feature set of the builder.

Author: clydin

.circleci/config.yml

@@ -218,6 +218,11 @@ jobs:
           command: |
             mkdir /mnt/ramdisk/e2e-yarn
             node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --yarn --tmpdir=/mnt/ramdisk/e2e-yarn --glob="{tests/basic/**,tests/update/**,tests/commands/add/**}"
+      - run:
+          name: Execute CLI E2E Tests Subset with esbuild builder
+          command: |
+            mkdir /mnt/ramdisk/e2e-esbuild
+            node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
       - fail_fast
 
   test-browsers:

tests/legacy-cli/e2e/setup/500-create-project.ts

@@ -33,6 +33,15 @@ export default async function () {
       // Ensure local test registry is used inside a project
       await writeFile('.npmrc', `registry=${testRegistry}`);
     }
+
+    // Setup esbuild builder if requested on the commandline
+    const useEsbuildBuilder = !!getGlobalVariable('argv')['esbuild'];
+    if (useEsbuildBuilder) {
+      await updateJsonFile('angular.json', (json) => {
+        json['projects']['test-project']['architect']['build']['builder'] =
+          '@angular-devkit/build-angular:browser-esbuild';
+      });
+    }
   }
 
   await prepareProjectForE2e('test-project');

tests/legacy-cli/e2e/tests/basic/build.ts

@@ -1,3 +1,4 @@
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToMatch } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
@@ -18,7 +19,15 @@ export default async function () {
 
   // Production build
   const { stderr: stderrProgress, stdout } = await ng('build', '--progress');
-  await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{16}\.js/);
+  if (getGlobalVariable('argv')['esbuild']) {
+    // esbuild uses an 8 character hash
+    await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{8}\.js/);
+
+    // EXPERIMENTAL_ESBUILD: esbuild does not yet output build stats
+    return;
+  } else {
+    await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{16}\.js/);
+  }
 
   if (!stdout.includes('Initial Total')) {
     throw new Error(`Expected stdout to contain 'Initial Total' but it did not.\n${stdout}`);

tests/legacy-cli/e2e/tests/basic/styles-array.ts

@@ -1,3 +1,4 @@
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToMatch, writeMultipleFiles } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
@@ -38,6 +39,11 @@ export default async function () {
     '<link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="renamed-style.css">',
   );
 
+  if (getGlobalVariable('argv')['esbuild']) {
+    // EXPERIMENTAL_ESBUILD: esbuild does not yet output build stats
+    return;
+  }
+
   // Non injected styles should be listed under lazy chunk files
   if (!/Lazy Chunk Files.*\srenamed-lazy-style\.css/m.test(stdout)) {
     throw new Error(`Expected "renamed-lazy-style.css" to be listed under "Lazy Chunk Files".`);

tests/legacy-cli/e2e/tests/build/prod-build.ts

@@ -1,5 +1,6 @@
 import { statSync } from 'fs';
 import { join } from 'path';
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToExist, expectFileToMatch, readFile } from '../../utils/fs';
 import { noSilentNg } from '../../utils/process';
 
@@ -32,12 +33,15 @@ export default async function () {
   await noSilentNg('build');
   await expectFileToExist(join(process.cwd(), 'dist'));
   // Check for cache busting hash script src
-  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-f]{16}\.js/);
-  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{16}\.css/);
-  await expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/);
+  await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-zA-Z]{8,16}\.js/);
+  await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-zA-Z]{8,16}\.css/);
+  if (!getGlobalVariable('argv')['esbuild']) {
+    // EXPERIMENTAL_ESBUILD: esbuild does not yet extract license text
+    await expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/);
+  }
 
   const indexContent = await readFile('dist/test-project/index.html');
-  const mainPath = indexContent.match(/src="(main\.[a-z0-9]{0,32}\.js)"/)[1];
+  const mainPath = indexContent.match(/src="(main\.[0-9a-zA-Z]{0,32}\.js)"/)[1];
 
   // Content checks
   await expectFileToMatch(`dist/test-project/${mainPath}`, bootstrapRegExp);

tests/legacy-cli/e2e_runner.ts

@@ -38,7 +38,7 @@ Error.stackTraceLimit = Infinity;
  * If unnamed flags are passed in, the list of tests will be filtered to include only those passed.
  */
 const argv = yargsParser(process.argv.slice(2), {
-  boolean: ['debug', 'ng-snapshots', 'noglobal', 'nosilent', 'noproject', 'verbose'],
+  boolean: ['debug', 'esbuild', 'ng-snapshots', 'noglobal', 'nosilent', 'noproject', 'verbose'],
   string: ['devkit', 'glob', 'ignore', 'reuse', 'ng-tag', 'tmpdir', 'ng-version'],
   configuration: {
     'dot-notation': false,