test: enable build E2E tests for esbuild-based builders

The build E2E tests have now been enabled for the esbuild-based builders.
The bundle budget test is currently skipped pending feature implementation.
Several redundant tests were also deleted due to the functionality already being
covered by unit tests for the builders.

(cherry picked from commit 8bd90ff)

Author: clydin

tests/legacy-cli/e2e.bzl

@@ -30,15 +30,7 @@ BROWSER_TESTS = ["tests/misc/browsers.js"]
 YARN_TESTS = ["tests/basic/**", "tests/update/**", "tests/commands/add/**"]
 ESBUILD_TESTS = [
     "tests/basic/**",
-    "tests/build/app-shell/app-shell-standalone.js",
-    "tests/build/app-shell/app-shell-with-schematic.js",
-    "tests/build/library/**",
-    "tests/build/ssr/**",
-    "tests/build/prod-build.js",
-    "tests/build/relative-sourcemap.js",
-    "tests/build/styles/**",
-    "tests/build/prerender/**",
-    "tests/build/worker.js",
+    "tests/build/**",
     "tests/commands/add/**",
     "tests/i18n/**",
 ]

tests/legacy-cli/e2e/tests/build/app-shell/app-shell-with-service-worker.ts

@@ -7,6 +7,8 @@ import { updateJsonFile } from '../../../utils/project';
 const snapshots = require('../../../ng-snapshot/package.json');
 
 export default async function () {
+  const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
+
   await appendToFile('src/app/app.component.html', '<router-outlet></router-outlet>');
   await ng('generate', 'service-worker', '--project', 'test-project');
   await ng('generate', 'app-shell', '--project', 'test-project');
@@ -49,7 +51,12 @@ export default async function () {
   `,
   );
 
-  await ng('run', 'test-project:app-shell:production');
+  if (useWebpackBuilder) {
+    await ng('run', 'test-project:app-shell:production');
+  } else {
+    await ng('build');
+  }
   await expectFileToMatch('dist/test-project/browser/index.html', /app-shell works!/);
+
   await ng('e2e', '--configuration=production');
 }

tests/legacy-cli/e2e/tests/build/base-href.ts

@@ -5,21 +5,32 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 import { expectToFail } from '../../utils/utils';
 
 export default async function () {
+  const usingWebpack = !getGlobalVariable('argv')['esbuild'];
+
   // Error
   await updateJsonFile('angular.json', (json) => {
     json.projects['test-project'].architect.build.configurations.production.budgets = [
       { type: 'all', maximumError: '100b' },
     ];
   });
 
-  const { message: errorMessage } = await expectToFail(() => ng('build'));
-  if (!/Error.+budget/.test(errorMessage)) {
-    throw new Error('Budget error: all, max error.');
+  if (usingWebpack) {
+    const { message: errorMessage } = await expectToFail(() => ng('build'));
+    if (!/Error.+budget/i.test(errorMessage)) {
+      throw new Error('Budget error: all, max error.');
+    }
+  } else {
+    // Application builder does not generate an error exit code for budget failures
+    const { stderr } = await ng('build');
+    if (!/Error.+budget/i.test(stderr)) {
+      throw new Error('Budget error: all, max error.');
+    }
   }
 
   // Warning
@@ -30,7 +41,7 @@ export default async function () {
   });
 
   const { stderr } = await ng('build');
-  if (!/Warning.+budget/.test(stderr)) {
+  if (!/Warning.+budget/i.test(stderr)) {
     throw new Error('Budget warning: all, min warning');
   }
 
@@ -42,7 +53,7 @@ export default async function () {
   });
 
   const { stderr: stderr2 } = await ng('build');
-  if (/(Warning|Error)/.test(stderr2)) {
+  if (/(Warning|Error)/i.test(stderr2)) {
     throw new Error('BIG max for all, should not error');
   }
 }

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

@@ -7,72 +7,73 @@ import {
 } from '../../utils/fs';
 import { copyProjectAsset } from '../../utils/assets';
 import { expectToFail } from '../../utils/utils';
+import { getGlobalVariable } from '../../utils/env';
 
 const imgSvg = `
   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
 `;
 
-export default function () {
-  return (
-    Promise.resolve()
-      // Verify absolute/relative paths in global/component css.
-      .then(() =>
-        writeMultipleFiles({
-          'src/styles.css': `
+export default async function () {
+  const usingWebpack = !getGlobalVariable('argv')['esbuild'];
+
+  const mediaPath = usingWebpack
+    ? './dist/test-project/browser'
+    : './dist/test-project/browser/media';
+
+  await Promise.resolve()
+    // Verify absolute/relative paths in global/component css.
+    .then(() =>
+      writeMultipleFiles({
+        'src/styles.css': `
         h1 { background: url('/assets/global-img-absolute.svg'); }
         h2 { background: url('./assets/global-img-relative.png'); }
       `,
-          'src/app/app.component.css': `
+        'src/app/app.component.css': `
         h3 { background: url('/assets/component-img-absolute.svg'); }
         h4 { background: url('../assets/component-img-relative.png'); }
       `,
-          'src/assets/global-img-absolute.svg': imgSvg,
-          'src/assets/component-img-absolute.svg': imgSvg,
-        }),
-      )
-      .then(() => copyProjectAsset('images/spectrum.png', './src/assets/global-img-relative.png'))
-      .then(() =>
-        copyProjectAsset('images/spectrum.png', './src/assets/component-img-relative.png'),
-      )
-      .then(() => ng('build', '--aot', '--configuration=development'))
-      // Check paths are correctly generated.
-      .then(() =>
-        expectFileToMatch('dist/test-project/browser/styles.css', 'assets/global-img-absolute.svg'),
-      )
-      .then(() =>
-        expectFileToMatch(
-          'dist/test-project/browser/styles.css',
-          /url\('\/assets\/global-img-absolute\.svg'\)/,
-        ),
-      )
-      .then(() =>
-        expectFileToMatch('dist/test-project/browser/styles.css', /global-img-relative\.png/),
-      )
-      .then(() =>
-        expectFileToMatch(
-          'dist/test-project/browser/main.js',
-          '/assets/component-img-absolute.svg',
-        ),
-      )
-      .then(() =>
-        expectFileToMatch('dist/test-project/browser/main.js', /component-img-relative\.png/),
-      )
-      // Check files are correctly created.
-      .then(() =>
-        expectToFail(() => expectFileToExist('dist/test-project/browser/global-img-absolute.svg')),
-      )
-      .then(() =>
-        expectToFail(() =>
-          expectFileToExist('dist/test-project/browser/component-img-absolute.svg'),
-        ),
-      )
-      .then(() => expectFileMatchToExist('./dist/test-project/browser', /global-img-relative\.png/))
-      .then(() =>
-        expectFileMatchToExist('./dist/test-project/browser', /component-img-relative\.png/),
-      )
-      // Check urls with deploy-url scheme are used as is.
+        'src/assets/global-img-absolute.svg': imgSvg,
+        'src/assets/component-img-absolute.svg': imgSvg,
+      }),
+    )
+    .then(() => copyProjectAsset('images/spectrum.png', './src/assets/global-img-relative.png'))
+    .then(() => copyProjectAsset('images/spectrum.png', './src/assets/component-img-relative.png'))
+    .then(() => ng('build', '--aot', '--configuration=development'))
+    // Check paths are correctly generated.
+    .then(() =>
+      expectFileToMatch('dist/test-project/browser/styles.css', 'assets/global-img-absolute.svg'),
+    )
+    .then(() =>
+      expectFileToMatch(
+        'dist/test-project/browser/styles.css',
+        /url\((['"]?)\/assets\/global-img-absolute\.svg\1\)/,
+      ),
+    )
+    .then(() =>
+      expectFileToMatch('dist/test-project/browser/styles.css', /global-img-relative\.png/),
+    )
+    .then(() =>
+      expectFileToMatch('dist/test-project/browser/main.js', '/assets/component-img-absolute.svg'),
+    )
+    .then(() =>
+      expectFileToMatch('dist/test-project/browser/main.js', /component-img-relative\.png/),
+    )
+    // Check files are correctly created.
+    .then(() => expectToFail(() => expectFileToExist(`${mediaPath}/global-img-absolute.svg`)))
+    .then(() => expectToFail(() => expectFileToExist(`${mediaPath}/component-img-absolute.svg`)))
+    .then(() => expectFileMatchToExist(mediaPath, /global-img-relative\.png/))
+    .then(() => expectFileMatchToExist(mediaPath, /component-img-relative\.png/));
+
+  // Early exit before deploy url tests
+  if (!usingWebpack) {
+    return;
+  }
+
+  // Check urls with deploy-url scheme are used as is.
+  return (
+    Promise.resolve()
       .then(() =>
         ng(
           'build',

tests/legacy-cli/e2e/tests/build/bundle-budgets.ts

@@ -1,8 +1,13 @@
 import { ng } from '../../utils/process';
 import { copyProjectAsset } from '../../utils/assets';
 import { appendToFile, expectFileToMatch, writeMultipleFiles } from '../../utils/fs';
+import { getGlobalVariable } from '../../utils/env';
 
 export default function () {
+  if (getGlobalVariable('argv')['esbuild']) {
+    return;
+  }
+
   return (
     Promise.resolve()
       .then(() =>

tests/legacy-cli/e2e/tests/build/css-urls.ts

@@ -1,17 +1,29 @@
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToExist, expectFileToMatch } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { expectToFail } from '../../utils/utils';
 
 export default async function () {
+  const usingWebpack = !getGlobalVariable('argv')['esbuild'];
+
   // Licenses should be left intact if extraction is disabled
   await ng('build', '--extract-licenses=false', '--output-hashing=none');
 
-  await expectToFail(() => expectFileToExist('dist/test-project/browser/3rdpartylicenses.txt'));
+  if (usingWebpack) {
+    await expectToFail(() => expectFileToExist('dist/test-project/browser/3rdpartylicenses.txt'));
+  } else {
+    // Application builder puts the licenses at the output path root
+    await expectToFail(() => expectFileToExist('dist/test-project/3rdpartylicenses.txt'));
+  }
   await expectFileToMatch('dist/test-project/browser/main.js', '@license');
 
   // Licenses should be removed if extraction is enabled
   await ng('build', '--extract-licenses', '--output-hashing=none');
 
-  await expectFileToExist('dist/test-project/browser/3rdpartylicenses.txt');
+  if (usingWebpack) {
+    await expectFileToExist('dist/test-project/browser/3rdpartylicenses.txt');
+  } else {
+    await expectFileToExist('dist/test-project/3rdpartylicenses.txt');
+  }
   await expectToFail(() => expectFileToMatch('dist/test-project/browser/main.js', '@license'));
 }

tests/legacy-cli/e2e/tests/build/deploy-url.ts

@@ -1,3 +1,4 @@
+import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 
@@ -6,7 +7,9 @@ export default async function () {
   await updateJsonFile('angular.json', (configJson) => {
     const appArchitect = configJson.projects['test-project'].architect;
     appArchitect.build.configurations['production'].aot = false;
-    appArchitect.build.configurations['production'].buildOptimizer = false;
+    if (!getGlobalVariable('argv')['esbuild']) {
+      appArchitect.build.configurations['production'].buildOptimizer = false;
+    }
   });
 
   // Test it works

tests/legacy-cli/e2e/tests/build/extract-licenses.ts

@@ -1,9 +1,16 @@
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToExist } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 import { expectToFail } from '../../utils/utils';
 
 export default async function () {
+  // TODO: Restructure to support application builder option
+  // This only needs to be tested once since it is really testing the CLI itself and not the builders
+  if (getGlobalVariable('argv')['esbuild']) {
+    return;
+  }
+
   await updateJsonFile('angular.json', (workspaceJson) => {
     const appArchitect = workspaceJson.projects['test-project'].architect;
     // These are the default options, that we'll overwrite in subsequent configs.
@@ -13,7 +20,6 @@ export default async function () {
       defaultConfiguration: undefined,
       options: {
         ...appArchitect['build'].options,
-        buildOptimizer: false,
         optimization: false,
         sourceMap: true,
         outputHashing: 'none',