Skip to content

Commit e7fd459

Browse files
author
ddaribo
committed
feat(stepper): add contentTop test
1 parent 98548ed commit e7fd459

File tree

1 file changed

+85
-26
lines changed

1 file changed

+85
-26
lines changed

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

+85-26
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ import { By } from '@angular/platform-browser';
66
import { UIInteractions } from '../test-utils/ui-interactions.spec';
77
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
88
import { IgxStepperOrienatation, IgxStepperTitlePosition, IgxStepType, IStepToggledEventArgs, IStepTogglingEventArgs } from './common';
9-
import { pipe, Subject } from 'rxjs';
9+
import { Subject } from 'rxjs';
1010
import { takeUntil } from 'rxjs/operators';
1111
import { IgxIconModule } from 'igniteui-angular';
1212

1313
const STEPPER_CLASS = 'igx-stepper';
1414
const STEPPER_HEADER = 'igx-stepper__header';
1515
const STEP_TAG = 'IGX-STEP';
1616
const STEP_HEADER = 'igx-stepper__step-header';
17-
const STEP_CONTENT = 'igx-stepper__step-content';
1817

1918
describe('Rendering Tests', () => {
2019
configureTestSuite();
@@ -98,13 +97,13 @@ describe('Rendering Tests', () => {
9897
expect(changedSpy).not.toHaveBeenCalled();
9998

10099
let argsIng: IStepTogglingEventArgs = {
101-
activeStep: stepper.steps[1],
102-
previousActiveStep: stepper.steps[0],
100+
newIndex: stepper.steps[1].index,
101+
oldIndex: stepper.steps[0].index,
103102
owner: stepper,
104103
cancel: false
105104
};
106105
let argsEd: IStepToggledEventArgs = {
107-
activeStep: stepper.steps[1],
106+
index: stepper.steps[1].index,
108107
owner: stepper,
109108
};
110109

@@ -125,8 +124,8 @@ describe('Rendering Tests', () => {
125124
expect(changingSpy).not.toHaveBeenCalled();
126125

127126
let argsIng: IStepTogglingEventArgs = {
128-
activeStep: stepper.steps[1],
129-
previousActiveStep: stepper.steps[0],
127+
newIndex: stepper.steps[1].index,
128+
oldIndex: stepper.steps[0].index,
130129
owner: stepper,
131130
cancel: true
132131
};
@@ -185,7 +184,6 @@ describe('Rendering Tests', () => {
185184
fix.detectChanges();
186185

187186
expect(stepper.nativeElement).toHaveClass('igx-stepper--horizontal');
188-
189187
//no css class for vertical
190188
});
191189

@@ -224,7 +222,7 @@ describe('Rendering Tests', () => {
224222
expect(stepper.steps[0].nativeElement).toHaveClass(completedClass);
225223
});
226224

227-
it('should indicate that a step is invalid', ()=>{
225+
it('should indicate that a step is invalid', () => {
228226
let step0Header: HTMLElement = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`);
229227
let invalidClass = 'igx-stepper__step--invalid';
230228
stepper.steps[0].isValid = true;
@@ -235,6 +233,8 @@ describe('Rendering Tests', () => {
235233
stepper.steps[0].isValid = false;
236234
fix.detectChanges();
237235

236+
expect(step0Header).not.toHaveClass(invalidClass);
237+
238238
stepper.steps[1].active = true;
239239
fix.detectChanges();
240240

@@ -253,9 +253,14 @@ describe('Rendering Tests', () => {
253253
let indicatorElement = stepper.steps[i].nativeElement.querySelector(`div.${stepIndicatorClass}`);
254254
let titleElement = stepper.steps[i].nativeElement.querySelector(`.${stepTitleClass}`);
255255
let subtitleElement = stepper.steps[i].nativeElement.querySelector(`.${stepSubitleClass}`);
256-
256+
257257
expect(indicatorElement).not.toBeNull();
258258
expect(stepper.steps[i].isIndicatorVisible).toBeTruthy();
259+
if(i === 3) {
260+
expect(titleElement).toBeNull();
261+
expect(subtitleElement).toBeNull();
262+
continue;
263+
}
259264
expect(titleElement).not.toBeNull();
260265
expect(subtitleElement).not.toBeNull();
261266
expect(stepper.steps[i].isTitleVisible).toBeTruthy();
@@ -283,9 +288,14 @@ describe('Rendering Tests', () => {
283288
let indicatorElement = stepper.steps[i].nativeElement.querySelector(`div.${stepIndicatorClass}`);
284289
let titleElement = stepper.steps[i].nativeElement.querySelector(`.${stepTitleClass}`);
285290
let subtitleElement = stepper.steps[i].nativeElement.querySelector(`.${stepSubitleClass}`);
286-
291+
287292
expect(indicatorElement).toBeNull();
288293
expect(stepper.steps[i].isIndicatorVisible).toBeFalsy();
294+
if(i === 3) {
295+
expect(titleElement).toBeNull();
296+
expect(subtitleElement).toBeNull();
297+
continue;
298+
}
289299
expect(titleElement).not.toBeNull();
290300
expect(subtitleElement).not.toBeNull();
291301
expect(stepper.steps[i].isTitleVisible).toBeTruthy();
@@ -330,28 +340,34 @@ describe('Rendering Tests', () => {
330340
fix.detectChanges();
331341

332342
let stepIndicatorClass = "igx-stepper__step-indicator";
333-
let indicatorElement4 = stepper.steps[3].nativeElement.querySelector(`div.${stepIndicatorClass}`);
343+
let indicatorElement5 = stepper.steps[4].nativeElement.querySelector(`div.${stepIndicatorClass}`);
334344

335-
expect(stepper.steps[3].isIndicatorVisible).toBeTruthy();
336-
expect(indicatorElement4).not.toBeNull();
337-
expect(indicatorElement4.textContent).toBe((stepper.steps[3].index + 1).toString());
345+
expect(stepper.steps[4].isIndicatorVisible).toBeTruthy();
346+
expect(indicatorElement5).not.toBeNull();
347+
expect(indicatorElement5.textContent).toBe((stepper.steps[4].index + 1).toString());
338348

339349
stepper.stepType = IgxStepType.Indicator;
340350
fix.detectChanges();
341351

342-
indicatorElement4 = stepper.steps[3].nativeElement.querySelector(`div.${stepIndicatorClass}`);
352+
indicatorElement5 = stepper.steps[4].nativeElement.querySelector(`div.${stepIndicatorClass}`);
343353

344-
expect(indicatorElement4).not.toBeNull();
345-
expect(indicatorElement4.textContent).toBe((stepper.steps[3].index + 1).toString());
354+
expect(indicatorElement5).not.toBeNull();
355+
expect(indicatorElement5.textContent).toBe((stepper.steps[4].index + 1).toString());
346356
});
347357

348-
it('Should allow overriding the default invalid and completed indicators', () => {
358+
it('should allow overriding the default invalid, completed and active indicators', () => {
349359
let step0Header: HTMLElement = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`);
350-
let invalidClass = 'igx-stepper__step--invalid';
351360
let indicatorClass = 'igx-stepper__step-indicator';
361+
let invalidClass = 'igx-stepper__step--invalid';
362+
let completedClass = 'igx-stepper__step--completed';
363+
let currentClass = 'igx-stepper__step--current';
352364
let indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
353365

354-
expect(indicatorElement.textContent).toBe('1');
366+
expect(step0Header).not.toHaveClass(invalidClass);
367+
expect(step0Header).toHaveClass(currentClass);
368+
expect(stepper.steps[0].nativeElement).not.toHaveClass(completedClass);
369+
expect(indicatorElement.tagName).toBe('IGX-ICON');
370+
expect(indicatorElement.textContent).toBe("edit");
355371

356372
stepper.steps[0].isValid = false;
357373
fix.detectChanges();
@@ -362,6 +378,8 @@ describe('Rendering Tests', () => {
362378
indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
363379

364380
expect(step0Header).toHaveClass(invalidClass);
381+
expect(step0Header).not.toHaveClass(currentClass);
382+
expect(stepper.steps[0].nativeElement).not.toHaveClass(completedClass);
365383
expect(indicatorElement.tagName).toBe('IGX-ICON');
366384
expect(indicatorElement.textContent).toBe("error");
367385

@@ -372,10 +390,23 @@ describe('Rendering Tests', () => {
372390
indicatorElement = step0Header.querySelector(`.${indicatorClass}`).children[0];
373391

374392
expect(step0Header).not.toHaveClass(invalidClass);
393+
expect(step0Header).not.toHaveClass(currentClass);
394+
expect(stepper.steps[0].nativeElement).toHaveClass(completedClass);
375395
expect(indicatorElement.tagName).toBe('IGX-ICON');
376396
expect(indicatorElement.textContent).toBe("check");
377397
});
378398

399+
it('should be able to display the steps\' content above the steps headers when the stepper is horizontally orientated', () => {
400+
stepper.orientation = IgxStepperOrienatation.Horizontal;
401+
let contentTopClass = "igx-stepper--content-top";
402+
expect(stepper.nativeElement).not.toHaveClass(contentTopClass);
403+
404+
stepper.contentTop = true;
405+
fix.detectChanges();
406+
407+
expect(stepper.nativeElement).toHaveClass(contentTopClass);
408+
});
409+
379410
it('should allow modifying animationSettings that are used for transitioning between steps ', () => {
380411
stepper.orientation = IgxStepperOrienatation.Horizontal;
381412
fix.detectChanges();
@@ -516,7 +547,12 @@ describe('Rendering Tests', () => {
516547
}));
517548

518549
it('should specify tabIndex="0" for the active step and tabIndex="-1" for the other steps', fakeAsync(() => {
519-
let stepContent = stepper.nativeElement.querySelector(`.${STEP_CONTENT}`);
550+
stepper.orientation = IgxStepperOrienatation.Horizontal;
551+
stepper.steps[0].active = true;
552+
fix.detectChanges();
553+
554+
stepper.steps[0].nativeElement.focus();
555+
let stepContent = stepper.nativeElement.querySelector(`#${stepper.steps[0].id.replace('step', 'content')}`);
520556

521557
expect(stepper.steps[0].tabIndex).toBe(0);
522558
expect(stepContent.getAttribute("tabIndex")).toBe("0");
@@ -535,13 +571,31 @@ describe('Rendering Tests', () => {
535571
UIInteractions.triggerKeyDownEvtUponElem('Enter', stepper.steps[1].nativeElement);
536572
fix.detectChanges();
537573

538-
stepContent = stepper.nativeElement.querySelector(`.${STEP_CONTENT}`);
574+
stepContent = stepper.nativeElement.querySelector(`#${stepper.steps[1].id.replace('step', 'content')}`);
575+
expect(stepContent).not.toBeNull();
539576
expect(stepContent.getAttribute("tabIndex")).toBe("0");
540577

541578
for(let i = 0; i < stepper.steps.length; i++){
542579
if(i === 1) continue;
543580
expect(stepper.steps[i].tabIndex).toBe(-1);
544581
}
582+
583+
stepper.orientation = IgxStepperOrienatation.Vertical;
584+
stepper.steps[0].active = true;
585+
fix.detectChanges();
586+
587+
stepContent = stepper.nativeElement.querySelector(`#${stepper.steps[0].id.replace('step', 'content')}`);
588+
stepper.steps[0].nativeElement.focus();
589+
590+
expect(stepper.steps[0].tabIndex).toBe(0);
591+
expect(stepContent).not.toBeNull();
592+
expect(stepContent.getAttribute("tabIndex")).toBe("0");
593+
594+
for(let i = 1; i < stepper.steps.length; i++){
595+
stepContent = stepper.nativeElement.querySelector(`#${stepper.steps[i].id.replace('step', 'content')}`);
596+
expect(stepper.steps[i].tabIndex).toBe(-1);
597+
expect(stepContent).toBeNull();
598+
}
545599
}));
546600
});
547601
});
@@ -559,6 +613,10 @@ describe('Rendering Tests', () => {
559613
<igx-icon>check</igx-icon>
560614
</ng-template>
561615
616+
<ng-template igxStepActiveIndicator>
617+
<igx-icon>edit</igx-icon>
618+
</ng-template>
619+
562620
<igx-step #step1 [active]="true">
563621
<span igxStepIndicator>1</span>
564622
<span igxStepTitle>Step No 1</span>
@@ -587,15 +645,16 @@ describe('Rendering Tests', () => {
587645
</igx-step>
588646
589647
<igx-step #step4>
590-
<span igxStepIndicator>Step No 4</span>
591-
<span igxStepSubTitle>Step SubTitle</span>
648+
<span igxStepIndicator>4</span>
649+
<!-- <span igxStepTitle>Step No 4</span> -->
650+
<!-- <span igxStepSubTitle>Step SubTitle</span> -->
592651
<div igxStepContent class="sample-body">
593652
<p>Test step 4</p>
594653
</div>
595654
</igx-step>
596655
597656
<igx-step #step5 >
598-
<span igxStepIndicator>5</span>
657+
<!-- <span igxStepIndicator>5</span> -->
599658
<span igxStepTitle>Step No 5</span>
600659
<span igxStepSubTitle>Step SubTitle</span>
601660
<div igxStepContent class="sample-body">

0 commit comments

Comments
 (0)