test(@angular-devkit/build-angular): improve resilience of watch rebuilds

Author: clydin

packages/angular_devkit/build_angular/test/browser/rebuild_spec_large.ts

@@ -9,7 +9,7 @@
 
 import { DefaultTimeout, TestLogger, runTargetSpec } from '@angular-devkit/architect/testing';
 import { join, normalize, virtualFs } from '@angular-devkit/core';
-import { debounceTime, take, tap } from 'rxjs/operators';
+import { debounceTime, take, takeWhile, tap } from 'rxjs/operators';
 import { browserTargetSpec, host } from '../utils';
 import { lazyModuleFiles, lazyModuleImport } from './lazy-module_spec_large';
 
@@ -65,29 +65,28 @@ describe('Browser Builder rebuilds', () => {
 
     const overrides = { watch: true };
 
-    let buildNumber = 0;
-
+    let buildCount = 0;
+    let phase = 1;
     runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout * 3).pipe(
-      // We must debounce on watch mode because file watchers are not very accurate.
-      // Changes from just before a process runs can be picked up and cause rebuilds.
-      // In this case, cleanup from the test right before this one causes a few rebuilds.
-      debounceTime(1000),
-      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap((buildEvent) => expect(buildEvent.success).toBe(true, 'build should succeed')),
       tap(() => {
-        buildNumber += 1;
-        switch (buildNumber) {
+        buildCount++;
+        const hasLazyChunk = host.scopedSync().exists(join(outputPath, 'lazy-lazy-module.js'));
+        switch (phase) {
           case 1:
             // No lazy chunk should exist.
-            expect(host.scopedSync().exists(join(outputPath, 'lazy-module.js'))).toBe(false);
-            // Write the lazy chunk files. Order matters when writing these, because of imports.
-            host.writeMultipleFiles(lazyModuleFiles);
-            host.writeMultipleFiles(lazyModuleImport);
+            if (!hasLazyChunk) {
+              phase = 2;
+              host.writeMultipleFiles({ ...lazyModuleFiles, ...lazyModuleImport });
+            }
             break;
 
           case 2:
             // A lazy chunk should have been with the filename.
-            expect(host.scopedSync().exists(join(outputPath, 'lazy-lazy-module.js'))).toBe(true);
-            host.writeMultipleFiles(goldenValueFiles);
+            if (hasLazyChunk) {
+              phase = 3;
+              host.writeMultipleFiles(goldenValueFiles);
+            }
             break;
 
           case 3:
@@ -101,15 +100,18 @@ describe('Browser Builder rebuilds', () => {
             const content = virtualFs.fileBufferToString(
               host.scopedSync().read(normalize(fileName)),
             );
-            expect(content).toMatch(re);
-            break;
 
-          default:
+            if (re.test(content)) {
+              phase = 4;
+            }
             break;
         }
       }),
-      take(3),
-    ).toPromise().then(done, done.fail);
+      takeWhile(() => phase < 4),
+      ).toPromise().then(
+        () => done(),
+        () => done.fail(`stuck at phase ${phase} [builds: ${buildCount}]`),
+      );
   });
 
   it('rebuilds on CSS changes', (done) => {

packages/angular_devkit/build_angular/test/browser/replacements_spec_large.ts

@@ -8,7 +8,7 @@
 
 import { runTargetSpec } from '@angular-devkit/architect/testing';
 import { join, normalize, virtualFs } from '@angular-devkit/core';
-import { debounceTime, take, tap } from 'rxjs/operators';
+import { takeWhile, tap } from 'rxjs/operators';
 import { browserTargetSpec, host } from '../utils';
 
 
@@ -112,33 +112,46 @@ describe('Browser Builder file replacements', () => {
       watch: true,
     };
 
-    let buildNumber = 0;
-
-    runTargetSpec(host, browserTargetSpec, overrides, 45000).pipe(
-      debounceTime(1000),
-      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+    let buildCount = 0;
+    let phase = 1;
+    runTargetSpec(host, browserTargetSpec, overrides, 30000).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true, 'build should succeed')),
       tap(() => {
         const fileName = join(outputPath, 'main.js');
         const content = virtualFs.fileBufferToString(host.scopedSync().read(fileName));
-        buildNumber += 1;
-
-        switch (buildNumber) {
+        const has42 = /meaning\s*=\s*42/.test(content);
+        buildCount++;
+        switch (phase) {
           case 1:
-            expect(content).toMatch(/meaning\s*=\s*42/);
-            expect(content).not.toMatch(/meaning\s*=\s*10/);
-            host.writeMultipleFiles({
-              'src/meaning-too.ts': 'export var meaning = 84;',
-            });
+            const has10 = /meaning\s*=\s*10/.test(content);
+
+            if (has42 && !has10) {
+              phase = 2;
+              host.writeMultipleFiles({
+                'src/meaning-too.ts': 'export var meaning = 84;',
+              });
+            }
             break;
 
           case 2:
-            expect(content).toMatch(/meaning\s*=\s*84/);
-            expect(content).not.toMatch(/meaning\s*=\s*42/);
+            const has84 = /meaning\s*=\s*84/.test(content);
+
+            if (has84 && !has42) {
+              phase = 3;
+            } else {
+              // try triggering a rebuild again
+              host.writeMultipleFiles({
+                'src/meaning-too.ts': 'export var meaning = 84;',
+              });
+            }
             break;
         }
       }),
-      take(2),
-    ).toPromise().then(() => done(), done.fail);
+      takeWhile(() => phase < 3),
+    ).toPromise().then(
+      () => done(),
+      () => done.fail(`stuck at phase ${phase} [builds: ${buildCount}]`),
+    );
   });
 
 });