feat(stepper): create spec file, add basic tests

Author: ddaribo

projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts

@@ -0,0 +1,320 @@
+import { Component, ViewChild } from '@angular/core';
+import { fakeAsync, ComponentFixture, TestBed, waitForAsync, tick } from '@angular/core/testing';
+import { configureTestSuite } from '../test-utils/configure-suite';
+import { IgxStepperComponent, IgxStepperModule } from './igx-stepper.component';
+import { By } from '@angular/platform-browser';
+import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IStepToggledEventArgs, IStepTogglingEventArgs } from './common';
+import { pipe, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+const STEPPER_CLASS = 'igx-stepper';
+const STEPPER_HEADER = 'igx-stepper__header';
+const STEP_TAG = 'IGX-STEP';
+const STEP_HEADER = 'igx-stepper__step-header';
+
+describe('Rendering Tests', () => {
+    configureTestSuite();
+    let fix: ComponentFixture<IgxStepperSampleTestComponent>;
+    let stepper: IgxStepperComponent;
+
+    beforeAll(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxStepperSampleTestComponent
+                ],
+                imports: [
+                    NoopAnimationsModule,
+                    IgxStepperModule
+                ],
+                providers: []
+            }).compileComponents();
+        })
+    );
+    beforeEach(() => {
+        fix = TestBed.createComponent(IgxStepperSampleTestComponent);
+        fix.detectChanges();
+        stepper = fix.componentInstance.stepper;
+    });
+
+    describe('General', () => {
+        it('should render a stepper containing a sequence of steps', () => {
+            const stepperElement: HTMLElement = fix.debugElement.queryAll(By.css(`${STEPPER_CLASS}`))[0].nativeElement;
+            const stepperHeader: HTMLElement = stepperElement.querySelector(`.${STEPPER_HEADER}`);
+            const steps = stepperHeader.children;
+            expect(steps.length).toBe(5);
+            for (let i = 0; i < steps.length; i++) {
+                expect(steps[i].tagName === STEP_TAG).toBeTruthy();
+            }
+        });
+
+        it('should skip steps when skip is set to true', fakeAsync(() => { //fails
+            expect(stepper.steps[0].active).toBeTruthy();
+
+            stepper.steps[1].skip = true;
+            fix.detectChanges();
+            tick();
+
+            stepper.next();
+            fix.detectChanges();
+            tick(3000);
+
+            expect(stepper.steps[0].active).toBeFalsy();
+            expect(stepper.steps[2].isAccessible).toBeTruthy("expect 3rd step to be accessible");
+            expect(stepper.steps[2].active).toBeTruthy("expect 3rd step to be active");
+        }));
+
+        fit('should allow activating a step when skip is set to true', fakeAsync(() => {
+            let step2Header: HTMLElement = stepper.steps[2].nativeElement.querySelector(`.${STEP_HEADER}`);
+
+            expect(stepper.steps[0].active).toBeTruthy();
+            expect(stepper.steps[1].active).toBeFalsy();
+            expect(stepper.steps[2].active).toBeFalsy();
+
+            stepper.steps[1].skip = true;
+            stepper.steps[2].skip = true;
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].skip).toBeTruthy();
+
+            stepper.navigateTo(1);
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].active).toBeTruthy();
+
+            UIInteractions.simulateClickEvent(step2Header);
+            fix.detectChanges();
+
+            expect(stepper.steps[1].active).toBeFalsy();
+            expect(stepper.steps[2].active).toBeTruthy();
+        }));
+
+        it('should not allow activating a step when disabled is set to true', fakeAsync(() => { //fails
+            expect(stepper.steps[0].active).toBeTruthy();
+
+            stepper.steps[1].disabled = true;
+            fix.detectChanges();
+            tick();
+
+            stepper.next();
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].active).toBeFalsy();
+            expect(stepper.steps[2].isAccessible).toBeTruthy();
+            expect(stepper.steps[2].active).toBeTruthy();
+        }));
+
+        fit('should not allow moving forward to next step in linear mode if the previous step is invalid', fakeAsync(() => {
+            let step1Header: HTMLElement = stepper.steps[1].nativeElement.querySelector(`.${STEP_HEADER}`);
+
+            stepper.linear = true;
+            stepper.steps[0].isValid = false;
+            fix.detectChanges();
+            tick();
+
+            stepper.next();
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].active).toBeFalsy();
+            expect(stepper.steps[0].active).toBeTruthy();
+
+            UIInteractions.simulateClickEvent(step1Header);
+            fix.detectChanges();
+
+            expect(stepper.steps[1].active).toBeFalsy(); //fails
+            expect(stepper.steps[0].active).toBeTruthy();
+        }));
+
+        it('should emit ing and ed events when a step is activated', fakeAsync(() => {
+            const changingSpy = spyOn(stepper.activeStepChanging, 'emit').and.callThrough();
+            const changedSpy = spyOn(stepper.activeStepChanged, 'emit').and.callThrough();
+
+            expect(changingSpy).not.toHaveBeenCalled();
+            expect(changedSpy).not.toHaveBeenCalled();
+
+            let argsIng: IStepTogglingEventArgs = {
+                activeStep: stepper.steps[1],
+                previousActiveStep: stepper.steps[0],
+                owner: stepper,
+                cancel: false
+            };
+            let argsEd: IStepToggledEventArgs = {
+                activeStep: stepper.steps[1],
+                owner: stepper,
+            };
+
+            stepper.navigateTo(1);
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].active).toBeTruthy();
+            expect(changingSpy).toHaveBeenCalledTimes(1);
+            expect(changingSpy).toHaveBeenCalledWith(argsIng);
+            expect(changedSpy).toHaveBeenCalledTimes(1);
+            expect(changedSpy).toHaveBeenCalledWith(argsEd);
+        }));
+
+        it('should be able to cancel the activeStepChanging event', fakeAsync(() => {
+            const changingSpy = spyOn(stepper.activeStepChanging, 'emit').and.callThrough();
+
+            expect(changingSpy).not.toHaveBeenCalled();
+
+            let argsIng: IStepTogglingEventArgs = {
+                activeStep: stepper.steps[1],
+                previousActiveStep: stepper.steps[0],
+                owner: stepper,
+                cancel: true
+            };
+
+            const unsub$ = new Subject<void>();
+            stepper.activeStepChanging.pipe(takeUntil(unsub$)).subscribe(e => {
+                e.cancel = true;
+            });
+
+            stepper.navigateTo(1);
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[1].active).toBeFalsy();
+            expect(changingSpy).toHaveBeenCalledTimes(1);
+            expect(changingSpy).toHaveBeenCalledWith(argsIng);
+
+            unsub$.next();
+            unsub$.complete();
+        }));
+
+        it('a step should emit activeChanged event when its active property changes', fakeAsync(() => {
+            const fourthActiveChangeSpy = spyOn(stepper.steps[3].activeChange, 'emit').and.callThrough();
+            const fifthActiveChangeSpy = spyOn(stepper.steps[4].activeChange, 'emit').and.callThrough();
+
+            expect(fourthActiveChangeSpy).not.toHaveBeenCalled();
+            expect(fifthActiveChangeSpy).not.toHaveBeenCalled();
+
+            stepper.navigateTo(3);
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[3].active).toBeTruthy();
+            expect(stepper.steps[3].activeChange.emit).toHaveBeenCalledTimes(1);
+            expect(stepper.steps[3].activeChange.emit).toHaveBeenCalledWith(true);
+            expect(fifthActiveChangeSpy).not.toHaveBeenCalled();
+
+            fourthActiveChangeSpy.calls.reset();
+
+            stepper.navigateTo(4);
+            fix.detectChanges();
+            tick();
+
+            expect(stepper.steps[4].active).toBeTruthy();
+            expect(stepper.steps[3].active).toBeFalsy();
+            expect(fifthActiveChangeSpy).toHaveBeenCalledWith(true);
+            expect(fourthActiveChangeSpy).toHaveBeenCalledWith(false);
+            expect(fourthActiveChangeSpy).toHaveBeenCalledTimes(1);
+            expect(fifthActiveChangeSpy).toHaveBeenCalledTimes(1);
+        }));
+    });
+
+    describe('Keyboard navigation', () => {
+        it('should navigate to first step on Home key press', fakeAsync(()=>{
+            //stepper.nativeElement.dispatchEvent(new Event('pointerdown'));
+            tick();
+            let step3Header: HTMLElement = stepper.steps[3].nativeElement.querySelector(`.${STEP_HEADER}`);
+            expect(stepper.steps[3].active).toBeFalsy();
+
+            UIInteractions.simulateClickEvent(step3Header); // works
+            //UIInteractions.simulateClickEvent(stepper.steps[3].nativeElement); //does not work
+
+            fix.detectChanges();
+            tick();
+            expect(stepper.steps[3].active).toBeTruthy();
+            //(step3Header as HTMLElement).dispatchEvent(new MouseEvent('pointerdown')); //nope
+            
+            let focusSpy = spyOn(step3Header, 'focus');
+           
+            step3Header.focus();
+            fix.detectChanges();
+            tick();
+            expect(focusSpy).toHaveBeenCalled();
+            fix.detectChanges();
+            tick();
+            //expect(step3Header as Element).toEqual(document.activeElement); //always body
+
+            let step0Header: HTMLElement = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`);
+            let focus0Spy = spyOn(step0Header, 'focus');
+
+            UIInteractions.triggerKeyDownEvtUponElem('Home', step3Header);
+            fix.detectChanges();
+
+            //expect(focus0Spy).toHaveBeenCalled(); //nope
+        }));
+    });
+});
+
+@Component({
+    template: `
+     <igx-stepper #stepper  [orientation]="'Horizontal'" [verticalAnimationType]="verticalAnimationType"
+        [horizontalAnimationType]="horizontalAnimationType" [animationDuration]="animationDuration">
+        <igx-step #step1  [active]="true">
+            <span igxStepIcon>1</span>
+            <span igxStepTitle>Step No 1</span>
+            <span igxStepSubTitle>Step SubTitle</span>
+            <div class="sample-body">
+               <p>Test step</p>
+            </div>
+        </igx-step>
+    
+        <igx-step #step2>
+            <span igxStepIcon>2</span>
+            <span igxStepTitle>Step No 2</span>
+            <span igxStepSubTitle>Step SubTitle</span>
+            <div class="sample-body">
+               <p>Test step 2</p>
+            </div>
+        </igx-step>
+    
+        <igx-step #step3>
+            <span igxStepIcon>3</span>
+            <span igxStepTitle>Step No 3</span>
+            <span igxStepSubTitle>Step SubTitle</span>
+            <div class="sample-body">
+               <p>Test step 3</p>
+            </div>
+        </igx-step>
+        
+        <igx-step #step4>
+            <span igxStepIcon>4</span>
+            <span igxStepTitle>Step No 4</span>
+            <span igxStepSubTitle>Step SubTitle</span>
+            <div class="sample-body">
+               <p>Test step 4</p>
+            </div>
+        </igx-step>
+        
+        <igx-step #step5 >
+            <span igxStepIcon>5</span>
+            <span igxStepTitle>Step No 5</span>
+            <span igxStepSubTitle>Step SubTitle</span>
+            <div class="sample-body">
+               <p>Test step 5</p>
+            </div>
+        </igx-step>
+    </igx-stepper>
+    <br>
+    `
+})
+export class IgxStepperSampleTestComponent {
+    @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
+
+    public horizontalAnimationType = 'slide';
+    public verticalAnimationType = 'grow';
+    public animationDuration = 300;
+
+}
+
+