diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 6bcc2a4aa280..4c08aaa2e277 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -1,6 +1,6 @@ import {ComponentFixture, fakeAsync, TestBed, tick, flush} from '@angular/core/testing'; import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms'; -import {Component, DebugElement, ViewChild} from '@angular/core'; +import {Component, DebugElement, ViewChild, Type} from '@angular/core'; import {By} from '@angular/platform-browser'; import {dispatchFakeEvent} from '@angular/cdk/testing'; import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index'; @@ -12,28 +12,14 @@ import {MutationObserverFactory} from '@angular/cdk/observers'; describe('MatCheckbox', () => { let fixture: ComponentFixture; - beforeEach(fakeAsync(() => { + function createComponent(componentType: Type): ComponentFixture { TestBed.configureTestingModule({ imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], - declarations: [ - SingleCheckbox, - CheckboxWithFormDirectives, - MultipleCheckboxes, - CheckboxWithNgModel, - CheckboxWithTabIndex, - CheckboxWithAriaLabel, - CheckboxWithAriaLabelledby, - CheckboxWithNameAttribute, - CheckboxWithChangeEvent, - CheckboxWithFormControl, - CheckboxWithoutLabel, - CheckboxWithTabindexAttr, - CheckboxUsingViewChild, - ] - }); + declarations: [componentType], + }).compileComponents(); - TestBed.compileComponents(); - })); + return TestBed.createComponent(componentType); + } describe('basic behaviors', () => { let checkboxDebugElement: DebugElement; @@ -44,7 +30,7 @@ describe('MatCheckbox', () => { let labelElement: HTMLLabelElement; beforeEach(() => { - fixture = TestBed.createComponent(SingleCheckbox); + fixture = createComponent(SingleCheckbox); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -547,15 +533,13 @@ describe('MatCheckbox', () => { TestBed.resetTestingModule(); TestBed.configureTestingModule({ imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], - declarations: [ - SingleCheckbox, - ], + declarations: [SingleCheckbox], providers: [ {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'} ] }); - fixture = TestBed.createComponent(SingleCheckbox); + fixture = createComponent(SingleCheckbox); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -586,15 +570,13 @@ describe('MatCheckbox', () => { TestBed.resetTestingModule(); TestBed.configureTestingModule({ imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], - declarations: [ - SingleCheckbox, - ], + declarations: [SingleCheckbox], providers: [ {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'} ] }); - fixture = TestBed.createComponent(SingleCheckbox); + fixture = createComponent(SingleCheckbox); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -658,7 +640,7 @@ describe('MatCheckbox', () => { let labelElement: HTMLLabelElement; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithChangeEvent); + fixture = createComponent(CheckboxWithChangeEvent); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -708,7 +690,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; it('should use the provided aria-label', () => { - fixture = TestBed.createComponent(CheckboxWithAriaLabel); + fixture = createComponent(CheckboxWithAriaLabel); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -718,7 +700,7 @@ describe('MatCheckbox', () => { }); it('should not set the aria-label attribute if no value is provided', () => { - fixture = TestBed.createComponent(SingleCheckbox); + fixture = createComponent(SingleCheckbox); fixture.detectChanges(); expect(fixture.nativeElement.querySelector('input').hasAttribute('aria-label')).toBe(false); @@ -731,7 +713,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; it('should use the provided aria-labelledby', () => { - fixture = TestBed.createComponent(CheckboxWithAriaLabelledby); + fixture = createComponent(CheckboxWithAriaLabelledby); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -741,7 +723,7 @@ describe('MatCheckbox', () => { }); it('should not assign aria-labelledby if none is provided', () => { - fixture = TestBed.createComponent(SingleCheckbox); + fixture = createComponent(SingleCheckbox); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -758,7 +740,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithTabIndex); + fixture = createComponent(CheckboxWithTabIndex); fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; @@ -788,7 +770,7 @@ describe('MatCheckbox', () => { describe('with native tabindex attribute', () => { it('should properly detect native tabindex attribute', fakeAsync(() => { - fixture = TestBed.createComponent(CheckboxWithTabindexAttr); + fixture = createComponent(CheckboxWithTabindexAttr); fixture.detectChanges(); const checkbox = fixture.debugElement @@ -805,7 +787,7 @@ describe('MatCheckbox', () => { let testComponent: CheckboxUsingViewChild; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxUsingViewChild); + fixture = createComponent(CheckboxUsingViewChild); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -856,7 +838,7 @@ describe('MatCheckbox', () => { describe('with multiple checkboxes', () => { beforeEach(() => { - fixture = TestBed.createComponent(MultipleCheckboxes); + fixture = createComponent(MultipleCheckboxes); fixture.detectChanges(); }); @@ -878,7 +860,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithFormDirectives); + fixture = createComponent(CheckboxWithFormDirectives); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -922,7 +904,7 @@ describe('MatCheckbox', () => { let testComponent: CheckboxWithNgModel; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithNgModel); + fixture = createComponent(CheckboxWithNgModel); fixture.detectChanges(); let checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -953,7 +935,7 @@ describe('MatCheckbox', () => { describe('with name attribute', () => { beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithNameAttribute); + fixture = createComponent(CheckboxWithNameAttribute); fixture.detectChanges(); }); @@ -972,7 +954,7 @@ describe('MatCheckbox', () => { let inputElement: HTMLInputElement; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithFormControl); + fixture = createComponent(CheckboxWithFormControl); fixture.detectChanges(); checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -1003,7 +985,7 @@ describe('MatCheckbox', () => { let checkboxInnerContainer: HTMLElement; beforeEach(() => { - fixture = TestBed.createComponent(CheckboxWithoutLabel); + fixture = createComponent(CheckboxWithoutLabel); const checkboxDebugEl = fixture.debugElement.query(By.directive(MatCheckbox)); @@ -1055,7 +1037,7 @@ describe('MatCheckbox', () => { }) .compileComponents(); - fixture = TestBed.createComponent(CheckboxWithoutLabel); + fixture = createComponent(CheckboxWithoutLabel); checkboxInnerContainer = fixture.debugElement .query(By.css('.mat-checkbox-inner-container')).nativeElement;