test(multiple): switch CDK tests to standalone (#31113)

Switches the remaining CDK tests that weren't standalone to standalone.

For the `popover-edit` tests specifically I ended up removing the templates that were created using string interpolation, because it made them hard to read and it can be a problem if we start running the tests in AoT.

Author: crisbeto

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -46,18 +46,6 @@ describe('Dialog', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        DialogModule,
-        ComponentWithChildViewContainer,
-        ComponentWithTemplateRef,
-        PizzaMsg,
-        ContentElementDialog,
-        DialogWithInjectedData,
-        DialogWithoutFocusableElements,
-        DirectiveWithViewContainer,
-        TemplateInjectorParentComponent,
-        TemplateInjectorInnerDirective,
-      ],
       providers: [
         {provide: Location, useClass: SpyLocation},
         {provide: TEMPLATE_INJECTOR_TEST_TOKEN, useValue: 'hello from test module'},
@@ -1416,7 +1404,6 @@ class DirectiveWithViewContainer {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: 'hello',
-  standalone: false,
 })
 class ComponentWithOnPushViewContainer {
   viewContainerRef = inject(ViewContainerRef);
@@ -1509,7 +1496,6 @@ class DialogWithoutFocusableElements {}
 @Component({
   template: `<button>I'm a button</button>`,
   encapsulation: ViewEncapsulation.ShadowDom,
-  standalone: false,
 })
 class ShadowDomComponent {}
 

src/cdk/dialog/dialog.spec.ts

@@ -4,13 +4,9 @@ import {TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '../testing/private';
-import {CdkListbox, CdkListboxModule, CdkOption, ListboxValueChangeEvent} from './index';
+import {CdkListbox, CdkOption, ListboxValueChangeEvent} from './index';
 
-function setupComponent<T, O = string>(component: Type<T>, imports: any[] = []) {
-  TestBed.configureTestingModule({
-    imports: [CdkListboxModule, ...imports],
-    declarations: [component],
-  });
+function setupComponent<T, O = string>(component: Type<T>) {
   const fixture = TestBed.createComponent(component);
   fixture.detectChanges();
 
@@ -861,29 +857,23 @@ describe('CdkOption and CdkListbox', () => {
 
   describe('with FormControl', () => {
     it('should reflect disabled state of the FormControl', () => {
-      const {testComponent, fixture, listbox} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture, listbox} = setupComponent(ListboxWithFormControl);
       testComponent.formControl.disable();
       fixture.detectChanges();
 
       expect(listbox.disabled).toBeTrue();
     });
 
     it('should update when FormControl value changes', () => {
-      const {testComponent, fixture, options} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture, options} = setupComponent(ListboxWithFormControl);
       testComponent.formControl.setValue(['banana']);
       fixture.detectChanges();
 
       expect(options[2].isSelected()).toBeTrue();
     });
 
     it('should update FormControl when selection changes', () => {
-      const {testComponent, fixture, optionEls} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture, optionEls} = setupComponent(ListboxWithFormControl);
       const spy = jasmine.createSpy();
       const subscription = testComponent.formControl.valueChanges.subscribe(spy);
       fixture.detectChanges();
@@ -898,9 +888,7 @@ describe('CdkOption and CdkListbox', () => {
     });
 
     it('should update multi-select listbox when FormControl value changes', () => {
-      const {testComponent, fixture, options} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture, options} = setupComponent(ListboxWithFormControl);
       testComponent.isMultiselectable = true;
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
@@ -912,9 +900,7 @@ describe('CdkOption and CdkListbox', () => {
     });
 
     it('should update FormControl when multi-selection listbox changes', () => {
-      const {testComponent, fixture, optionEls} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture, optionEls} = setupComponent(ListboxWithFormControl);
       testComponent.isMultiselectable = true;
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
@@ -935,9 +921,7 @@ describe('CdkOption and CdkListbox', () => {
     });
 
     it('should throw when multiple values selected in single-select listbox', () => {
-      const {testComponent, fixture} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture} = setupComponent(ListboxWithFormControl);
 
       expect(() => {
         testComponent.formControl.setValue(['orange', 'banana']);
@@ -946,9 +930,7 @@ describe('CdkOption and CdkListbox', () => {
     });
 
     it('should throw when an invalid value is selected', () => {
-      const {testComponent, fixture} = setupComponent(ListboxWithFormControl, [
-        ReactiveFormsModule,
-      ]);
+      const {testComponent, fixture} = setupComponent(ListboxWithFormControl);
       testComponent.isMultiselectable = true;
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
@@ -961,13 +943,13 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should not throw on init with a preselected form control and a dynamic set of options', () => {
       expect(() => {
-        setupComponent(ListboxWithPreselectedFormControl, [ReactiveFormsModule]);
+        setupComponent(ListboxWithPreselectedFormControl);
       }).not.toThrow();
     });
 
     it('should throw on init if the preselected value is invalid', () => {
       expect(() => {
-        setupComponent(ListboxWithInvalidPreselectedFormControl, [ReactiveFormsModule]);
+        setupComponent(ListboxWithInvalidPreselectedFormControl);
       }).toThrowError('Listbox has selected values that do not match any of its options.');
     });
   });
@@ -1000,7 +982,7 @@ describe('CdkOption and CdkListbox', () => {
       <div cdkOption="peach">Peach</div>
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption],
 })
 class ListboxWithOptions {
   changedOption: CdkOption | null;
@@ -1026,7 +1008,7 @@ class ListboxWithOptions {
 
 @Component({
   template: `<div cdkListbox></div>`,
-  standalone: false,
+  imports: [CdkListbox],
 })
 class ListboxWithNoOptions {}
 
@@ -1042,7 +1024,7 @@ class ListboxWithNoOptions {}
       <div cdkOption="peach">Peach</div>
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption, ReactiveFormsModule],
 })
 class ListboxWithFormControl {
   formControl = new FormControl();
@@ -1058,7 +1040,7 @@ class ListboxWithFormControl {
       }
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption, ReactiveFormsModule],
 })
 class ListboxWithPreselectedFormControl {
   options = ['a', 'b', 'c'];
@@ -1073,7 +1055,7 @@ class ListboxWithPreselectedFormControl {
       }
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption, ReactiveFormsModule],
 })
 class ListboxWithInvalidPreselectedFormControl {
   options = ['a', 'b', 'c'];
@@ -1089,7 +1071,7 @@ class ListboxWithInvalidPreselectedFormControl {
       <li cdkOption="peach" cdkOptionTypeaheadLabel="peach">🍑</li>
     </ul>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption],
 })
 class ListboxWithCustomTypeahead {}
 
@@ -1103,7 +1085,7 @@ class ListboxWithCustomTypeahead {}
       <div cdkOption="peach">Peach</div>
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption],
 })
 class ListboxWithBoundValue {
   value = ['banana'];
@@ -1120,7 +1102,7 @@ class ListboxWithBoundValue {
       <div cdkOption="peach">Peach</div>
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption],
 })
 class ListboxWithMultipleBoundValues {
   value = ['apple', 'banana'];
@@ -1134,7 +1116,7 @@ class ListboxWithMultipleBoundValues {
       }
     </div>
   `,
-  standalone: false,
+  imports: [CdkListbox, CdkOption],
 })
 class ListboxWithObjectValues {
   fruits = [{name: 'Apple'}, {name: 'Orange'}, {name: 'Banana'}, {name: 'Peach'}];

src/cdk/listbox/listbox.spec.ts

@@ -1,6 +1,5 @@
-import {Component, ViewChild, ElementRef, Type, ViewChildren, QueryList} from '@angular/core';
-import {CdkMenuModule} from './menu-module';
-import {TestBed, waitForAsync, ComponentFixture} from '@angular/core/testing';
+import {Component, ViewChild, ElementRef, ViewChildren, QueryList} from '@angular/core';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
 import {CdkMenu} from './menu';
 import {CdkContextMenuTrigger} from './context-menu-trigger';
 import {dispatchKeyboardEvent, dispatchMouseEvent} from '../testing/private';
@@ -14,13 +13,6 @@ describe('CdkContextMenuTrigger', () => {
   describe('with simple context menu trigger', () => {
     let fixture: ComponentFixture<SimpleContextMenu>;
 
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [CdkMenuModule],
-        declarations: [SimpleContextMenu],
-      });
-    }));
-
     beforeEach(() => {
       fixture = TestBed.createComponent(SimpleContextMenu);
       fixture.detectChanges();
@@ -164,13 +156,6 @@ describe('CdkContextMenuTrigger', () => {
   describe('nested context menu triggers', () => {
     let fixture: ComponentFixture<NestedContextMenu>;
 
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [CdkMenuModule],
-        declarations: [NestedContextMenu],
-      });
-    }));
-
     beforeEach(() => {
       fixture = TestBed.createComponent(NestedContextMenu);
       fixture.detectChanges();
@@ -279,13 +264,6 @@ describe('CdkContextMenuTrigger', () => {
     let fixture: ComponentFixture<ContextMenuWithSubmenu>;
     let instance: ContextMenuWithSubmenu;
 
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [CdkMenuModule],
-        declarations: [ContextMenuWithSubmenu],
-      });
-    }));
-
     beforeEach(() => {
       fixture = TestBed.createComponent(ContextMenuWithSubmenu);
       fixture.detectChanges();
@@ -310,13 +288,6 @@ describe('CdkContextMenuTrigger', () => {
     let nativeMenuBar: HTMLElement;
     let nativeMenuBarTrigger: HTMLElement;
 
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [CdkMenuModule],
-        declarations: [ContextMenuWithMenuBarAndInlineMenu],
-      });
-    }));
-
     beforeEach(() => {
       fixture = TestBed.createComponent(ContextMenuWithMenuBarAndInlineMenu);
       fixture.detectChanges();
@@ -410,23 +381,10 @@ describe('CdkContextMenuTrigger', () => {
   });
 
   describe('with shared triggered menu', () => {
-    /**
-     * Return a function which builds the given component and renders it.
-     * @param componentClass the component to create
-     */
-    function createComponent<T>(componentClass: Type<T>) {
-      TestBed.configureTestingModule({
-        imports: [CdkMenuModule],
-        declarations: [componentClass],
-      });
-
-      const fixture = TestBed.createComponent(componentClass);
+    it('should allow a context menu and menubar trigger share a menu', () => {
+      const fixture = TestBed.createComponent(MenuBarAndContextTriggerShareMenu);
       fixture.detectChanges();
-      return fixture;
-    }
 
-    it('should allow a context menu and menubar trigger share a menu', () => {
-      const fixture = createComponent(MenuBarAndContextTriggerShareMenu);
       expect(fixture.componentInstance.menus.length).toBe(0);
       fixture.componentInstance.menuBarTrigger.toggle();
       fixture.detectChanges();
@@ -441,11 +399,6 @@ describe('CdkContextMenuTrigger', () => {
   });
 
   it('should be able to pass data to the menu via the template context', () => {
-    TestBed.configureTestingModule({
-      imports: [CdkMenuModule],
-      declarations: [ContextTriggerWithData],
-    });
-
     const fixture = TestBed.createComponent(ContextTriggerWithData);
     fixture.componentInstance.menuData = {message: 'Hello!'};
     fixture.detectChanges();
@@ -467,7 +420,7 @@ describe('CdkContextMenuTrigger', () => {
       </div>
     </ng-template>
   `,
-  standalone: false,
+  imports: [CdkContextMenuTrigger, CdkMenu, CdkMenuItem],
 })
 class SimpleContextMenu {
   @ViewChild(CdkContextMenuTrigger) trigger: CdkContextMenuTrigger;
@@ -496,7 +449,7 @@ class SimpleContextMenu {
       <div #copy_menu cdkMenu></div>
     </ng-template>
   `,
-  standalone: false,
+  imports: [CdkContextMenuTrigger, CdkMenu],
 })
 class NestedContextMenu {
   @ViewChild('cut_trigger', {read: ElementRef}) cutContext: ElementRef<HTMLElement>;
@@ -522,7 +475,7 @@ class NestedContextMenu {
       <div #copy_menu cdkMenu></div>
     </ng-template>
   `,
-  standalone: false,
+  imports: [CdkContextMenuTrigger, CdkMenuTrigger, CdkMenu, CdkMenuItem],
 })
 class ContextMenuWithSubmenu {
   @ViewChild(CdkContextMenuTrigger, {read: ElementRef}) context: ElementRef<HTMLElement>;
@@ -553,7 +506,7 @@ class ContextMenuWithSubmenu {
       <button #inline_menu_button cdkMenuItem></button>
     </div>
   `,
-  standalone: false,
+  imports: [CdkContextMenuTrigger, CdkMenuTrigger, CdkMenu, CdkMenuItem, CdkMenuBar],
 })
 class ContextMenuWithMenuBarAndInlineMenu {
   @ViewChild(CdkMenuBar, {read: ElementRef}) nativeMenuBar: ElementRef;
@@ -582,7 +535,7 @@ class ContextMenuWithMenuBarAndInlineMenu {
       </div>
     </ng-template>
   `,
-  standalone: false,
+  imports: [CdkMenuBar, CdkContextMenuTrigger, CdkMenu, CdkMenuItem, CdkMenuTrigger],
 })
 class MenuBarAndContextTriggerShareMenu {
   @ViewChild(CdkMenuTrigger) menuBarTrigger: CdkMenuTrigger;
@@ -598,7 +551,7 @@ class MenuBarAndContextTriggerShareMenu {
       <div cdkMenu class="test-menu">{{message}}</div>
     </ng-template>
   `,
-  standalone: false,
+  imports: [CdkContextMenuTrigger, CdkMenu],
 })
 class ContextTriggerWithData {
   @ViewChild(CdkContextMenuTrigger, {read: ElementRef}) triggerElement: ElementRef<HTMLElement>;