fix(@schematics/angular): remove compileComponents from component test schematic

`compileComponents` is not necessary when using the CLI (as the templates are inlined) and just adds boilerplate code. So we can remove it from the test schematic and make it independent from `async/await` (only place we would have it in the CLI generated code, and in most Angular apps).

Author: cexbrayat

packages/angular_devkit/build_angular/src/builders/karma/tests/options/assets_spec.ts

@@ -23,7 +23,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
             import { NgModule } from '@angular/core';
             import { HttpClientModule } from '@angular/common/http';
             import { AppComponent } from './app.component';
-    
+
             @NgModule({
               declarations: [
                 AppComponent
@@ -40,7 +40,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         './src/app/app.component.ts': `
             import { Component } from '@angular/core';
             import { HttpClient } from '@angular/common/http';
-    
+
             @Component({
               selector: 'app-root',
               template: '<p *ngFor="let asset of assets">{{ asset.content }}</p>'
@@ -62,19 +62,13 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
             import { TestBed } from '@angular/core/testing';
             import { HttpClientModule } from '@angular/common/http';
             import { AppComponent } from './app.component';
-    
+
             describe('AppComponent', () => {
-              beforeEach(async () => {
-                await TestBed.configureTestingModule({
-                  imports: [
-                    HttpClientModule
-                  ],
-                  declarations: [
-                    AppComponent
-                  ]
-                }).compileComponents();
-              });
-    
+              beforeEach(() => TestBed.configureTestingModule({
+                imports: [HttpClientModule],
+                declarations: [AppComponent]
+              }));
+
               it('should create the app', () => {
                 const fixture = TestBed.createComponent(AppComponent);
                 const app = fixture.debugElement.componentInstance;

packages/angular_devkit/build_angular/src/builders/karma/tests/options/styles_spec.ts

@@ -29,15 +29,9 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
           import { AppComponent } from './app.component';
 
           describe('AppComponent', () => {
-            beforeEach(async () => {
-              await TestBed.configureTestingModule({
-                imports: [
-                ],
-                declarations: [
-                  AppComponent
-                ]
-              }).compileComponents();
-            });
+            beforeEach(() => TestBed.configureTestingModule({
+              declarations: [AppComponent]
+            }));
 
             it('should not contain text that is hidden via css', () => {
               const fixture = TestBed.createComponent(AppComponent);
@@ -97,16 +91,10 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         import { HttpClientModule } from '@angular/common/http';
         import { AppComponent } from './app.component';
         describe('AppComponent', () => {
-          beforeEach(async () => {
-            await TestBed.configureTestingModule({
-              imports: [
-                HttpClientModule
-              ],
-              declarations: [
-                AppComponent
-              ]
-            }).compileComponents();
-          });
+          beforeEach(() => TestBed.configureTestingModule({
+            imports: [HttpClientModule],
+            declarations: [AppComponent]
+          }));
           it('should create the app', () => {
             const fixture = TestBed.createComponent(AppComponent);
             const app = fixture.debugElement.componentInstance;

packages/angular_devkit/build_angular/src/builders/karma/tests/options/web-worker-tsconfig_spec.ts

@@ -30,7 +30,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         }`,
         'src/app/app.worker.ts': `
         /// <reference lib="webworker" />
-  
+
         const prefix: string = 'Data: ';
         addEventListener('message', ({ data }) => {
           postMessage(prefix + data);
@@ -52,13 +52,9 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         import { AppComponent } from './app.component';
 
         describe('AppComponent', () => {
-          beforeEach(async () => {
-            await TestBed.configureTestingModule({
-              declarations: [
-                AppComponent
-              ]
-            }).compileComponents();
-          });
+          beforeEach(() => TestBed.configureTestingModule({
+            declarations: [AppComponent]
+          }));
 
           it('worker should be defined', () => {
             const fixture = TestBed.createComponent(AppComponent);
@@ -82,13 +78,9 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         import { AppComponent } from './app.component';
 
         describe('AppComponent', () => {
-          beforeEach(async () => {
-            await TestBed.configureTestingModule({
-              declarations: [
-                AppComponent
-              ]
-            }).compileComponents();
-          });
+          beforeEach(() => TestBed.configureTestingModule({
+            declarations: [AppComponent]
+          }));
 
           it('worker should throw', () => {
             expect(() => TestBed.createComponent(AppComponent))

packages/angular_devkit/build_angular/test/hello-world-app/src/app/app.component.spec.ts

@@ -9,11 +9,9 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [AppComponent],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent],
+  }));
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;

packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/src/lib/lib.component.spec.ts

@@ -14,12 +14,9 @@ describe('LibComponent', () => {
   let component: LibComponent;
   let fixture: ComponentFixture<LibComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LibComponent ]
-    })
-    .compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [LibComponent]
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LibComponent);

packages/angular_devkit/build_webpack/test/angular-app/src/app/app.component.spec.ts

@@ -9,10 +9,10 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() => {
+    TestBed.configureTestingModule({
       declarations: [AppComponent],
-    }).compileComponents();
+    });
   });
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template

@@ -3,16 +3,10 @@ import { RouterTestingModule } from '@angular/router/testing';<% } %>
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({<% if (routing) { %>
-      imports: [
-        RouterTestingModule
-      ],<% } %>
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({<% if (routing) { %>
+    imports: [RouterTestingModule],<% } %>
+    declarations: [AppComponent]
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template

@@ -2,11 +2,9 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [AppComponent]
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -6,12 +6,10 @@ describe('<%= classify(name) %><%= classify(type) %>', () => {
   let component: <%= classify(name) %><%= classify(type) %>;
   let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      <%= standalone ? 'imports' : 'declarations' %>: [ <%= classify(name) %><%= classify(type) %> ]
-    })
-    .compileComponents();
-
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
+    });
     fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
     component = fixture.componentInstance;
     fixture.detectChanges();

packages/schematics/angular/component/index_spec.ts

@@ -431,7 +431,7 @@ describe('Component Schematic', () => {
     const options = { ...defaultOptions, standalone: true };
     const tree = await schematicRunner.runSchematic('component', options, appTree);
     const testContent = tree.readContent('/projects/bar/src/app/foo/foo.component.spec.ts');
-    expect(testContent).toContain('imports: [ FooComponent ]');
+    expect(testContent).toContain('imports: [FooComponent]');
     expect(testContent).not.toContain('declarations');
   });
 });

tests/legacy-cli/e2e/assets/13.0-project/src/app/app.component.spec.ts

@@ -3,16 +3,10 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

tests/legacy-cli/e2e/tests/test/test-jasmine-clock.ts

@@ -18,12 +18,10 @@ export default async function () {
       jasmine.clock().uninstall();
     });
 
-    beforeEach(async () => {
-      await TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
-        declarations: [AppComponent],
-      }).compileComponents();
-    });
+    beforeEach(() => TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+    }));
 
     it('should create the app', () => {
       const fixture = TestBed.createComponent(AppComponent);

tests/legacy-cli/e2e/tests/test/test-scripts.ts

@@ -30,11 +30,9 @@ export default async function () {
       import { AppComponent } from './app.component';
 
       describe('AppComponent', () => {
-        beforeEach(async () => {
-          await TestBed.configureTestingModule({
-            declarations: [ AppComponent ]
-          }).compileComponents();
-        });
+        beforeEach(() => TestBed.configureTestingModule({
+          declarations: [AppComponent]
+        }));
 
         it('should have access to string-script.js', () => {
           let app = TestBed.createComponent(AppComponent).debugElement.componentInstance;