Skip to content

Commit 2c6fb9b

Browse files
crisbetovictoriaaa234
crisbeto
authored and
victoriaaa234
committed
refactor(checkbox): improve unit test speed (#11967)
1 parent e7bb368 commit 2c6fb9b

File tree

1 file changed

+26
-44
lines changed

1 file changed

+26
-44
lines changed

‎src/lib/checkbox/checkbox.spec.ts

Lines changed: 26 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ComponentFixture, fakeAsync, TestBed, tick, flush} from '@angular/core/testing';
22
import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
3-
import {Component, DebugElement, ViewChild} from '@angular/core';
3+
import {Component, DebugElement, ViewChild, Type} from '@angular/core';
44
import {By} from '@angular/platform-browser';
55
import {dispatchFakeEvent} from '@angular/cdk/testing';
66
import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
@@ -12,28 +12,14 @@ import {MutationObserverFactory} from '@angular/cdk/observers';
1212
describe('MatCheckbox', () => {
1313
let fixture: ComponentFixture<any>;
1414

15-
beforeEach(fakeAsync(() => {
15+
function createComponent<T>(componentType: Type<T>): ComponentFixture<T> {
1616
TestBed.configureTestingModule({
1717
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
18-
declarations: [
19-
SingleCheckbox,
20-
CheckboxWithFormDirectives,
21-
MultipleCheckboxes,
22-
CheckboxWithNgModel,
23-
CheckboxWithTabIndex,
24-
CheckboxWithAriaLabel,
25-
CheckboxWithAriaLabelledby,
26-
CheckboxWithNameAttribute,
27-
CheckboxWithChangeEvent,
28-
CheckboxWithFormControl,
29-
CheckboxWithoutLabel,
30-
CheckboxWithTabindexAttr,
31-
CheckboxUsingViewChild,
32-
]
33-
});
18+
declarations: [componentType],
19+
}).compileComponents();
3420

35-
TestBed.compileComponents();
36-
}));
21+
return TestBed.createComponent<T>(componentType);
22+
}
3723

3824
describe('basic behaviors', () => {
3925
let checkboxDebugElement: DebugElement;
@@ -44,7 +30,7 @@ describe('MatCheckbox', () => {
4430
let labelElement: HTMLLabelElement;
4531

4632
beforeEach(() => {
47-
fixture = TestBed.createComponent(SingleCheckbox);
33+
fixture = createComponent(SingleCheckbox);
4834
fixture.detectChanges();
4935

5036
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -547,15 +533,13 @@ describe('MatCheckbox', () => {
547533
TestBed.resetTestingModule();
548534
TestBed.configureTestingModule({
549535
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
550-
declarations: [
551-
SingleCheckbox,
552-
],
536+
declarations: [SingleCheckbox],
553537
providers: [
554538
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}
555539
]
556540
});
557541

558-
fixture = TestBed.createComponent(SingleCheckbox);
542+
fixture = createComponent(SingleCheckbox);
559543
fixture.detectChanges();
560544

561545
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -586,15 +570,13 @@ describe('MatCheckbox', () => {
586570
TestBed.resetTestingModule();
587571
TestBed.configureTestingModule({
588572
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
589-
declarations: [
590-
SingleCheckbox,
591-
],
573+
declarations: [SingleCheckbox],
592574
providers: [
593575
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}
594576
]
595577
});
596578

597-
fixture = TestBed.createComponent(SingleCheckbox);
579+
fixture = createComponent(SingleCheckbox);
598580
fixture.detectChanges();
599581

600582
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -658,7 +640,7 @@ describe('MatCheckbox', () => {
658640
let labelElement: HTMLLabelElement;
659641

660642
beforeEach(() => {
661-
fixture = TestBed.createComponent(CheckboxWithChangeEvent);
643+
fixture = createComponent(CheckboxWithChangeEvent);
662644
fixture.detectChanges();
663645

664646
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -708,7 +690,7 @@ describe('MatCheckbox', () => {
708690
let inputElement: HTMLInputElement;
709691

710692
it('should use the provided aria-label', () => {
711-
fixture = TestBed.createComponent(CheckboxWithAriaLabel);
693+
fixture = createComponent(CheckboxWithAriaLabel);
712694
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
713695
checkboxNativeElement = checkboxDebugElement.nativeElement;
714696
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
@@ -718,7 +700,7 @@ describe('MatCheckbox', () => {
718700
});
719701

720702
it('should not set the aria-label attribute if no value is provided', () => {
721-
fixture = TestBed.createComponent(SingleCheckbox);
703+
fixture = createComponent(SingleCheckbox);
722704
fixture.detectChanges();
723705

724706
expect(fixture.nativeElement.querySelector('input').hasAttribute('aria-label')).toBe(false);
@@ -731,7 +713,7 @@ describe('MatCheckbox', () => {
731713
let inputElement: HTMLInputElement;
732714

733715
it('should use the provided aria-labelledby', () => {
734-
fixture = TestBed.createComponent(CheckboxWithAriaLabelledby);
716+
fixture = createComponent(CheckboxWithAriaLabelledby);
735717
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
736718
checkboxNativeElement = checkboxDebugElement.nativeElement;
737719
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
@@ -741,7 +723,7 @@ describe('MatCheckbox', () => {
741723
});
742724

743725
it('should not assign aria-labelledby if none is provided', () => {
744-
fixture = TestBed.createComponent(SingleCheckbox);
726+
fixture = createComponent(SingleCheckbox);
745727
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
746728
checkboxNativeElement = checkboxDebugElement.nativeElement;
747729
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
@@ -758,7 +740,7 @@ describe('MatCheckbox', () => {
758740
let inputElement: HTMLInputElement;
759741

760742
beforeEach(() => {
761-
fixture = TestBed.createComponent(CheckboxWithTabIndex);
743+
fixture = createComponent(CheckboxWithTabIndex);
762744
fixture.detectChanges();
763745

764746
testComponent = fixture.debugElement.componentInstance;
@@ -788,7 +770,7 @@ describe('MatCheckbox', () => {
788770

789771
describe('with native tabindex attribute', () => {
790772
it('should properly detect native tabindex attribute', fakeAsync(() => {
791-
fixture = TestBed.createComponent(CheckboxWithTabindexAttr);
773+
fixture = createComponent(CheckboxWithTabindexAttr);
792774
fixture.detectChanges();
793775

794776
const checkbox = fixture.debugElement
@@ -805,7 +787,7 @@ describe('MatCheckbox', () => {
805787
let testComponent: CheckboxUsingViewChild;
806788

807789
beforeEach(() => {
808-
fixture = TestBed.createComponent(CheckboxUsingViewChild);
790+
fixture = createComponent(CheckboxUsingViewChild);
809791
fixture.detectChanges();
810792

811793
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -856,7 +838,7 @@ describe('MatCheckbox', () => {
856838

857839
describe('with multiple checkboxes', () => {
858840
beforeEach(() => {
859-
fixture = TestBed.createComponent(MultipleCheckboxes);
841+
fixture = createComponent(MultipleCheckboxes);
860842
fixture.detectChanges();
861843
});
862844

@@ -878,7 +860,7 @@ describe('MatCheckbox', () => {
878860
let inputElement: HTMLInputElement;
879861

880862
beforeEach(() => {
881-
fixture = TestBed.createComponent(CheckboxWithFormDirectives);
863+
fixture = createComponent(CheckboxWithFormDirectives);
882864
fixture.detectChanges();
883865

884866
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -922,7 +904,7 @@ describe('MatCheckbox', () => {
922904
let testComponent: CheckboxWithNgModel;
923905

924906
beforeEach(() => {
925-
fixture = TestBed.createComponent(CheckboxWithNgModel);
907+
fixture = createComponent(CheckboxWithNgModel);
926908
fixture.detectChanges();
927909

928910
let checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -953,7 +935,7 @@ describe('MatCheckbox', () => {
953935

954936
describe('with name attribute', () => {
955937
beforeEach(() => {
956-
fixture = TestBed.createComponent(CheckboxWithNameAttribute);
938+
fixture = createComponent(CheckboxWithNameAttribute);
957939
fixture.detectChanges();
958940
});
959941

@@ -972,7 +954,7 @@ describe('MatCheckbox', () => {
972954
let inputElement: HTMLInputElement;
973955

974956
beforeEach(() => {
975-
fixture = TestBed.createComponent(CheckboxWithFormControl);
957+
fixture = createComponent(CheckboxWithFormControl);
976958
fixture.detectChanges();
977959

978960
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
@@ -1003,7 +985,7 @@ describe('MatCheckbox', () => {
1003985
let checkboxInnerContainer: HTMLElement;
1004986

1005987
beforeEach(() => {
1006-
fixture = TestBed.createComponent(CheckboxWithoutLabel);
988+
fixture = createComponent(CheckboxWithoutLabel);
1007989

1008990
const checkboxDebugEl = fixture.debugElement.query(By.directive(MatCheckbox));
1009991

@@ -1055,7 +1037,7 @@ describe('MatCheckbox', () => {
10551037
})
10561038
.compileComponents();
10571039

1058-
fixture = TestBed.createComponent(CheckboxWithoutLabel);
1040+
fixture = createComponent(CheckboxWithoutLabel);
10591041
checkboxInnerContainer = fixture.debugElement
10601042
.query(By.css('.mat-checkbox-inner-container')).nativeElement;
10611043

0 commit comments

Comments
 (0)