test(@angular-devkit/build-angular): rewrite app-shell unit test into e2e

This particular unit tests was really an e2e test.

(cherry picked from commit fdc315d)

Author: alan-agius4

packages/angular_devkit/build_angular/BUILD.bazel

@@ -286,14 +286,7 @@ ts_library(
 LARGE_SPECS = {
     "app-shell": {
         "extra_deps": [
-            "@npm//@angular/animations",
             "@npm//@angular/platform-server",
-            "@npm//@types/express",
-            "@npm//express",
-            "@npm//jasmine-spec-reporter",
-            "@npm//protractor",
-            "@npm//puppeteer",
-            "@npm//ts-node",
         ],
         "tags": [
             # TODO: node crashes with an internal error on node16

packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts

@@ -7,10 +7,7 @@
  */
 
 import { Architect } from '@angular-devkit/architect';
-import { getSystemPath, join, normalize, virtualFs } from '@angular-devkit/core';
-import express from 'express'; // eslint-disable-line import/no-extraneous-dependencies
-import * as http from 'http';
-import { AddressInfo } from 'net';
+import { normalize, virtualFs } from '@angular-devkit/core';
 import { createArchitect, host } from '../../testing/test-utils';
 
 describe('AppShell Builder', () => {
@@ -160,124 +157,6 @@ describe('AppShell Builder', () => {
     expect(content).toContain('app-shell works!');
   });
 
-  it('works with route and service-worker', async () => {
-    host.writeMultipleFiles(appShellRouteFiles);
-    host.writeMultipleFiles({
-      'src/ngsw-config.json': `
-        {
-          "index": "/index.html",
-          "assetGroups": [{
-            "name": "app",
-            "installMode": "prefetch",
-            "resources": {
-              "files": [
-                "/favicon.ico",
-                "/index.html",
-                "/*.css",
-                "/*.js"
-              ]
-            }
-          }, {
-            "name": "assets",
-            "installMode": "lazy",
-            "updateMode": "prefetch",
-            "resources": {
-              "files": [
-                "/assets/**"
-              ]
-            }
-          }]
-        }
-      `,
-      'src/app/app.module.ts': `
-        import { BrowserModule } from '@angular/platform-browser';
-        import { NgModule } from '@angular/core';
-
-        import { AppRoutingModule } from './app-routing.module';
-        import { AppComponent } from './app.component';
-        import { ServiceWorkerModule } from '@angular/service-worker';
-        import { environment } from '../environments/environment';
-        import { RouterModule } from '@angular/router';
-
-        @NgModule({
-          declarations: [
-            AppComponent
-          ],
-          imports: [
-            BrowserModule.withServerTransition({ appId: 'serverApp' }),
-            AppRoutingModule,
-            ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
-            RouterModule
-          ],
-          providers: [],
-          bootstrap: [AppComponent]
-        })
-        export class AppModule { }
-      `,
-      'e2e/app.e2e-spec.ts': `
-        import { browser, by, element } from 'protractor';
-
-        it('should have ngsw in normal state', () => {
-          browser.get('/');
-          // Wait for service worker to load.
-          browser.sleep(2000);
-          browser.waitForAngularEnabled(false);
-          browser.get('/ngsw/state');
-          // Should have updated, and be in normal state.
-          expect(element(by.css('pre')).getText()).not.toContain('Last update check: never');
-          expect(element(by.css('pre')).getText()).toContain('Driver state: NORMAL');
-        });
-      `,
-    });
-    // This should match the browser target prod config.
-    host.replaceInFile(
-      'angular.json',
-      '"buildOptimizer": true',
-      '"buildOptimizer": true, "serviceWorker": true',
-    );
-
-    // We're changing the workspace file so we need to recreate the Architect instance.
-    architect = (await createArchitect(host.root())).architect;
-
-    const overrides = { route: 'shell' };
-    const run = await architect.scheduleTarget(
-      { ...target, configuration: 'production' },
-      overrides,
-    );
-    const output = await run.result;
-    await run.stop();
-
-    expect(output.success).toBe(true);
-
-    // Make sure the index is pre-rendering the route.
-    const fileName = 'dist/index.html';
-    const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
-    expect(content).toContain('app-shell works!');
-
-    // Serve the app using a simple static server.
-    const app = express();
-    app.use('/', express.static(getSystemPath(join(host.root(), 'dist')) + '/'));
-    const server = await new Promise<http.Server>((resolve) => {
-      const innerServer = app.listen(0, 'localhost', () => resolve(innerServer));
-    });
-    try {
-      const serverPort = (server.address() as AddressInfo).port;
-      // Load app in protractor, then check service worker status.
-      const protractorRun = await architect.scheduleTarget(
-        { project: 'app-e2e', target: 'e2e' },
-        { baseUrl: `http://localhost:${serverPort}/`, devServerTarget: '' },
-      );
-
-      const protractorOutput = await protractorRun.result;
-      await protractorRun.stop();
-
-      expect(protractorOutput.success).toBe(true);
-    } finally {
-      // Close the express server.
-      await new Promise<void>((resolve) => server.close(() => resolve()));
-    }
-  });
-
   it('critical CSS is inlined', async () => {
     host.writeMultipleFiles(appShellRouteFiles);
     const overrides = {

tests/legacy-cli/e2e/tests/build/build-app-shell-with-schematic.ts renamed to tests/legacy-cli/e2e/tests/build/app-shell/app-shell-with-schematic.ts

@@ -1,10 +1,10 @@
-import { getGlobalVariable } from '../../utils/env';
-import { appendToFile, expectFileToMatch } from '../../utils/fs';
-import { installPackage } from '../../utils/packages';
-import { ng } from '../../utils/process';
-import { updateJsonFile } from '../../utils/project';
+import { getGlobalVariable } from '../../../utils/env';
+import { appendToFile, expectFileToMatch } from '../../../utils/fs';
+import { installPackage } from '../../../utils/packages';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
 
-const snapshots = require('../../ng-snapshot/package.json');
+const snapshots = require('../../../ng-snapshot/package.json');
 
 export default async function () {
   await appendToFile('src/app/app.component.html', '<router-outlet></router-outlet>');

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

@@ -0,0 +1,56 @@
+import { getGlobalVariable } from '../../../utils/env';
+import { appendToFile, expectFileToMatch, writeFile } from '../../../utils/fs';
+import { installPackage } from '../../../utils/packages';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+
+const snapshots = require('../../../ng-snapshot/package.json');
+
+export default async function () {
+  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');
+
+  const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];
+  if (isSnapshotBuild) {
+    const packagesToInstall: string[] = [];
+    await updateJsonFile('package.json', (packageJson) => {
+      const dependencies = packageJson['dependencies'];
+      // Iterate over all of the packages to update them to the snapshot version.
+      for (const [name, version] of Object.entries(
+        snapshots.dependencies as { [p: string]: string },
+      )) {
+        if (name in dependencies && dependencies[name] !== version) {
+          packagesToInstall.push(version);
+        }
+      }
+    });
+
+    for (const pkg of packagesToInstall) {
+      await installPackage(pkg);
+    }
+  }
+
+  await writeFile(
+    'e2e/app.e2e-spec.ts',
+    `
+    import { browser, by, element } from 'protractor';
+
+    it('should have ngsw in normal state', () => {
+      browser.get('/');
+      // Wait for service worker to load.
+      browser.sleep(2000);
+      browser.waitForAngularEnabled(false);
+      browser.get('/ngsw/state');
+      // Should have updated, and be in normal state.
+      expect(element(by.css('pre')).getText()).not.toContain('Last update check: never');
+      expect(element(by.css('pre')).getText()).toContain('Driver state: NORMAL');
+    });
+  `,
+  );
+
+  await ng('run', 'test-project:app-shell:production');
+  await expectFileToMatch('dist/test-project/browser/index.html', /app-shell works!/);
+
+  await ng('e2e', '--configuration=production');
+}