diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index 775a50faa2b3..98bdb031f657 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -1,4 +1,4 @@ -import {Directionality} from '@angular/cdk/bidi'; +import {Directionality, Direction} from '@angular/cdk/bidi'; import { ENTER, LEFT_ARROW, @@ -28,19 +28,22 @@ import {MatStepperIntl} from './stepper-intl'; const VALID_REGEX = /valid/; -describe('MatHorizontalStepper', () => { - let dir = 'ltr'; +describe('MatStepper', () => { + let dir: Direction; beforeEach(async(() => { + dir = 'ltr'; + TestBed.configureTestingModule({ imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule], declarations: [ - SimpleMatHorizontalStepperApp, + SimpleMatVerticalStepperApp, + LinearMatVerticalStepperApp, + IconOverridesStepper, SimplePreselectedMatHorizontalStepperApp, - LinearMatHorizontalStepperApp, SimpleStepperWithoutStepControl, SimpleStepperWithStepControlAndCompletedBinding, - IconOverridesStepper, + SimpleMatHorizontalStepperApp, ], providers: [ {provide: Directionality, useFactory: () => ({value: dir})} @@ -50,23 +53,23 @@ describe('MatHorizontalStepper', () => { TestBed.compileComponents(); })); - describe('basic horizontal stepper', () => { - let fixture: ComponentFixture; + describe('basic stepper', () => { + let fixture: ComponentFixture; beforeEach(() => { - fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); + fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); }); it('should default to the first step', () => { let stepperComponent = fixture.debugElement - .query(By.css('mat-horizontal-stepper')).componentInstance; + .query(By.css('mat-vertical-stepper')).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); }); it('should throw when a negative `selectedIndex` is assigned', () => { - const stepperComponent: MatHorizontalStepper = fixture.debugElement - .query(By.css('mat-horizontal-stepper')).componentInstance; + const stepperComponent: MatVerticalStepper = fixture.debugElement + .query(By.css('mat-vertical-stepper')).componentInstance; expect(() => { stepperComponent.selectedIndex = -10; @@ -75,8 +78,8 @@ describe('MatHorizontalStepper', () => { }); it('should throw when an out-of-bounds `selectedIndex` is assigned', () => { - const stepperComponent: MatHorizontalStepper = fixture.debugElement - .query(By.css('mat-horizontal-stepper')).componentInstance; + const stepperComponent: MatVerticalStepper = fixture.debugElement + .query(By.css('mat-vertical-stepper')).componentInstance; expect(() => { stepperComponent.selectedIndex = 1337; @@ -85,73 +88,218 @@ describe('MatHorizontalStepper', () => { }); it('should change selected index on header click', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - assertSelectionChangeOnHeaderClick(fixture, stepHeaders); + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + + expect(stepperComponent.selectedIndex).toBe(0); + expect(stepperComponent.selected instanceof MatStep).toBe(true); + + // select the second step + let stepHeaderEl = stepHeaders[1].nativeElement; + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + expect(stepperComponent.selected instanceof MatStep).toBe(true); + + // select the third step + stepHeaderEl = stepHeaders[2].nativeElement; + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); + expect(stepperComponent.selected instanceof MatStep).toBe(true); }); it('should set the "tablist" role on stepper', () => { - let stepperEl = fixture.debugElement.query(By.css('mat-horizontal-stepper')).nativeElement; + let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement; expect(stepperEl.getAttribute('role')).toBe('tablist'); }); - it('should set the proper "aria-orientation"', () => { - let stepperEl = fixture.debugElement.query(By.css('mat-horizontal-stepper')).nativeElement; - expect(stepperEl.getAttribute('aria-orientation')).toBe('horizontal'); - }); - it('should set aria-expanded of content correctly', () => { - let stepContents = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`)); - assertCorrectAriaExpandedAttribute(fixture, stepContents); + let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`)); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + let firstStepContentEl = stepContents[0].nativeElement; + expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true'); + + stepperComponent.selectedIndex = 1; + fixture.detectChanges(); + + expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false'); + let secondStepContentEl = stepContents[1].nativeElement; + expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true'); }); it('should display the correct label', () => { - assertCorrectStepLabel(fixture); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); + expect(selectedLabel.textContent).toMatch('Step 1'); + + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + + selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); + expect(selectedLabel.textContent).toMatch('Step 3'); + + fixture.componentInstance.inputLabel = 'New Label'; + fixture.detectChanges(); + + selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); + expect(selectedLabel.textContent).toMatch('New Label'); }); it('should go to next available step when the next button is clicked', () => { - assertNextStepperButtonClick(fixture); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + + expect(stepperComponent.selectedIndex).toBe(0); + + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[0].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[1].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); + + nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[2].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); }); it('should set the next stepper button type to "submit"', () => { - assertStepperButtonType(fixture, MatStepperNext, 'submit'); + const button = fixture.debugElement.query(By.directive(MatStepperNext)).nativeElement; + expect(button.type).toBe('submit', `Expected the button to have "submit" set as type.`); }); it('should go to previous available step when the previous button is clicked', () => { - assertPreviousStepperButtonClick(fixture); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + + expect(stepperComponent.selectedIndex).toBe(0); + + stepperComponent.selectedIndex = 2; + let previousButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperPrevious))[2].nativeElement; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + previousButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); + + previousButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperPrevious))[0].nativeElement; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); }); it('should set the previous stepper button type to "button"', () => { - assertStepperButtonType(fixture, MatStepperPrevious, 'button'); + const button = fixture.debugElement.query(By.directive(MatStepperPrevious)).nativeElement; + expect(button.type).toBe('button', `Expected the button to have "button" set as type.`); }); it('should set the correct step position for animation', () => { - assertCorrectStepAnimationDirection(fixture); - }); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - it('should support using the left/right arrows to move focus', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal'); + expect(stepperComponent._getAnimationDirection(0)).toBe('current'); + expect(stepperComponent._getAnimationDirection(1)).toBe('next'); + expect(stepperComponent._getAnimationDirection(2)).toBe('next'); + + stepperComponent.selectedIndex = 1; + fixture.detectChanges(); + + expect(stepperComponent._getAnimationDirection(0)).toBe('previous'); + expect(stepperComponent._getAnimationDirection(2)).toBe('next'); + expect(stepperComponent._getAnimationDirection(1)).toBe('current'); + + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + + expect(stepperComponent._getAnimationDirection(0)).toBe('previous'); + expect(stepperComponent._getAnimationDirection(1)).toBe('previous'); + expect(stepperComponent._getAnimationDirection(2)).toBe('current'); }); it('should not set focus on header of selected step if header is not clicked', () => { - assertStepHeaderFocusNotCalled(fixture); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement; + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[0].nativeElement; + spyOn(stepHeaderEl, 'focus'); + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + expect(stepHeaderEl.focus).not.toHaveBeenCalled(); }); it('should only be able to return to a previous step if it is editable', () => { - assertEditableStepChange(fixture); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + + stepperComponent.selectedIndex = 1; + stepperComponent._steps.toArray()[0].editable = false; + let previousButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + stepperComponent._steps.toArray()[0].editable = true; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); }); it('should set create icon if step is editable and completed', () => { - assertCorrectStepIcon(fixture, true, 'edit'); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[0].nativeElement; + expect(stepperComponent._getIndicatorType(0)).toBe('number'); + stepperComponent._steps.toArray()[0].editable = true; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent._getIndicatorType(0)).toBe('edit'); }); it('should set done icon if step is not editable and is completed', () => { - assertCorrectStepIcon(fixture, false, 'done'); + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[0].nativeElement; + expect(stepperComponent._getIndicatorType(0)).toBe('number'); + stepperComponent._steps.toArray()[0].editable = false; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent._getIndicatorType(0)).toBe('done'); }); - it('should re-render when the i18n labels change', - inject([MatStepperIntl], (intl: MatStepperIntl) => { - const header = fixture.debugElement.queryAll(By.css('mat-step-header'))[2].nativeElement; + it('should re-render when the i18n labels change', inject([MatStepperIntl], + (intl: MatStepperIntl) => { + fixture.destroy(); + + const i18nFixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); + i18nFixture.detectChanges(); + + const header = + i18nFixture.debugElement.queryAll(By.css('mat-step-header'))[2].nativeElement; const optionalLabel = header.querySelector('.mat-step-optional'); expect(optionalLabel).toBeTruthy(); @@ -159,31 +307,12 @@ describe('MatHorizontalStepper', () => { intl.optionalLabel = 'Valgfri'; intl.changes.next(); - fixture.detectChanges(); + i18nFixture.detectChanges(); expect(optionalLabel.textContent).toBe('Valgfri'); })); }); - describe('RTL', () => { - let fixture: ComponentFixture; - - beforeEach(() => { - dir = 'rtl'; - fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); - fixture.detectChanges(); - }); - - it('should reverse arrow key focus in RTL mode', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - assertArrowKeyInteractionInRtl(fixture, stepHeaders); - }); - - it('should reverse animation in RTL mode', () => { - assertCorrectStepAnimationDirection(fixture, 'rtl'); - }); - }); - describe('icon overrides', () => { let fixture: ComponentFixture; @@ -219,18 +348,50 @@ describe('MatHorizontalStepper', () => { }); }); - describe('linear horizontal stepper', () => { - let fixture: ComponentFixture; - let testComponent: LinearMatHorizontalStepperApp; - let stepperComponent: MatHorizontalStepper; + describe('RTL', () => { + let fixture: ComponentFixture; + + beforeEach(() => { + dir = 'rtl'; + fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + fixture.detectChanges(); + }); + + it('should reverse animation in RTL mode', () => { + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; + + expect(stepperComponent._getAnimationDirection(0)).toBe('current'); + expect(stepperComponent._getAnimationDirection(1)).toBe('previous'); + expect(stepperComponent._getAnimationDirection(2)).toBe('previous'); + + stepperComponent.selectedIndex = 1; + fixture.detectChanges(); + + expect(stepperComponent._getAnimationDirection(0)).toBe('next'); + expect(stepperComponent._getAnimationDirection(2)).toBe('previous'); + expect(stepperComponent._getAnimationDirection(1)).toBe('current'); + + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + + expect(stepperComponent._getAnimationDirection(0)).toBe('next'); + expect(stepperComponent._getAnimationDirection(1)).toBe('next'); + expect(stepperComponent._getAnimationDirection(2)).toBe('current'); + }); + }); + + describe('linear stepper', () => { + let fixture: ComponentFixture; + let testComponent: LinearMatVerticalStepperApp; + let stepperComponent: MatVerticalStepper; beforeEach(() => { - fixture = TestBed.createComponent(LinearMatHorizontalStepperApp); + fixture = TestBed.createComponent(LinearMatVerticalStepperApp); fixture.detectChanges(); testComponent = fixture.componentInstance; stepperComponent = fixture.debugElement - .query(By.css('mat-horizontal-stepper')).componentInstance; + .query(By.css('mat-vertical-stepper')).componentInstance; }); it('should have true linear attribute', () => { @@ -245,35 +406,183 @@ describe('MatHorizontalStepper', () => { expect(stepperComponent.selectedIndex).toBe(0); let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement; - assertLinearStepperValidity(stepHeaderEl, testComponent, fixture); + .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement; + + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); + + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[0].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); + + testComponent.oneGroup.get('oneCtrl')!.setValue('answer'); + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(testComponent.oneGroup.valid).toBe(true); + expect(stepperComponent.selectedIndex).toBe(1); }); it('should not move to next step if current step is pending', () => { let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-horizontal-stepper-header'))[2].nativeElement; + .queryAll(By.css('.mat-vertical-stepper-header'))[2].nativeElement; + + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[1].nativeElement; + + testComponent.oneGroup.get('oneCtrl')!.setValue('input'); + testComponent.twoGroup.get('twoCtrl')!.setValue('input'); + stepperComponent.selectedIndex = 1; + fixture.detectChanges(); + expect(stepperComponent.selectedIndex).toBe(1); + + // Step status = PENDING + // Assert that linear stepper does not allow step selection change + expect(testComponent.twoGroup.pending).toBe(true); + + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + // Trigger asynchronous validation + testComponent.validationTrigger.next(); + // Asynchronous validation completed: + // Step status = VALID + expect(testComponent.twoGroup.pending).toBe(false); + expect(testComponent.twoGroup.valid).toBe(true); + + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); - assertLinearStepperPending(stepHeaderEl, testComponent, fixture); + stepperComponent.selectedIndex = 1; + fixture.detectChanges(); + expect(stepperComponent.selectedIndex).toBe(1); + + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); }); it('should not focus step header upon click if it is not able to be selected', () => { - assertStepHeaderBlurred(fixture); + let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement; + + spyOn(stepHeaderEl, 'blur'); + stepHeaderEl.click(); + fixture.detectChanges(); + + expect(stepHeaderEl.blur).toHaveBeenCalled(); }); it('should be able to move to next step even when invalid if current step is optional', () => { - assertOptionalStepValidity(testComponent, fixture); + testComponent.oneGroup.get('oneCtrl')!.setValue('input'); + testComponent.twoGroup.get('twoCtrl')!.setValue('input'); + testComponent.validationTrigger.next(); + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + + expect(stepperComponent._steps.toArray()[2].optional).toBe(true); + expect(stepperComponent.selectedIndex).toBe(2); + expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(true); + + const nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MatStepperNext))[2].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex) + .toBe(3, 'Expected selectedIndex to change when optional step input is empty.'); + + stepperComponent.selectedIndex = 2; + testComponent.threeGroup.get('threeCtrl')!.setValue('input'); + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(false); + expect(stepperComponent.selectedIndex) + .toBe(3, 'Expected selectedIndex to change when optional step input is invalid.'); + }); + + it('should be able to reset the stepper to its initial state', () => { + const steps = stepperComponent._steps.toArray(); + + testComponent.oneGroup.get('oneCtrl')!.setValue('value'); + fixture.detectChanges(); + + stepperComponent.next(); + fixture.detectChanges(); + + stepperComponent.next(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + expect(steps[0].interacted).toBe(true); + expect(steps[0].completed).toBe(true); + expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(true); + expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('value'); + + expect(steps[1].interacted).toBe(true); + expect(steps[1].completed).toBe(false); + expect(testComponent.twoGroup.get('twoCtrl')!.valid).toBe(false); + + stepperComponent.reset(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); + expect(steps[0].interacted).toBe(false); + expect(steps[0].completed).toBe(false); + expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false); + expect(testComponent.oneGroup.get('oneCtrl')!.value).toBeFalsy(); + + expect(steps[1].interacted).toBe(false); + expect(steps[1].completed).toBe(false); + expect(testComponent.twoGroup.get('twoCtrl')!.valid).toBe(false); + }); + + it('should not clobber the `complete` binding when resetting', () => { + const steps: MatStep[] = stepperComponent._steps.toArray(); + const fillOutStepper = () => { + testComponent.oneGroup.get('oneCtrl')!.setValue('input'); + testComponent.twoGroup.get('twoCtrl')!.setValue('input'); + testComponent.threeGroup.get('threeCtrl')!.setValue('valid'); + testComponent.validationTrigger.next(); + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + stepperComponent.selectedIndex = 3; + fixture.detectChanges(); + }; + + fillOutStepper(); + + expect(steps[2].completed) + .toBe(true, 'Expected third step to be considered complete after the first run through.'); + + stepperComponent.reset(); + fixture.detectChanges(); + fillOutStepper(); + + expect(steps[2].completed).toBe(true, + 'Expected third step to be considered complete when doing a run after a reset.'); }); it('should not throw when there is a pre-defined selectedIndex', () => { fixture.destroy(); let preselectedFixture = TestBed.createComponent(SimplePreselectedMatHorizontalStepperApp); - let debugElement = preselectedFixture.debugElement; - expect(() => preselectedFixture.detectChanges()).not.toThrow(); - - let stepHeaders = debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - assertSelectionChangeOnHeaderClick(preselectedFixture, stepHeaders); }); it('should not move to the next step if the current one is not completed ' + @@ -323,357 +632,71 @@ describe('MatHorizontalStepper', () => { expect(stepper.selectedIndex).toBe(1); }); + }); - it('should be able to reset the stepper to its initial state', () => { - assertLinearStepperResetable(fixture); - }); + describe('vertical stepper', () => { + it('should set the aria-orientation to "vertical"', () => { + let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + fixture.detectChanges(); - it('should not clobber the `complete` binding when resetting', () => { - assertLinearStepperResetComplete(fixture); + let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement; + expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical'); }); - }); -}); -describe('MatVerticalStepper', () => { - let dir = 'ltr'; + it('should support using the left/right arrows to move focus', () => { + let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + fixture.detectChanges(); - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule], - declarations: [ - SimpleMatVerticalStepperApp, - LinearMatVerticalStepperApp - ], - providers: [ - {provide: Directionality, useFactory: () => ({value: dir})} - ] + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal'); }); - TestBed.compileComponents(); - })); + it('should support using the up/down arrows to move focus', () => { + let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + fixture.detectChanges(); - describe('basic vertical stepper', () => { - let fixture: ComponentFixture; + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + assertCorrectKeyboardInteraction(fixture, stepHeaders, 'vertical'); + }); - beforeEach(() => { - fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + it('should reverse arrow key focus in RTL mode', () => { + dir = 'rtl'; + let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); - }); - it('should default to the first step', () => { - let stepperComponent = fixture.debugElement - .query(By.css('mat-vertical-stepper')).componentInstance; - expect(stepperComponent.selectedIndex).toBe(0); + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + assertArrowKeyInteractionInRtl(fixture, stepHeaders); }); + }); - it('should change selected index on header click', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); - assertSelectionChangeOnHeaderClick(fixture, stepHeaders); + describe('horizontal stepper', () => { + it('should set the aria-orientation to "horizontal"', () => { + let fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); + fixture.detectChanges(); - }); - - it('should set the "tablist" role on stepper', () => { - let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement; - expect(stepperEl.getAttribute('role')).toBe('tablist'); - }); - - it('should set the proper "aria-orientation"', () => { - let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement; - expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical'); - }); - - it('should set aria-expanded of content correctly', () => { - let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`)); - assertCorrectAriaExpandedAttribute(fixture, stepContents); - }); - - it('should display the correct label', () => { - assertCorrectStepLabel(fixture); - }); - - it('should go to next available step when the next button is clicked', () => { - assertNextStepperButtonClick(fixture); - }); - - it('should set the next stepper button type to "submit"', () => { - assertStepperButtonType(fixture, MatStepperNext, 'submit'); - }); - - it('should go to previous available step when the previous button is clicked', () => { - assertPreviousStepperButtonClick(fixture); - }); - - it('should set the previous stepper button type to "button"', () => { - assertStepperButtonType(fixture, MatStepperPrevious, 'button'); - }); - - it('should set the correct step position for animation', () => { - assertCorrectStepAnimationDirection(fixture); + let stepperEl = fixture.debugElement.query(By.css('mat-horizontal-stepper')).nativeElement; + expect(stepperEl.getAttribute('aria-orientation')).toBe('horizontal'); }); it('should support using the left/right arrows to move focus', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); - assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal'); - }); - - it('should support using the up/down arrows to move focus', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); - assertCorrectKeyboardInteraction(fixture, stepHeaders, 'vertical'); - }); - - it('should not set focus on header of selected step if header is not clicked', () => { - assertStepHeaderFocusNotCalled(fixture); - }); - - it('should only be able to return to a previous step if it is editable', () => { - assertEditableStepChange(fixture); - }); - - it('should set create icon if step is editable and completed', () => { - assertCorrectStepIcon(fixture, true, 'edit'); - }); + let fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); + fixture.detectChanges(); - it('should set done icon if step is not editable and is completed', () => { - assertCorrectStepIcon(fixture, false, 'done'); + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); + assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal'); }); - }); - describe('RTL', () => { - let fixture: ComponentFixture; - - beforeEach(() => { + it('should reverse arrow key focus in RTL mode', () => { dir = 'rtl'; - fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); + let fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); fixture.detectChanges(); - }); - it('should reverse arrow key focus in RTL mode', () => { - let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); assertArrowKeyInteractionInRtl(fixture, stepHeaders); }); - - it('should reverse animation in RTL mode', () => { - assertCorrectStepAnimationDirection(fixture, 'rtl'); - }); - }); - - describe('linear vertical stepper', () => { - let fixture: ComponentFixture; - let testComponent: LinearMatVerticalStepperApp; - let stepperComponent: MatVerticalStepper; - - beforeEach(() => { - fixture = TestBed.createComponent(LinearMatVerticalStepperApp); - fixture.detectChanges(); - - testComponent = fixture.componentInstance; - stepperComponent = fixture.debugElement - .query(By.css('mat-vertical-stepper')).componentInstance; - }); - - it('should have true linear attribute', () => { - expect(stepperComponent.linear).toBe(true); - }); - - it('should not move to next step if current step is invalid', () => { - expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe(''); - expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false); - expect(testComponent.oneGroup.valid).toBe(false); - expect(testComponent.oneGroup.invalid).toBe(true); - expect(stepperComponent.selectedIndex).toBe(0); - - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement; - - assertLinearStepperValidity(stepHeaderEl, testComponent, fixture); - }); - - it('should not move to next step if current step is pending', () => { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-vertical-stepper-header'))[2].nativeElement; - - assertLinearStepperPending(stepHeaderEl, testComponent, fixture); - }); - - it('should not focus step header upon click if it is not able to be selected', () => { - assertStepHeaderBlurred(fixture); - }); - - it('should be able to move to next step even when invalid if current step is optional', () => { - assertOptionalStepValidity(testComponent, fixture); - }); - - it('should be able to reset the stepper to its initial state', () => { - assertLinearStepperResetable(fixture); - }); - - it('should not clobber the `complete` binding when resetting', () => { - assertLinearStepperResetComplete(fixture); - }); }); }); -/** Asserts that `selectedIndex` updates correctly when header of another step is clicked. */ -function assertSelectionChangeOnHeaderClick(fixture: ComponentFixture, - stepHeaders: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - expect(stepperComponent.selectedIndex).toBe(0); - expect(stepperComponent.selected instanceof MatStep).toBe(true); - - // select the second step - let stepHeaderEl = stepHeaders[1].nativeElement; - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - expect(stepperComponent.selected instanceof MatStep).toBe(true); - - // select the third step - stepHeaderEl = stepHeaders[2].nativeElement; - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(2); - expect(stepperComponent.selected instanceof MatStep).toBe(true); -} - -/** Asserts that 'aria-expanded' attribute is correct for expanded content of step. */ -function assertCorrectAriaExpandedAttribute(fixture: ComponentFixture, - stepContents: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - let firstStepContentEl = stepContents[0].nativeElement; - expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true'); - - stepperComponent.selectedIndex = 1; - fixture.detectChanges(); - - expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false'); - let secondStepContentEl = stepContents[1].nativeElement; - expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true'); -} - -/** Asserts that step has correct label. */ -function assertCorrectStepLabel(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); - expect(selectedLabel.textContent).toMatch('Step 1'); - - stepperComponent.selectedIndex = 2; - fixture.detectChanges(); - - selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); - expect(selectedLabel.textContent).toMatch('Step 3'); - - fixture.componentInstance.inputLabel = 'New Label'; - fixture.detectChanges(); - - selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); - expect(selectedLabel.textContent).toMatch('New Label'); -} - -/** Asserts that clicking on MatStepperNext button updates `selectedIndex` correctly. */ -function assertNextStepperButtonClick(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - expect(stepperComponent.selectedIndex).toBe(0); - - let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[0].nativeElement; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - - nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[1].nativeElement; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(2); - - nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[2].nativeElement; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(2); -} - -/** Asserts that the specified type of stepper button has the given type. */ -function assertStepperButtonType(fixture: ComponentFixture, stepperClass: any, type: string) { - const buttonElement = fixture.debugElement.query(By.directive(stepperClass)).nativeElement; - - expect(buttonElement.type).toBe(type, `Expected the button to have "${type}" set as type.`); -} - -/** Asserts that clicking on MatStepperPrevious button updates `selectedIndex` correctly. */ -function assertPreviousStepperButtonClick(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - expect(stepperComponent.selectedIndex).toBe(0); - - stepperComponent.selectedIndex = 2; - let previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperPrevious))[2].nativeElement; - previousButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - - previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; - previousButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); - - previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperPrevious))[0].nativeElement; - previousButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); -} - -/** Asserts that step position is correct for animation. */ -function assertCorrectStepAnimationDirection(fixture: ComponentFixture, rtl?: 'rtl') { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - expect(stepperComponent._getAnimationDirection(0)).toBe('current'); - if (rtl === 'rtl') { - expect(stepperComponent._getAnimationDirection(1)).toBe('previous'); - expect(stepperComponent._getAnimationDirection(2)).toBe('previous'); - } else { - expect(stepperComponent._getAnimationDirection(1)).toBe('next'); - expect(stepperComponent._getAnimationDirection(2)).toBe('next'); - } - - stepperComponent.selectedIndex = 1; - fixture.detectChanges(); - - if (rtl === 'rtl') { - expect(stepperComponent._getAnimationDirection(0)).toBe('next'); - expect(stepperComponent._getAnimationDirection(2)).toBe('previous'); - } else { - expect(stepperComponent._getAnimationDirection(0)).toBe('previous'); - expect(stepperComponent._getAnimationDirection(2)).toBe('next'); - } - expect(stepperComponent._getAnimationDirection(1)).toBe('current'); - - stepperComponent.selectedIndex = 2; - fixture.detectChanges(); - - if (rtl === 'rtl') { - expect(stepperComponent._getAnimationDirection(0)).toBe('next'); - expect(stepperComponent._getAnimationDirection(1)).toBe('next'); - } else { - expect(stepperComponent._getAnimationDirection(0)).toBe('previous'); - expect(stepperComponent._getAnimationDirection(1)).toBe('previous'); - } - expect(stepperComponent._getAnimationDirection(2)).toBe('current'); -} - /** Asserts that keyboard interaction works correctly. */ function assertCorrectKeyboardInteraction(fixture: ComponentFixture, stepHeaders: DebugElement[], @@ -746,20 +769,6 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture, expect(homeEvent.defaultPrevented).toBe(true, 'Expected default HOME action to be prevented.'); } -/** Asserts that step selection change using stepper buttons does not focus step header. */ -function assertStepHeaderFocusNotCalled(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement; - let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[0].nativeElement; - spyOn(stepHeaderEl, 'focus'); - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - expect(stepHeaderEl.focus).not.toHaveBeenCalled(); -} - /** Asserts that arrow key direction works correctly in RTL mode. */ function assertArrowKeyInteractionInRtl(fixture: ComponentFixture, stepHeaders: DebugElement[]) { @@ -780,172 +789,6 @@ function assertArrowKeyInteractionInRtl(fixture: ComponentFixture, expect(stepperComponent._focusIndex).toBe(0); } -/** - * Asserts that linear stepper does not allow step selection change if current step is not valid. - */ -function assertLinearStepperValidity(stepHeaderEl: HTMLElement, - testComponent: - LinearMatHorizontalStepperApp | - LinearMatVerticalStepperApp, - fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); - - let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[0].nativeElement; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); - - testComponent.oneGroup.get('oneCtrl')!.setValue('answer'); - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(testComponent.oneGroup.valid).toBe(true); - expect(stepperComponent.selectedIndex).toBe(1); -} - -/** Asserts that linear stepper does not allow step selection change if current step is pending. */ -function assertLinearStepperPending(stepHeaderEl: HTMLElement, - testComponent: - LinearMatHorizontalStepperApp | - LinearMatVerticalStepperApp, - fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[1].nativeElement; - - testComponent.oneGroup.get('oneCtrl')!.setValue('input'); - testComponent.twoGroup.get('twoCtrl')!.setValue('input'); - stepperComponent.selectedIndex = 1; - fixture.detectChanges(); - expect(stepperComponent.selectedIndex).toBe(1); - - // Step status = PENDING - // Assert that linear stepper does not allow step selection change - expect(testComponent.twoGroup.pending).toBe(true); - - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - - // Trigger asynchronous validation - testComponent.validationTrigger.next(); - // Asynchronous validation completed: - // Step status = VALID - expect(testComponent.twoGroup.pending).toBe(false); - expect(testComponent.twoGroup.valid).toBe(true); - - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(2); - - stepperComponent.selectedIndex = 1; - fixture.detectChanges(); - expect(stepperComponent.selectedIndex).toBe(1); - - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(2); -} - -/** Asserts that step header focus is blurred if the step cannot be selected upon header click. */ -function assertStepHeaderBlurred(fixture: ComponentFixture) { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('mat-step-header'))[1].nativeElement; - spyOn(stepHeaderEl, 'blur'); - stepHeaderEl.click(); - fixture.detectChanges(); - - expect(stepHeaderEl.blur).toHaveBeenCalled(); -} - -/** Asserts that it is only possible to go back to a previous step if the step is editable. */ -function assertEditableStepChange(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - - stepperComponent.selectedIndex = 1; - stepperComponent._steps.toArray()[0].editable = false; - let previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; - previousButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - - stepperComponent._steps.toArray()[0].editable = true; - previousButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); -} - -/** - * Asserts that it is possible to skip an optional step in linear - * stepper if there is no input or the input is invalid. - */ -function assertOptionalStepValidity(testComponent: - LinearMatHorizontalStepperApp | LinearMatVerticalStepperApp, - fixture: ComponentFixture) { - const stepperComponent: MatStepper = fixture.debugElement - .query(By.directive(MatStepper)).componentInstance; - - testComponent.oneGroup.get('oneCtrl')!.setValue('input'); - testComponent.twoGroup.get('twoCtrl')!.setValue('input'); - testComponent.validationTrigger.next(); - stepperComponent.selectedIndex = 2; - fixture.detectChanges(); - - expect(stepperComponent._steps.toArray()[2].optional).toBe(true); - expect(stepperComponent.selectedIndex).toBe(2); - expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(true); - - const nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[2].nativeElement; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex) - .toBe(3, 'Expected selectedIndex to change when optional step input is empty.'); - - stepperComponent.selectedIndex = 2; - testComponent.threeGroup.get('threeCtrl')!.setValue('input'); - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(false); - expect(stepperComponent.selectedIndex) - .toBe(3, 'Expected selectedIndex to change when optional step input is invalid.'); -} - -/** Asserts that step header set the correct icon depending on the state of step. */ -function assertCorrectStepIcon(fixture: ComponentFixture, - isEditable: boolean, - icon: String) { - let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MatStepperNext))[0].nativeElement; - expect(stepperComponent._getIndicatorType(0)).toBe('number'); - stepperComponent._steps.toArray()[0].editable = isEditable; - nextButtonNativeEl.click(); - fixture.detectChanges(); - - expect(stepperComponent._getIndicatorType(0)).toBe(icon); -} - function asyncValidator(minLength: number, validationTrigger: Observable): AsyncValidatorFn { return (control: AbstractControl): Observable => { return validationTrigger.pipe( @@ -955,81 +798,6 @@ function asyncValidator(minLength: number, validationTrigger: Observable): }; } - -/** Asserts that a stepper can be reset. */ -function assertLinearStepperResetable( - fixture: ComponentFixture) { - - const testComponent = fixture.componentInstance; - const stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - const steps = stepperComponent._steps.toArray(); - - testComponent.oneGroup.get('oneCtrl')!.setValue('value'); - fixture.detectChanges(); - - stepperComponent.next(); - fixture.detectChanges(); - - stepperComponent.next(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(1); - expect(steps[0].interacted).toBe(true); - expect(steps[0].completed).toBe(true); - expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(true); - expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('value'); - - expect(steps[1].interacted).toBe(true); - expect(steps[1].completed).toBe(false); - expect(testComponent.twoGroup.get('twoCtrl')!.valid).toBe(false); - - stepperComponent.reset(); - fixture.detectChanges(); - - expect(stepperComponent.selectedIndex).toBe(0); - expect(steps[0].interacted).toBe(false); - expect(steps[0].completed).toBe(false); - expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false); - expect(testComponent.oneGroup.get('oneCtrl')!.value).toBeFalsy(); - - expect(steps[1].interacted).toBe(false); - expect(steps[1].completed).toBe(false); - expect(testComponent.twoGroup.get('twoCtrl')!.valid).toBe(false); -} - - -/** Asserts that the `complete` binding is being reset correctly. */ -function assertLinearStepperResetComplete( - fixture: ComponentFixture) { - - const testComponent = fixture.componentInstance; - const stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; - const steps: MatStep[] = stepperComponent._steps.toArray(); - const fillOutStepper = () => { - testComponent.oneGroup.get('oneCtrl')!.setValue('input'); - testComponent.twoGroup.get('twoCtrl')!.setValue('input'); - testComponent.threeGroup.get('threeCtrl')!.setValue('valid'); - testComponent.validationTrigger.next(); - stepperComponent.selectedIndex = 2; - fixture.detectChanges(); - stepperComponent.selectedIndex = 3; - fixture.detectChanges(); - }; - - fillOutStepper(); - - expect(steps[2].completed) - .toBe(true, 'Expected third step to be considered complete after the first run through.'); - - stepperComponent.reset(); - fixture.detectChanges(); - fillOutStepper(); - - expect(steps[2].completed) - .toBe(true, 'Expected third step to be considered complete when doing a run after a reset.'); -} - - @Component({ template: ` @@ -1063,65 +831,6 @@ class SimpleMatHorizontalStepperApp { inputLabel = 'Step 3'; } -@Component({ - template: ` - - -
- Step one - -
- - -
-
-
- -
- Step two - -
- - -
-
-
- -
- Step two - -
- - -
-
-
- - Done - -
- ` -}) -class LinearMatHorizontalStepperApp { - oneGroup: FormGroup; - twoGroup: FormGroup; - threeGroup: FormGroup; - - validationTrigger: Subject = new Subject(); - - ngOnInit() { - this.oneGroup = new FormGroup({ - oneCtrl: new FormControl('', Validators.required) - }); - this.twoGroup = new FormGroup({ - twoCtrl: new FormControl('', Validators.required, asyncValidator(3, this.validationTrigger)) - }); - this.threeGroup = new FormGroup({ - threeCtrl: new FormControl('', Validators.pattern(VALID_REGEX)) - }); - } -} - @Component({ template: `