diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 8e2d77bb5e95..e165192fb5e1 100644 --- a/src/lib/input/input.spec.ts +++ b/src/lib/input/input.spec.ts @@ -1,7 +1,7 @@ import {Platform, PlatformModule} from '@angular/cdk/platform'; import {createFakeEvent, dispatchFakeEvent, wrappedErrorMessage} from '@angular/cdk/testing'; -import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; -import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing'; +import {ChangeDetectionStrategy, Component, ViewChild, Type, Provider} from '@angular/core'; +import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing'; import { FormControl, FormGroup, @@ -35,55 +35,8 @@ import {MatTabsModule} from '@angular/material/tabs'; import {MatTextareaAutosize} from './autosize'; describe('MatInput without forms', () => { - beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ReactiveFormsModule, - ], - declarations: [ - MatInputDateTestController, - MatInputHintLabel2TestController, - MatInputHintLabelTestController, - MatInputInvalidHint2TestController, - MatInputInvalidHintTestController, - MatInputInvalidPlaceholderTestController, - MatInputInvalidTypeTestController, - MatInputMissingMatInputTestController, - MatInputMultipleHintMixedTestController, - MatInputMultipleHintTestController, - MatInputNumberTestController, - MatInputPasswordTestController, - MatInputPlaceholderAttrTestComponent, - MatInputPlaceholderElementTestComponent, - MatInputPlaceholderRequiredTestComponent, - MatInputTextTestController, - MatInputWithDisabled, - MatInputWithDynamicLabel, - MatInputWithId, - MatInputWithPrefixAndSuffix, - MatInputWithRequired, - MatInputWithStaticLabel, - MatInputWithType, - MatInputWithValueBinding, - MatInputTextareaWithBindings, - MatInputWithNgIf, - MatInputOnPush, - MatInputWithReadonlyInput, - MatInputWithLabelAndPlaceholder, - MatInputWithoutPlaceholder, - ], - }); - - TestBed.compileComponents(); - })); - it('should default to floating labels', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithId); + let fixture = createComponent(MatInputWithId); fixture.detectChanges(); let formField = fixture.debugElement.query(By.directive(MatFormField)) @@ -93,21 +46,9 @@ describe('MatInput without forms', () => { })); it('should default to global floating label type', fakeAsync(() => { - TestBed.resetTestingModule(); - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule - ], - declarations: [ - MatInputWithId - ], - providers: [{ provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'always' } }] - }); - - let fixture = TestBed.createComponent(MatInputWithId); + let fixture = createComponent(MatInputWithId, [{ + provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'} + }]); fixture.detectChanges(); let formField = fixture.debugElement.query(By.directive(MatFormField)) @@ -116,33 +57,35 @@ describe('MatInput without forms', () => { 'Expected MatInput to set floatingLabel to always from global option.'); })); - it('should not be treated as empty if type is date', - fakeAsync(inject([Platform], (platform: Platform) => { - if (!(platform.TRIDENT || (platform.SAFARI && !platform.IOS))) { - let fixture = TestBed.createComponent(MatInputDateTestController); - fixture.detectChanges(); + it('should not be treated as empty if type is date', fakeAsync(() => { + const platform = new Platform(); + + if (!(platform.TRIDENT || (platform.SAFARI && !platform.IOS))) { + let fixture = createComponent(MatInputDateTestController); + fixture.detectChanges(); - let el = fixture.debugElement.query(By.css('label')).nativeElement; - expect(el).not.toBeNull(); - expect(el.classList.contains('mat-form-field-empty')).toBe(false); - } - }))); + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('mat-form-field-empty')).toBe(false); + } + })); // Safari Desktop and IE don't support type="date" and fallback to type="text". - it('should be treated as empty if type is date in Safari Desktop or IE', - fakeAsync(inject([Platform], (platform: Platform) => { - if (platform.TRIDENT || (platform.SAFARI && !platform.IOS)) { - let fixture = TestBed.createComponent(MatInputDateTestController); - fixture.detectChanges(); - - let el = fixture.debugElement.query(By.css('label')).nativeElement; - expect(el).not.toBeNull(); - expect(el.classList.contains('mat-form-field-empty')).toBe(true); - } - }))); + it('should be treated as empty if type is date in Safari Desktop or IE', fakeAsync(() => { + const platform = new Platform(); + + if (platform.TRIDENT || (platform.SAFARI && !platform.IOS)) { + let fixture = createComponent(MatInputDateTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('mat-form-field-empty')).toBe(true); + } + })); it('should treat text input type as empty at init', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')).nativeElement; @@ -151,7 +94,7 @@ describe('MatInput without forms', () => { })); it('should treat password input type as empty at init', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPasswordTestController); + let fixture = createComponent(MatInputPasswordTestController); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')).nativeElement; @@ -160,7 +103,7 @@ describe('MatInput without forms', () => { })); it('should treat number input type as empty at init', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputNumberTestController); + let fixture = createComponent(MatInputNumberTestController); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')).nativeElement; @@ -169,7 +112,7 @@ describe('MatInput without forms', () => { })); it('should not be empty after input entered', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')); @@ -187,7 +130,7 @@ describe('MatInput without forms', () => { })); it('should update the placeholder when input entered', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithStaticLabel); + let fixture = createComponent(MatInputWithStaticLabel); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')); @@ -207,7 +150,7 @@ describe('MatInput without forms', () => { })); it('should not be empty when the value set before view init', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithValueBinding); + let fixture = createComponent(MatInputWithValueBinding); fixture.detectChanges(); let labelEl = fixture.debugElement.query(By.css('.mat-form-field-label')).nativeElement; @@ -220,7 +163,7 @@ describe('MatInput without forms', () => { })); it('should add id', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); const inputElement: HTMLInputElement = @@ -233,7 +176,7 @@ describe('MatInput without forms', () => { })); it('should add aria-owns to the label for the associated control', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); const inputElement: HTMLInputElement = @@ -245,7 +188,7 @@ describe('MatInput without forms', () => { })); it('should add aria-required reflecting the required state', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithRequired); + const fixture = createComponent(MatInputWithRequired); fixture.detectChanges(); const inputElement: HTMLInputElement = @@ -262,7 +205,7 @@ describe('MatInput without forms', () => { })); it('should not overwrite existing id', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithId); + let fixture = createComponent(MatInputWithId); fixture.detectChanges(); const inputElement: HTMLInputElement = @@ -275,7 +218,7 @@ describe('MatInput without forms', () => { })); it('validates there\'s only one hint label per side', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputInvalidHintTestController); + let fixture = createComponent(MatInputInvalidHintTestController); expect(() => { try { @@ -289,7 +232,7 @@ describe('MatInput without forms', () => { })); it('validates there\'s only one hint label per side (attribute)', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputInvalidHint2TestController); + let fixture = createComponent(MatInputInvalidHint2TestController); expect(() => { try { @@ -303,7 +246,7 @@ describe('MatInput without forms', () => { })); it('validates there\'s only one placeholder', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputInvalidPlaceholderTestController); + let fixture = createComponent(MatInputInvalidPlaceholderTestController); expect(() => { try { @@ -317,14 +260,14 @@ describe('MatInput without forms', () => { })); it('validates that matInput child is present', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputMissingMatInputTestController); + let fixture = createComponent(MatInputMissingMatInputTestController); expect(() => fixture.detectChanges()).toThrowError( wrappedErrorMessage(getMatFormFieldMissingControlError())); })); it('validates that matInput child is present after initialization', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithNgIf); + let fixture = createComponent(MatInputWithNgIf); expect(() => fixture.detectChanges()).not.toThrowError( wrappedErrorMessage(getMatFormFieldMissingControlError())); @@ -336,7 +279,7 @@ describe('MatInput without forms', () => { })); it('validates the type', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputInvalidTypeTestController); + let fixture = createComponent(MatInputInvalidTypeTestController); // Technically this throws during the OnChanges detection phase, // so the error is really a ChangeDetectionError and it becomes @@ -347,7 +290,7 @@ describe('MatInput without forms', () => { })); it('supports hint labels attribute', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabelTestController); + let fixture = createComponent(MatInputHintLabelTestController); fixture.detectChanges(); // If the hint label is empty, expect no label. @@ -359,7 +302,7 @@ describe('MatInput without forms', () => { })); it('sets an id on hint labels', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabelTestController); + let fixture = createComponent(MatInputHintLabelTestController); fixture.componentInstance.label = 'label'; fixture.detectChanges(); @@ -370,7 +313,7 @@ describe('MatInput without forms', () => { })); it('supports hint labels elements', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabel2TestController); + let fixture = createComponent(MatInputHintLabel2TestController); fixture.detectChanges(); // In this case, we should have an empty . @@ -384,7 +327,7 @@ describe('MatInput without forms', () => { })); it('sets an id on the hint element', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabel2TestController); + let fixture = createComponent(MatInputHintLabel2TestController); fixture.componentInstance.label = 'label'; fixture.detectChanges(); @@ -395,7 +338,7 @@ describe('MatInput without forms', () => { })); it('supports placeholder attribute', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPlaceholderAttrTestComponent); + let fixture = createComponent(MatInputPlaceholderAttrTestComponent); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; @@ -415,7 +358,7 @@ describe('MatInput without forms', () => { })); it('supports placeholder element', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPlaceholderElementTestComponent); + let fixture = createComponent(MatInputPlaceholderElementTestComponent); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')); @@ -432,7 +375,7 @@ describe('MatInput without forms', () => { })); it('supports placeholder required star', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent); + let fixture = createComponent(MatInputPlaceholderRequiredTestComponent); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')); @@ -441,7 +384,7 @@ describe('MatInput without forms', () => { })); it('should hide the required star if input is disabled', () => { - const fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent); + const fixture = createComponent(MatInputPlaceholderRequiredTestComponent); fixture.componentInstance.disabled = true; fixture.detectChanges(); @@ -453,7 +396,7 @@ describe('MatInput without forms', () => { }); it('should hide the required star from screen readers', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent); + let fixture = createComponent(MatInputPlaceholderRequiredTestComponent); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('.mat-form-field-required-marker')).nativeElement; @@ -462,7 +405,7 @@ describe('MatInput without forms', () => { })); it('hide placeholder required star when set to hide the required marker', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent); + let fixture = createComponent(MatInputPlaceholderRequiredTestComponent); fixture.detectChanges(); let el = fixture.debugElement.query(By.css('label')); @@ -476,7 +419,7 @@ describe('MatInput without forms', () => { })); it('supports the disabled attribute as binding', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithDisabled); + const fixture = createComponent(MatInputWithDisabled); fixture.detectChanges(); const formFieldEl = @@ -496,7 +439,7 @@ describe('MatInput without forms', () => { })); it('supports the required attribute as binding', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithRequired); + let fixture = createComponent(MatInputWithRequired); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; @@ -510,7 +453,7 @@ describe('MatInput without forms', () => { })); it('supports the type attribute as binding', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithType); + let fixture = createComponent(MatInputWithType); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; @@ -524,7 +467,7 @@ describe('MatInput without forms', () => { })); it('supports textarea', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextareaWithBindings); + let fixture = createComponent(MatInputTextareaWithBindings); fixture.detectChanges(); const textarea: HTMLTextAreaElement = fixture.nativeElement.querySelector('textarea'); @@ -532,7 +475,7 @@ describe('MatInput without forms', () => { })); it('sets the aria-describedby when a hintLabel is set', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabelTestController); + let fixture = createComponent(MatInputHintLabelTestController); fixture.componentInstance.label = 'label'; fixture.detectChanges(); @@ -544,7 +487,7 @@ describe('MatInput without forms', () => { })); it('sets the aria-describedby to the id of the mat-hint', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputHintLabel2TestController); + let fixture = createComponent(MatInputHintLabel2TestController); fixture.componentInstance.label = 'label'; fixture.detectChanges(); @@ -556,7 +499,7 @@ describe('MatInput without forms', () => { })); it('sets the aria-describedby with multiple mat-hint instances', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputMultipleHintTestController); + let fixture = createComponent(MatInputMultipleHintTestController); fixture.componentInstance.startId = 'start'; fixture.componentInstance.endId = 'end'; @@ -569,7 +512,7 @@ describe('MatInput without forms', () => { it('sets the aria-describedby when a hintLabel is set, in addition to a mat-hint', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputMultipleHintMixedTestController); + let fixture = createComponent(MatInputMultipleHintMixedTestController); fixture.detectChanges(); @@ -582,7 +525,7 @@ describe('MatInput without forms', () => { })); it('should float when floatLabel is set to default and text is entered', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithDynamicLabel); + let fixture = createComponent(MatInputWithDynamicLabel); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; @@ -608,7 +551,7 @@ describe('MatInput without forms', () => { })); it('should always float the label when floatLabel is set to true', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithDynamicLabel); + let fixture = createComponent(MatInputWithDynamicLabel); fixture.detectChanges(); let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; @@ -631,7 +574,7 @@ describe('MatInput without forms', () => { it('should never float the label when floatLabel is set to false', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithDynamicLabel); + let fixture = createComponent(MatInputWithDynamicLabel); fixture.componentInstance.shouldFloat = 'never'; fixture.detectChanges(); @@ -653,7 +596,7 @@ describe('MatInput without forms', () => { })); it('should be able to toggle the floating label programmatically', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithId); + const fixture = createComponent(MatInputWithId); fixture.detectChanges(); @@ -673,7 +616,7 @@ describe('MatInput without forms', () => { })); it('should not have prefix and suffix elements when none are specified', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithId); + let fixture = createComponent(MatInputWithId); fixture.detectChanges(); let prefixEl = fixture.debugElement.query(By.css('.mat-form-field-prefix')); @@ -684,7 +627,7 @@ describe('MatInput without forms', () => { })); it('should add prefix and suffix elements when specified', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithPrefixAndSuffix); + const fixture = createComponent(MatInputWithPrefixAndSuffix); fixture.detectChanges(); const prefixEl = fixture.debugElement.query(By.css('.mat-form-field-prefix')); @@ -697,7 +640,7 @@ describe('MatInput without forms', () => { })); it('should update empty class when value changes programmatically and OnPush', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputOnPush); + let fixture = createComponent(MatInputOnPush); fixture.detectChanges(); let component = fixture.componentInstance; @@ -712,7 +655,7 @@ describe('MatInput without forms', () => { })); it('should set the focused class when the input is focused', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); let input = fixture.debugElement.query(By.directive(MatInput)) @@ -729,7 +672,7 @@ describe('MatInput without forms', () => { it('should remove the focused class if the input becomes disabled while focused', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputTextTestController); + const fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); const input = fixture.debugElement.query(By.directive(MatInput)).injector.get(MatInput); @@ -749,7 +692,7 @@ describe('MatInput without forms', () => { })); it('should be able to animate the label up and lock it in position', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputTextTestController); + let fixture = createComponent(MatInputTextTestController); fixture.detectChanges(); let inputContainer = fixture.debugElement.query(By.directive(MatFormField)) @@ -774,7 +717,7 @@ describe('MatInput without forms', () => { })); it('should not highlight when focusing a readonly input', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithReadonlyInput); + let fixture = createComponent(MatInputWithReadonlyInput); fixture.detectChanges(); let input = fixture.debugElement.query(By.directive(MatInput)).injector.get(MatInput); @@ -790,7 +733,7 @@ describe('MatInput without forms', () => { })); it('should only show the native placeholder, when there is a label, on focus', () => { - const fixture = TestBed.createComponent(MatInputWithLabelAndPlaceholder); + const fixture = createComponent(MatInputWithLabelAndPlaceholder); fixture.detectChanges(); const container = fixture.debugElement.query(By.css('mat-form-field')).nativeElement; @@ -810,7 +753,7 @@ describe('MatInput without forms', () => { }); it('should always show the native placeholder when floatLabel is set to "always"', () => { - const fixture = TestBed.createComponent(MatInputWithLabelAndPlaceholder); + const fixture = createComponent(MatInputWithLabelAndPlaceholder); fixture.componentInstance.floatLabel = 'always'; fixture.detectChanges(); @@ -821,7 +764,7 @@ describe('MatInput without forms', () => { }); it('should not add the `placeholder` attribute if there is no placeholder', () => { - const fixture = TestBed.createComponent(MatInputWithoutPlaceholder); + const fixture = createComponent(MatInputWithoutPlaceholder); fixture.detectChanges(); const input = fixture.debugElement.query(By.css('input')).nativeElement; @@ -829,7 +772,7 @@ describe('MatInput without forms', () => { }); it('should not show the native placeholder when floatLabel is set to "never"', () => { - const fixture = TestBed.createComponent(MatInputWithLabelAndPlaceholder); + const fixture = createComponent(MatInputWithLabelAndPlaceholder); fixture.componentInstance.floatLabel = 'never'; fixture.detectChanges(); @@ -850,29 +793,6 @@ describe('MatInput without forms', () => { }); describe('MatInput with forms', () => { - - beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ReactiveFormsModule, - ], - declarations: [ - MatInputWithFormControl, - MatInputWithFormErrorMessages, - MatInputWithCustomErrorStateMatcher, - MatInputWithFormGroupErrorMessages, - MatInputZeroTestController, - ], - }); - - TestBed.compileComponents(); - })); - describe('error messages', () => { let fixture: ComponentFixture; let testComponent: MatInputWithFormErrorMessages; @@ -880,7 +800,7 @@ describe('MatInput with forms', () => { let inputEl: HTMLElement; beforeEach(fakeAsync(() => { - fixture = TestBed.createComponent(MatInputWithFormErrorMessages); + fixture = createComponent(MatInputWithFormErrorMessages); fixture.detectChanges(); testComponent = fixture.componentInstance; containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement; @@ -930,8 +850,9 @@ describe('MatInput with forms', () => { it('should display an error message when the parent form group is submitted', fakeAsync(() => { fixture.destroy(); + TestBed.resetTestingModule(); - let groupFixture = TestBed.createComponent(MatInputWithFormGroupErrorMessages); + let groupFixture = createComponent(MatInputWithFormGroupErrorMessages); let component: MatInputWithFormGroupErrorMessages; groupFixture.detectChanges(); @@ -1028,7 +949,7 @@ describe('MatInput with forms', () => { describe('custom error behavior', () => { it('should display an error message when a custom error matcher returns true', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithCustomErrorStateMatcher); + let fixture = createComponent(MatInputWithCustomErrorStateMatcher); fixture.detectChanges(); let component = fixture.componentInstance; @@ -1054,22 +975,9 @@ describe('MatInput with forms', () => { })); it('should display an error message when global error matcher returns true', fakeAsync(() => { - TestBed.resetTestingModule(); - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - ReactiveFormsModule, - ], - declarations: [ - MatInputWithFormErrorMessages - ], - providers: [{provide: ErrorStateMatcher, useValue: {isErrorState: () => true}}] - }); - - let fixture = TestBed.createComponent(MatInputWithFormErrorMessages); + let fixture = createComponent(MatInputWithFormErrorMessages, [{ + provide: ErrorStateMatcher, useValue: {isErrorState: () => true}} + ]); fixture.detectChanges(); @@ -1082,22 +990,9 @@ describe('MatInput with forms', () => { })); it('should display an error message when using ShowOnDirtyErrorStateMatcher', fakeAsync(() => { - TestBed.resetTestingModule(); - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - ReactiveFormsModule, - ], - declarations: [ - MatInputWithFormErrorMessages - ], - providers: [{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}] - }); - - let fixture = TestBed.createComponent(MatInputWithFormErrorMessages); + let fixture = createComponent(MatInputWithFormErrorMessages, [{ + provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher + }]); fixture.detectChanges(); let containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement; @@ -1121,7 +1016,7 @@ describe('MatInput with forms', () => { }); it('should update the value when using FormControl.setValue', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputWithFormControl); + let fixture = createComponent(MatInputWithFormControl); fixture.detectChanges(); let input = fixture.debugElement.query(By.directive(MatInput)) @@ -1135,7 +1030,7 @@ describe('MatInput with forms', () => { })); it('should display disabled styles when using FormControl.disable()', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithFormControl); + const fixture = createComponent(MatInputWithFormControl); fixture.detectChanges(); const formFieldEl = @@ -1155,7 +1050,7 @@ describe('MatInput with forms', () => { })); it('should not treat the number 0 as empty', fakeAsync(() => { - let fixture = TestBed.createComponent(MatInputZeroTestController); + let fixture = createComponent(MatInputZeroTestController); fixture.detectChanges(); flush(); @@ -1167,7 +1062,7 @@ describe('MatInput with forms', () => { })); it('should update when the form field value is patched without emitting', fakeAsync(() => { - const fixture = TestBed.createComponent(MatInputWithFormControl); + const fixture = createComponent(MatInputWithFormControl); fixture.detectChanges(); const el = fixture.debugElement.query(By.css('label')).nativeElement; @@ -1189,25 +1084,7 @@ describe('MatInput with appearance', () => { let containerEl: HTMLElement; beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ReactiveFormsModule, - ], - declarations: [ - MatInputWithAppearance, - ], - }); - - TestBed.compileComponents(); - })); - - beforeEach(fakeAsync(() => { - fixture = TestBed.createComponent(MatInputWithAppearance); + fixture = createComponent(MatInputWithAppearance); fixture.detectChanges(); testComponent = fixture.componentInstance; containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement; @@ -1254,45 +1131,17 @@ describe('MatInput with appearance', () => { describe('MatFormField default options', () => { it('should be legacy appearance if no default options provided', fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ], - declarations: [ - MatInputWithAppearance, - ], - }); - - TestBed.compileComponents(); - - const fixture = TestBed.createComponent(MatInputWithAppearance); + const fixture = createComponent(MatInputWithAppearance); fixture.detectChanges(); flush(); expect(fixture.componentInstance.formField.appearance).toBe('legacy'); })); it('should be legacy appearance if empty default options provided', fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ], - declarations: [ - MatInputWithAppearance, - ], - providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {}}], - }); - - TestBed.compileComponents(); - - const fixture = TestBed.createComponent(MatInputWithAppearance); + const fixture = createComponent(MatInputWithAppearance, [{ + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {}} + ]); + fixture.detectChanges(); flush(); expect(fixture.componentInstance.formField.appearance).toBe('legacy'); @@ -1300,23 +1149,9 @@ describe('MatFormField default options', () => { it('should be custom default appearance if custom appearance specified in default options', fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatFormFieldModule, - MatInputModule, - NoopAnimationsModule, - PlatformModule, - ], - declarations: [ - MatInputWithAppearance, - ], - providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}], - }); - - TestBed.compileComponents(); - - const fixture = TestBed.createComponent(MatInputWithAppearance); + const fixture = createComponent(MatInputWithAppearance, [{ + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}} + ]); fixture.detectChanges(); flush(); expect(fixture.componentInstance.formField.appearance).toBe('fill'); @@ -1324,27 +1159,8 @@ describe('MatFormField default options', () => { }); describe('MatInput with textarea autosize', () => { - beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - MatInputModule, - MatStepperModule, - MatTabsModule, - NoopAnimationsModule, - ], - declarations: [ - AutosizeTextareaInAStep, - AutosizeTextareaInATab, - AutosizeTextareaWithLongPlaceholder, - ], - }); - - TestBed.compileComponents(); - })); - it('should not calculate wrong content height due to long placeholders', () => { - const fixture = TestBed.createComponent(AutosizeTextareaWithLongPlaceholder); + const fixture = createComponent(AutosizeTextareaWithLongPlaceholder); fixture.detectChanges(); const textarea = fixture.nativeElement.querySelector('textarea'); @@ -1364,20 +1180,42 @@ describe('MatInput with textarea autosize', () => { }); it('should work in a tab', () => { - const fixture = TestBed.createComponent(AutosizeTextareaInATab); + const fixture = createComponent(AutosizeTextareaInATab, [], [MatTabsModule]); fixture.detectChanges(); const textarea = fixture.nativeElement.querySelector('textarea'); expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1); }); it('should work in a step', () => { - const fixture = TestBed.createComponent(AutosizeTextareaInAStep); + const fixture = createComponent(AutosizeTextareaInAStep, [], [MatStepperModule]); fixture.detectChanges(); const textarea = fixture.nativeElement.querySelector('textarea'); expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1); }); }); + +function createComponent(component: Type, + providers: Provider[] = [], + imports: any[] = []): ComponentFixture { + TestBed.configureTestingModule({ + imports: [ + FormsModule, + MatFormFieldModule, + MatInputModule, + NoopAnimationsModule, + PlatformModule, + ReactiveFormsModule, + ...imports + ], + declarations: [component], + providers, + }).compileComponents(); + + return TestBed.createComponent(component); +} + + @Component({ template: `