Skip to content

Commit efabc01

Browse files
nitinmalavenitinmalave
authored
test(multiple): refactor unit tests of several components (#22976)
1 parent 5391cad commit efabc01

File tree

7 files changed

+110
-102
lines changed

7 files changed

+110
-102
lines changed

‎src/material/sort/sort.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ describe('MatSort', () => {
7474
}));
7575

7676
it('should use the column definition if used within a cdk table', () => {
77-
let cdkTableMatSortAppFixture = TestBed.createComponent(CdkTableMatSortApp);
78-
let cdkTableMatSortAppComponent = cdkTableMatSortAppFixture.componentInstance;
77+
const cdkTableMatSortAppFixture = TestBed.createComponent(CdkTableMatSortApp);
78+
const cdkTableMatSortAppComponent = cdkTableMatSortAppFixture.componentInstance;
7979

8080
cdkTableMatSortAppFixture.detectChanges();
8181
cdkTableMatSortAppFixture.detectChanges();
@@ -88,8 +88,8 @@ describe('MatSort', () => {
8888
});
8989

9090
it('should use the column definition if used within an mat table', () => {
91-
let matTableMatSortAppFixture = TestBed.createComponent(MatTableMatSortApp);
92-
let matTableMatSortAppComponent = matTableMatSortAppFixture.componentInstance;
91+
const matTableMatSortAppFixture = TestBed.createComponent(MatTableMatSortApp);
92+
const matTableMatSortAppComponent = matTableMatSortAppFixture.componentInstance;
9393

9494
matTableMatSortAppFixture.detectChanges();
9595
matTableMatSortAppFixture.detectChanges();
@@ -469,7 +469,7 @@ function testSingleColumnSortDirectionSequence(
469469
component.matSort.direction = '';
470470

471471
// Run through the sequence to confirm the order
472-
let actualSequence = expectedSequence.map(() => {
472+
const actualSequence = expectedSequence.map(() => {
473473
component.sort(id);
474474

475475
// Check that the sort event's active sort is consistent with the MatSort

‎src/material/stepper/stepper.spec.ts

Lines changed: 65 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,9 @@ describe('MatStepper', () => {
7575
});
7676

7777
it('should default to the first step', () => {
78-
let stepperComponent = fixture.debugElement
78+
const stepperComponent: MatStepper = fixture.debugElement
7979
.query(By.css('mat-stepper'))!.componentInstance;
80+
8081
expect(stepperComponent.selectedIndex).toBe(0);
8182
});
8283

@@ -101,8 +102,9 @@ describe('MatStepper', () => {
101102
});
102103

103104
it('should change selected index on header click', () => {
104-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
105-
let stepperComponent =
105+
const stepHeaders =
106+
fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
107+
const stepperComponent =
106108
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
107109

108110
expect(stepperComponent.selectedIndex).toBe(0);
@@ -126,27 +128,27 @@ describe('MatStepper', () => {
126128
});
127129

128130
it('should set the "tablist" role on stepper', () => {
129-
let stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
131+
const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
130132
expect(stepperEl.getAttribute('role')).toBe('tablist');
131133
});
132134

133135
it('should set aria-expanded of content correctly', () => {
134-
let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
135-
let stepperComponent =
136+
const stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
137+
const stepperComponent =
136138
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
137-
let firstStepContentEl = stepContents[0].nativeElement;
139+
const firstStepContentEl = stepContents[0].nativeElement;
138140
expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true');
139141

140142
stepperComponent.selectedIndex = 1;
141143
fixture.detectChanges();
142144

143145
expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false');
144-
let secondStepContentEl = stepContents[1].nativeElement;
146+
const secondStepContentEl = stepContents[1].nativeElement;
145147
expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true');
146148
});
147149

148150
it('should display the correct label', () => {
149-
let stepperComponent =
151+
const stepperComponent =
150152
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
151153
let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
152154
expect(selectedLabel.textContent).toMatch('Step 1');
@@ -165,7 +167,7 @@ describe('MatStepper', () => {
165167
});
166168

167169
it('should go to next available step when the next button is clicked', () => {
168-
let stepperComponent =
170+
const stepperComponent =
169171
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
170172

171173
expect(stepperComponent.selectedIndex).toBe(0);
@@ -198,7 +200,7 @@ describe('MatStepper', () => {
198200
});
199201

200202
it('should go to previous available step when the previous button is clicked', () => {
201-
let stepperComponent =
203+
const stepperComponent =
202204
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
203205

204206
expect(stepperComponent.selectedIndex).toBe(0);
@@ -232,7 +234,7 @@ describe('MatStepper', () => {
232234
});
233235

234236
it('should set the correct step position for animation', () => {
235-
let stepperComponent =
237+
const stepperComponent =
236238
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
237239

238240
expect(stepperComponent._getAnimationDirection(0)).toBe('current');
@@ -255,10 +257,11 @@ describe('MatStepper', () => {
255257
});
256258

257259
it('should not set focus on header of selected step if header is not clicked', () => {
258-
let stepperComponent =
260+
const stepperComponent =
259261
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
260-
let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
261-
let nextButtonNativeEl = fixture.debugElement
262+
const stepHeaderEl =
263+
fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
264+
const nextButtonNativeEl = fixture.debugElement
262265
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
263266
spyOn(stepHeaderEl, 'focus');
264267
nextButtonNativeEl.click();
@@ -269,10 +272,11 @@ describe('MatStepper', () => {
269272
});
270273

271274
it('should focus next step header if focus is inside the stepper', () => {
272-
let stepperComponent =
275+
const stepperComponent =
273276
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
274-
let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
275-
let nextButtonNativeEl = fixture.debugElement
277+
const stepHeaderEl =
278+
fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
279+
const nextButtonNativeEl = fixture.debugElement
276280
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
277281
spyOn(stepHeaderEl, 'focus');
278282
nextButtonNativeEl.focus();
@@ -284,12 +288,12 @@ describe('MatStepper', () => {
284288
});
285289

286290
it('should only be able to return to a previous step if it is editable', () => {
287-
let stepperComponent =
291+
const stepperComponent =
288292
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
289293

290294
stepperComponent.selectedIndex = 1;
291295
stepperComponent.steps.toArray()[0].editable = false;
292-
let previousButtonNativeEl = fixture.debugElement
296+
const previousButtonNativeEl = fixture.debugElement
293297
.queryAll(By.directive(MatStepperPrevious))[1].nativeElement;
294298
previousButtonNativeEl.click();
295299
fixture.detectChanges();
@@ -304,9 +308,9 @@ describe('MatStepper', () => {
304308
});
305309

306310
it('should set create icon if step is editable and completed', () => {
307-
let stepperComponent =
311+
const stepperComponent =
308312
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
309-
let nextButtonNativeEl = fixture.debugElement
313+
const nextButtonNativeEl = fixture.debugElement
310314
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
311315
expect(stepperComponent._getIndicatorType(0)).toBe('number');
312316
stepperComponent.steps.toArray()[0].editable = true;
@@ -317,9 +321,9 @@ describe('MatStepper', () => {
317321
});
318322

319323
it('should set done icon if step is not editable and is completed', () => {
320-
let stepperComponent =
324+
const stepperComponent =
321325
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
322-
let nextButtonNativeEl = fixture.debugElement
326+
const nextButtonNativeEl = fixture.debugElement
323327
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
324328
expect(stepperComponent._getIndicatorType(0)).toBe('number');
325329
stepperComponent.steps.toArray()[0].editable = false;
@@ -330,11 +334,11 @@ describe('MatStepper', () => {
330334
});
331335

332336
it('should emit an event when the enter animation is done', fakeAsync(() => {
333-
let stepper = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
334-
let selectionChangeSpy = jasmine.createSpy('selectionChange spy');
335-
let animationDoneSpy = jasmine.createSpy('animationDone spy');
336-
let selectionChangeSubscription = stepper.selectionChange.subscribe(selectionChangeSpy);
337-
let animationDoneSubscription = stepper.animationDone.subscribe(animationDoneSpy);
337+
const stepper = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
338+
const selectionChangeSpy = jasmine.createSpy('selectionChange spy');
339+
const animationDoneSpy = jasmine.createSpy('animationDone spy');
340+
const selectionChangeSubscription = stepper.selectionChange.subscribe(selectionChangeSpy);
341+
const animationDoneSubscription = stepper.animationDone.subscribe(animationDoneSpy);
338342

339343
stepper.selectedIndex = 1;
340344
fixture.detectChanges();
@@ -495,7 +499,7 @@ describe('MatStepper', () => {
495499
});
496500

497501
it('should reverse animation in RTL mode', () => {
498-
let stepperComponent =
502+
const stepperComponent =
499503
fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
500504

501505
expect(stepperComponent._getAnimationDirection(0)).toBe('current');
@@ -543,15 +547,15 @@ describe('MatStepper', () => {
543547
expect(testComponent.oneGroup.invalid).toBe(true);
544548
expect(stepperComponent.selectedIndex).toBe(0);
545549

546-
let stepHeaderEl = fixture.debugElement
550+
const stepHeaderEl = fixture.debugElement
547551
.queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement;
548552

549553
stepHeaderEl.click();
550554
fixture.detectChanges();
551555

552556
expect(stepperComponent.selectedIndex).toBe(0);
553557

554-
let nextButtonNativeEl = fixture.debugElement
558+
const nextButtonNativeEl = fixture.debugElement
555559
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
556560
nextButtonNativeEl.click();
557561
fixture.detectChanges();
@@ -567,10 +571,10 @@ describe('MatStepper', () => {
567571
});
568572

569573
it('should not move to next step if current step is pending', () => {
570-
let stepHeaderEl = fixture.debugElement
574+
const stepHeaderEl = fixture.debugElement
571575
.queryAll(By.css('.mat-vertical-stepper-header'))[2].nativeElement;
572576

573-
let nextButtonNativeEl = fixture.debugElement
577+
const nextButtonNativeEl = fixture.debugElement
574578
.queryAll(By.directive(MatStepperNext))[1].nativeElement;
575579

576580
testComponent.oneGroup.get('oneCtrl')!.setValue('input');
@@ -616,7 +620,8 @@ describe('MatStepper', () => {
616620
});
617621

618622
it('should be able to focus step header upon click if it is unable to be selected', () => {
619-
let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
623+
const stepHeaderEl =
624+
fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
620625

621626
fixture.detectChanges();
622627

@@ -834,41 +839,42 @@ describe('MatStepper', () => {
834839

835840
describe('vertical stepper', () => {
836841
it('should be able to use the legacy classes in queries', () => {
837-
let fixture = createComponent(SimpleMatVerticalStepperApp);
842+
const fixture = createComponent(SimpleMatVerticalStepperApp);
838843
fixture.detectChanges();
844+
839845
expect(fixture.componentInstance.legacyTokenStepper).toBeTruthy();
840846
});
841847

842848
it('should set the aria-orientation to "vertical"', () => {
843-
let fixture = createComponent(SimpleMatVerticalStepperApp);
849+
const fixture = createComponent(SimpleMatVerticalStepperApp);
844850
fixture.detectChanges();
845851

846-
let stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
852+
const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
847853
expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical');
848854
});
849855

850856
it('should support using the left/right arrows to move focus', () => {
851-
let fixture = createComponent(SimpleMatVerticalStepperApp);
857+
const fixture = createComponent(SimpleMatVerticalStepperApp);
852858
fixture.detectChanges();
853859

854-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
860+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
855861
assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal');
856862
});
857863

858864
it('should support using the up/down arrows to move focus', () => {
859-
let fixture = createComponent(SimpleMatVerticalStepperApp);
865+
const fixture = createComponent(SimpleMatVerticalStepperApp);
860866
fixture.detectChanges();
861867

862-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
868+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
863869
assertCorrectKeyboardInteraction(fixture, stepHeaders, 'vertical');
864870
});
865871

866872
it('should reverse arrow key focus in RTL mode', () => {
867873
dir.value = 'rtl';
868-
let fixture = createComponent(SimpleMatVerticalStepperApp);
874+
const fixture = createComponent(SimpleMatVerticalStepperApp);
869875
fixture.detectChanges();
870876

871-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
877+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
872878
assertArrowKeyInteractionInRtl(fixture, stepHeaders);
873879
});
874880

@@ -941,41 +947,42 @@ describe('MatStepper', () => {
941947

942948
describe('horizontal stepper', () => {
943949
it('should be able to use the legacy classes in queries', () => {
944-
let fixture = createComponent(SimpleMatHorizontalStepperApp);
950+
const fixture = createComponent(SimpleMatHorizontalStepperApp);
945951
fixture.detectChanges();
952+
946953
expect(fixture.componentInstance.legacyTokenStepper).toBeTruthy();
947954
});
948955

949956
it('should set the aria-orientation to "horizontal"', () => {
950-
let fixture = createComponent(SimpleMatHorizontalStepperApp);
957+
const fixture = createComponent(SimpleMatHorizontalStepperApp);
951958
fixture.detectChanges();
952959

953-
let stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
960+
const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
954961
expect(stepperEl.getAttribute('aria-orientation')).toBe('horizontal');
955962
});
956963

957964
it('should support using the left/right arrows to move focus', () => {
958-
let fixture = createComponent(SimpleMatHorizontalStepperApp);
965+
const fixture = createComponent(SimpleMatHorizontalStepperApp);
959966
fixture.detectChanges();
960967

961-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
968+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
962969
assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal');
963970
});
964971

965972
it('should reverse arrow key focus in RTL mode', () => {
966973
dir.value = 'rtl';
967-
let fixture = createComponent(SimpleMatHorizontalStepperApp);
974+
const fixture = createComponent(SimpleMatHorizontalStepperApp);
968975
fixture.detectChanges();
969976

970-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
977+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
971978
assertArrowKeyInteractionInRtl(fixture, stepHeaders);
972979
});
973980

974981
it('should reverse arrow key focus when switching into RTL after init', () => {
975-
let fixture = createComponent(SimpleMatHorizontalStepperApp);
982+
const fixture = createComponent(SimpleMatHorizontalStepperApp);
976983
fixture.detectChanges();
977984

978-
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
985+
const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
979986
assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal');
980987

981988
dir.value = 'rtl';
@@ -1246,7 +1253,7 @@ describe('MatStepper', () => {
12461253
});
12471254

12481255
it('should show done state when step is completed and its not the current step', () => {
1249-
let nextButtonNativeEl = fixture.debugElement
1256+
const nextButtonNativeEl = fixture.debugElement
12501257
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
12511258

12521259
stepper.selectedIndex = 1;
@@ -1421,9 +1428,9 @@ describe('MatStepper', () => {
14211428
function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
14221429
stepHeaders: DebugElement[],
14231430
orientation: StepperOrientation) {
1424-
let stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
1425-
let nextKey = orientation === 'vertical' ? DOWN_ARROW : RIGHT_ARROW;
1426-
let prevKey = orientation === 'vertical' ? UP_ARROW : LEFT_ARROW;
1431+
const stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
1432+
const nextKey = orientation === 'vertical' ? DOWN_ARROW : RIGHT_ARROW;
1433+
const prevKey = orientation === 'vertical' ? UP_ARROW : LEFT_ARROW;
14271434

14281435
expect(stepperComponent._getFocusIndex()).toBe(0);
14291436
expect(stepperComponent.selectedIndex).toBe(0);
@@ -1492,7 +1499,7 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
14921499
/** Asserts that arrow key direction works correctly in RTL mode. */
14931500
function assertArrowKeyInteractionInRtl(fixture: ComponentFixture<any>,
14941501
stepHeaders: DebugElement[]) {
1495-
let stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
1502+
const stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
14961503

14971504
expect(stepperComponent._getFocusIndex()).toBe(0);
14981505

0 commit comments

Comments
 (0)