feat(stepper): add invalid/completed ind test

Author: ddaribo

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

@@ -1,13 +1,14 @@
 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 { IgxStepperComponent, IgxStepperModule } from './stepper.component';
 import { By } from '@angular/platform-browser';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxStepperOrienatation, IgxStepperTitlePosition, IgxStepType, IStepToggledEventArgs, IStepTogglingEventArgs } from './common';
 import { pipe, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { IgxIconModule } from 'igniteui-angular';
 
 const STEPPER_CLASS = 'igx-stepper';
 const STEPPER_HEADER = 'igx-stepper__header';
@@ -28,7 +29,8 @@ describe('Rendering Tests', () => {
                 ],
                 imports: [
                     NoopAnimationsModule,
-                    IgxStepperModule
+                    IgxStepperModule,
+                    IgxIconModule
                 ],
                 providers: []
             }).compileComponents();
@@ -178,7 +180,7 @@ describe('Rendering Tests', () => {
     });
 
     describe('Appearance', () => {
-        it('should render the stepper according to the specified orientation (vertical/horizontal)', ()=>{
+        it('should render the stepper according to the specified orientation (vertical/horizontal)', () => {
            stepper.orientation = IgxStepperOrienatation.Horizontal;
            fix.detectChanges();
 
@@ -187,7 +189,7 @@ describe('Rendering Tests', () => {
             //no css class for vertical
         });
 
-        it('should indicate the currently active step', ()=>{
+        it('should indicate the currently active step', () => {
             let currentClass = 'igx-stepper__step--current';
             let step0Header: HTMLElement = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`);
             let step1Header: HTMLElement = stepper.steps[1].nativeElement.querySelector(`.${STEP_HEADER}`);
@@ -208,7 +210,7 @@ describe('Rendering Tests', () => {
             expect(step1Header).toHaveClass(currentClass); 
          });
 
-         it('should indicate that a step is completed', ()=>{
+         it('should indicate that a step is completed', () => {
             let completedClass = 'igx-stepper__step--completed';
             stepper.steps[0].active = true;
             fix.detectChanges();
@@ -232,6 +234,9 @@ describe('Rendering Tests', () => {
 
             stepper.steps[0].isValid = false;
             fix.detectChanges();
+
+            stepper.steps[1].active = true;
+            fix.detectChanges();
 
             expect(step0Header).toHaveClass(invalidClass);
          });
@@ -287,7 +292,7 @@ describe('Rendering Tests', () => {
             }
         });
 
-        it('should place the title in the step element according to the specified titlePosition when stepType is set to "full"', ()=>{
+        it('should place the title in the step element according to the specified titlePosition when stepType is set to "full"', () => {
             stepper.orientation = IgxStepperOrienatation.Horizontal;
             stepper.stepType = IgxStepType.Full;
             fix.detectChanges();
@@ -320,7 +325,7 @@ describe('Rendering Tests', () => {
             });
          });
 
-        it('should indicate each step with a corresponding number when igxStepIndicator is not specified in the step template and stepType is either "indicator" or "full"', ()=>{
+        it('should indicate each step with a corresponding number when igxStepIndicator is not specified in the step template and stepType is either "indicator" or "full"', () => {
             stepper.stepType = IgxStepType.Full;
             fix.detectChanges();
 
@@ -340,7 +345,38 @@ describe('Rendering Tests', () => {
             expect(indicatorElement4.textContent).toBe((stepper.steps[3].index + 1).toString());
         });
 
-         it('should allow modifying animationSettings that are used for transitioning between steps ', ()=>{
+        it('Should allow overriding the default invalid and completed indicators', () => {
+            let step0Header: HTMLElement = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`);
+            let invalidClass = 'igx-stepper__step--invalid';
+            let indicatorClass = 'igx-stepper__step-indicator';
+            let indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
+
+            expect(indicatorElement.textContent).toBe('1');
+
+            stepper.steps[0].isValid = false;
+            fix.detectChanges();
+   
+            stepper.steps[1].active = true;
+            fix.detectChanges();
+
+            indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
+            
+            expect(step0Header).toHaveClass(invalidClass);
+            expect(indicatorElement.tagName).toBe('IGX-ICON');
+            expect(indicatorElement.textContent).toBe("error");
+
+            stepper.steps[0].isValid = true;
+            stepper.steps[0].completed = true;
+            fix.detectChanges();
+
+            indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
+            
+            expect(step0Header).not.toHaveClass(invalidClass);
+            expect(indicatorElement.tagName).toBe('IGX-ICON');
+            expect(indicatorElement.textContent).toBe("check");
+        });
+
+        it('should allow modifying animationSettings that are used for transitioning between steps ', () => {
             stepper.orientation = IgxStepperOrienatation.Horizontal;
             fix.detectChanges();
 
@@ -382,20 +418,19 @@ describe('Rendering Tests', () => {
 
             expect(stepper.verticalAnimationType).toBe(fix.componentInstance.verticalAnimationType);
             expect(stepper.verticalAnimationType).toBe('none');
-          });
-
+        });
     });
 
     describe('Keyboard navigation', () => {
-        it('should navigate to first/last step on Home/End key press', fakeAsync(()=>{
+        it('should navigate to first/last step on Home/End key press', fakeAsync(() => {
             stepper.steps[3].nativeElement.focus(); 
             fix.detectChanges();
 
             expect(document.activeElement).toBe(stepper.steps[3].nativeElement as Element);
 
             UIInteractions.triggerKeyDownEvtUponElem('home',  stepper.steps[3].nativeElement);
             fix.detectChanges();
-
+           
             expect(stepper.steps[0].nativeElement as Element).toBe(document.activeElement);
 
             UIInteractions.triggerKeyDownEvtUponElem('end',  stepper.steps[0].nativeElement);
@@ -404,7 +439,7 @@ describe('Rendering Tests', () => {
             expect(stepper.steps[4].nativeElement as Element).toBe(document.activeElement);
         }));
 
-        it('should activate the currently focused step on Enter/Space key press', fakeAsync(()=>{
+        it('should activate the currently focused step on Enter/Space key press', fakeAsync(() => {
             stepper.steps[0].active = true;
             fix.detectChanges();
 
@@ -433,7 +468,7 @@ describe('Rendering Tests', () => {
             expect(stepper.steps[4].active).toBeTruthy();
         }));
 
-        it('should navigate to the next/previous step in horizontal orientation on Arrow Right/Left key press', fakeAsync(()=>{
+        it('should navigate to the next/previous step in horizontal orientation on Arrow Right/Left key press', fakeAsync(() => {
             stepper.steps[0].active = true;
             fix.detectChanges();
 
@@ -456,7 +491,7 @@ describe('Rendering Tests', () => {
             expect(stepper.steps[0].nativeElement as Element).toBe(document.activeElement);
         }));
 
-        it('should navigate to the next/previous step in vertical orientation on Arrow Down/Up key press', fakeAsync(()=>{
+        it('should navigate to the next/previous step in vertical orientation on Arrow Down/Up key press', fakeAsync(() => {
             stepper.orientation =  IgxStepperOrienatation.Vertical;
             stepper.steps[0].active = true;
             fix.detectChanges();
@@ -480,7 +515,7 @@ describe('Rendering Tests', () => {
             expect(stepper.steps[0].nativeElement as Element).toBe(document.activeElement);
         }));
 
-        it('should specify tabIndex="0" for the active step and tabIndex="-1" for the other steps', fakeAsync(()=>{ 
+        it('should specify tabIndex="0" for the active step and tabIndex="-1" for the other steps', fakeAsync(() => { 
             let stepContent = stepper.nativeElement.querySelector(`.${STEP_CONTENT}`);
 
             expect(stepper.steps[0].tabIndex).toBe(0);
@@ -515,8 +550,17 @@ describe('Rendering Tests', () => {
     template: `
      <igx-stepper #stepper  [orientation]="'Horizontal'" [verticalAnimationType]="verticalAnimationType"
         [horizontalAnimationType]="horizontalAnimationType" [animationDuration]="animationDuration">
+
+        <ng-template igxStepInvalidIndicator>
+            <igx-icon>error</igx-icon>
+        </ng-template>
+
+        <ng-template igxStepCompletedIndicator>
+            <igx-icon>check</igx-icon>
+        </ng-template>
+
         <igx-step #step1  [active]="true">
-            <span igxStepIcon>1</span>
+            <span igxStepIndicator>1</span>
             <span igxStepTitle>Step No 1</span>
             <span igxStepSubTitle>Step SubTitle</span>
               <div igxStepContent class="sample-body">
@@ -525,7 +569,7 @@ describe('Rendering Tests', () => {
         </igx-step>
     
         <igx-step #step2>
-            <span igxStepIcon>2</span>
+            <span igxStepIndicator>2</span>
             <span igxStepTitle>Step No 2</span>
             <span igxStepSubTitle>Step SubTitle</span>
             <div igxStepContent class="sample-body">
@@ -534,7 +578,7 @@ describe('Rendering Tests', () => {
         </igx-step>
     
         <igx-step #step3>
-            <span igxStepIcon>3</span>
+            <span igxStepIndicator>3</span>
             <span igxStepTitle>Step No 3</span>
             <span igxStepSubTitle>Step SubTitle</span>
             <div igxStepContent class="sample-body">
@@ -543,15 +587,15 @@ describe('Rendering Tests', () => {
         </igx-step>
         
         <igx-step #step4>
-            <span igxStepTitle>Step No 4</span>
+            <span igxStepIndicator>Step No 4</span>
             <span igxStepSubTitle>Step SubTitle</span>
             <div igxStepContent class="sample-body">
                <p>Test step 4</p>
             </div>
         </igx-step>
         
         <igx-step #step5 >
-            <span igxStepIcon>5</span>
+            <span igxStepIndicator>5</span>
             <span igxStepTitle>Step No 5</span>
             <span igxStepSubTitle>Step SubTitle</span>
             <div igxStepContent class="sample-body">