Skip to content

Commit 24afe91

Browse files
madoarmadoar
committed
- improving the tests for the goToStep directive
- adding tests for the other directives (nextStep, optionalStep and previousStep)
1 parent 8e3957b commit 24afe91

File tree

4 files changed

+249
-20
lines changed

4 files changed

+249
-20
lines changed

‎src/components/directives/go-to-step.directive.spec.ts‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {ComponentFixture, async, TestBed} from "@angular/core/testing";
88
import {WizardStepComponent} from "../components/wizard-step.component";
99
import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
1010
import {By} from "@angular/platform-browser";
11+
import {OptionalStepDirective} from "./optional-step.directive";
1112

1213
@Component({
1314
selector: 'test-wizard',
@@ -16,10 +17,15 @@ import {By} from "@angular/platform-browser";
1617
<wizard-step title='Steptitle 1'>
1718
Step 1
1819
<button type="button" goToStep="1" (finalize)="finalizeStep(1)">Go to second step</button>
20+
<button type="button" goToStep="2" (finalize)="finalizeStep(1)">Go to third step</button>
1921
</wizard-step>
20-
<wizard-step title='Steptitle 2'>
22+
<wizard-step title='Steptitle 2' optionalStep>
2123
Step 2
22-
<button type="button" goToStep="0" (finalize)="finalizeStep(2)">Go to first step</button>
24+
<button type="button" goToStep="2" (finalize)="finalizeStep(2)">Go to third step</button>
25+
</wizard-step>
26+
<wizard-step title='Steptitle 3'>
27+
Step 3
28+
<button type="button" goToStep="0" (finalize)="finalizeStep(3)">Go to first step</button>
2329
</wizard-step>
2430
</wizard>
2531
`
@@ -41,7 +47,7 @@ describe('GoToStepDirective', () => {
4147

4248
beforeEach(async(() => {
4349
TestBed.configureTestingModule({
44-
declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective]
50+
declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective, OptionalStepDirective]
4551
}).compileComponents();
4652
}));
4753

@@ -52,36 +58,61 @@ describe('GoToStepDirective', () => {
5258
});
5359

5460
it('should create an instance', () => {
55-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]'))).toBeTruthy();
61+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:first-child'))).toBeTruthy();
62+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(2)'))).toBeTruthy();
5663
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]'))).toBeTruthy();
57-
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step > button[goToStep]')).length).toBe(2);
64+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 3"] > button[goToStep]'))).toBeTruthy();
65+
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step > button[goToStep]')).length).toBe(4);
5866
});
5967

6068
it('should move to step correctly', () => {
61-
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]')).nativeElement;
69+
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:first-child')).nativeElement;
6270
const secondStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]')).nativeElement;
6371

6472
expect(wizardTest.wizard.currentStepIndex).toBe(0);
65-
expect(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step:first-child')));
73+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
6674

6775
// click button
6876
firstStepGoToButton.click();
6977
wizardTestFixture.detectChanges();
7078

7179
expect(wizardTest.wizard.currentStepIndex).toBe(1);
72-
expect(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step :nth-child(2)')));
80+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 2");
7381

7482
// click button
7583
secondStepGoToButton.click();
7684
wizardTestFixture.detectChanges();
7785

86+
expect(wizardTest.wizard.currentStepIndex).toBe(2);
87+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
88+
});
89+
90+
it('should jump over an optional step correctly', () => {
91+
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(2)')).nativeElement;
92+
const thirdStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 3"] > button[goToStep]')).nativeElement;
93+
7894
expect(wizardTest.wizard.currentStepIndex).toBe(0);
79-
expect(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step:first-child')));
95+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
96+
97+
// click button
98+
firstStepGoToButton.click();
99+
wizardTestFixture.detectChanges();
100+
101+
expect(wizardTest.wizard.currentStepIndex).toBe(2);
102+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
103+
104+
// click button
105+
thirdStepGoToButton.click();
106+
wizardTestFixture.detectChanges();
107+
108+
expect(wizardTest.wizard.currentStepIndex).toBe(0);
109+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
80110
});
81111

112+
82113
it('should finalize step correctly', () => {
83-
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]')).nativeElement;
84-
const secondStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]')).nativeElement;
114+
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(2)')).nativeElement;
115+
const thirdStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 3"] > button[goToStep]')).nativeElement;
85116

86117
expect(wizardTest.wizard.currentStepIndex).toBe(0);
87118
expect(wizardTest.eventLog).toEqual([]);
@@ -90,14 +121,14 @@ describe('GoToStepDirective', () => {
90121
firstStepGoToButton.click();
91122
wizardTestFixture.detectChanges();
92123

93-
expect(wizardTest.wizard.currentStepIndex).toBe(1);
124+
expect(wizardTest.wizard.currentStepIndex).toBe(2);
94125
expect(wizardTest.eventLog).toEqual(['finalize 1']);
95126

96127
// click button
97-
secondStepGoToButton.click();
128+
thirdStepGoToButton.click();
98129
wizardTestFixture.detectChanges();
99130

100131
expect(wizardTest.wizard.currentStepIndex).toBe(0);
101-
expect(wizardTest.eventLog).toEqual(['finalize 1', 'finalize 2']);
132+
expect(wizardTest.eventLog).toEqual(['finalize 1', 'finalize 3']);
102133
});
103134
});

‎src/components/directives/next-step.directive.spec.ts‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,93 @@
11
/* tslint:disable:no-unused-variable */
22

33
import { NextStepDirective } from './next-step.directive';
4+
import {ViewChild, Component} from "@angular/core";
5+
import {WizardComponent} from "../components/wizard.component";
6+
import {ComponentFixture, async, TestBed} from "@angular/core/testing";
7+
import {WizardStepComponent} from "../components/wizard-step.component";
8+
import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
9+
import {GoToStepDirective} from "./go-to-step.directive";
10+
import {By} from "@angular/platform-browser";
11+
12+
@Component({
13+
selector: 'test-wizard',
14+
template: `
15+
<wizard>
16+
<wizard-step title='Steptitle 1'>
17+
Step 1
18+
<button type="button" nextStep (finalize)="finalizeStep(1)">Go to second step</button>
19+
</wizard-step>
20+
<wizard-step title='Steptitle 2'>
21+
Step 2
22+
<button type="button" nextStep (finalize)="finalizeStep(2)">Go to third step</button>
23+
</wizard-step>
24+
</wizard>
25+
`
26+
})
27+
class WizardTestComponent {
28+
@ViewChild(WizardComponent)
29+
public wizard: WizardComponent;
30+
31+
public eventLog: Array<string> = new Array<string>();
32+
33+
finalizeStep(stepIndex: number): void {
34+
this.eventLog.push(`finalize ${stepIndex}`);
35+
}
36+
}
437

538
describe('NextStepDirective', () => {
39+
let wizardTest: WizardTestComponent;
40+
let wizardTestFixture: ComponentFixture<WizardTestComponent>;
41+
42+
beforeEach(async(() => {
43+
TestBed.configureTestingModule({
44+
declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective, NextStepDirective]
45+
}).compileComponents();
46+
}));
47+
48+
beforeEach(() => {
49+
wizardTestFixture = TestBed.createComponent(WizardTestComponent);
50+
wizardTest = wizardTestFixture.componentInstance;
51+
wizardTestFixture.detectChanges();
52+
});
53+
654
it('should create an instance', () => {
7-
let directive = new NextStepDirective(null);
8-
expect(directive).toBeTruthy();
55+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[nextStep]'))).toBeTruthy();
56+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[nextStep]'))).toBeTruthy();
57+
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step > button[nextStep]')).length).toBe(2);
58+
});
59+
60+
it('should move correctly to the next step', () => {
61+
const firstStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[nextStep]')).nativeElement;
62+
const secondStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[nextStep]')).nativeElement;
63+
64+
expect(wizardTest.wizard.currentStepIndex).toBe(0);
65+
66+
// go to second step
67+
firstStepButton.click();
68+
69+
expect(wizardTest.wizard.currentStepIndex).toBe(1);
70+
71+
// don't go to third step because it doesn't exist
72+
secondStepButton.click();
73+
74+
expect(wizardTest.wizard.currentStepIndex).toBe(1);
75+
});
76+
77+
it('should move call finalize correctly when going the next step', () => {
78+
const firstStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[nextStep]')).nativeElement;
79+
const secondStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[nextStep]')).nativeElement;
80+
81+
expect(wizardTest.eventLog).toEqual([]);
82+
83+
// go to second step
84+
firstStepButton.click();
85+
86+
expect(wizardTest.eventLog).toEqual(['finalize 1']);
87+
88+
// don't go to third step because it doesn't exist
89+
secondStepButton.click();
90+
91+
expect(wizardTest.eventLog).toEqual(['finalize 1']);
992
});
1093
});

‎src/components/directives/optional-step.directive.spec.ts‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,59 @@
11
/* tslint:disable:no-unused-variable */
22

33
import { OptionalStepDirective } from './optional-step.directive';
4+
import {Component, ViewChild} from "@angular/core";
5+
import {WizardComponent} from "../components/wizard.component";
6+
import {ComponentFixture, TestBed, async} from "@angular/core/testing";
7+
import {WizardStepComponent} from "../components/wizard-step.component";
8+
import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
9+
import {GoToStepDirective} from "./go-to-step.directive";
10+
import {By} from "@angular/platform-browser";
11+
12+
@Component({
13+
selector: 'test-wizard',
14+
template: `
15+
<wizard>
16+
<wizard-step title='Steptitle 1'>
17+
Step 1
18+
</wizard-step>
19+
<wizard-step title='Steptitle 2' optionalStep>
20+
Step 2
21+
</wizard-step>
22+
<wizard-step title='Steptitle 3'>
23+
Step 3
24+
</wizard-step>
25+
</wizard>
26+
`
27+
})
28+
class WizardTestComponent {
29+
@ViewChild(WizardComponent)
30+
public wizard: WizardComponent;
31+
}
432

533
describe('OptionalStepDirective', () => {
34+
let wizardTest: WizardTestComponent;
35+
let wizardTestFixture: ComponentFixture<WizardTestComponent>;
36+
37+
beforeEach(async(() => {
38+
TestBed.configureTestingModule({
39+
declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective, OptionalStepDirective]
40+
}).compileComponents();
41+
}));
42+
43+
beforeEach(() => {
44+
wizardTestFixture = TestBed.createComponent(WizardTestComponent);
45+
wizardTest = wizardTestFixture.componentInstance;
46+
wizardTestFixture.detectChanges();
47+
});
48+
649
it('should create an instance', () => {
7-
let directive = new OptionalStepDirective(null);
8-
expect(directive).toBeTruthy();
50+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[optionalStep]'))).toBeTruthy();
51+
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step[optionalStep]')).length).toBe(1);
52+
});
53+
54+
it('should set optional correctly', () => {
55+
expect(wizardTest.wizard.getStepAtIndex(0).optional).toBe(false);
56+
expect(wizardTest.wizard.getStepAtIndex(1).optional).toBe(true);
57+
expect(wizardTest.wizard.getStepAtIndex(2).optional).toBe(false);
958
});
1059
});

‎src/components/directives/previous-step.directive.spec.ts‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,76 @@
11
/* tslint:disable:no-unused-variable */
22

33
import { PreviousStepDirective } from './previous-step.directive';
4+
import {ViewChild, Component} from "@angular/core";
5+
import {WizardComponent} from "../components/wizard.component";
6+
import {GoToStepDirective} from "./go-to-step.directive";
7+
import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
8+
import {WizardStepComponent} from "../components/wizard-step.component";
9+
import {TestBed, async, ComponentFixture} from "@angular/core/testing";
10+
import {By} from "@angular/platform-browser";
11+
12+
@Component({
13+
selector: 'test-wizard',
14+
template: `
15+
<wizard>
16+
<wizard-step title='Steptitle 1'>
17+
Step 1
18+
<button type="button" previousStep>Go to zero step</button>
19+
</wizard-step>
20+
<wizard-step title='Steptitle 2'>
21+
Step 2
22+
<button type="button" previousStep>Go to first step</button>
23+
</wizard-step>
24+
</wizard>
25+
`
26+
})
27+
class WizardTestComponent {
28+
@ViewChild(WizardComponent)
29+
public wizard: WizardComponent;
30+
}
431

532
describe('PreviousStepDirective', () => {
33+
let wizardTest: WizardTestComponent;
34+
let wizardTestFixture: ComponentFixture<WizardTestComponent>;
35+
36+
beforeEach(async(() => {
37+
TestBed.configureTestingModule({
38+
declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective, PreviousStepDirective]
39+
}).compileComponents();
40+
}));
41+
42+
beforeEach(() => {
43+
wizardTestFixture = TestBed.createComponent(WizardTestComponent);
44+
wizardTest = wizardTestFixture.componentInstance;
45+
wizardTestFixture.detectChanges();
46+
});
47+
648
it('should create an instance', () => {
7-
let directive = new PreviousStepDirective(null);
8-
expect(directive).toBeTruthy();
49+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[previousStep]'))).toBeTruthy();
50+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[previousStep]'))).toBeTruthy();
51+
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step > button[previousStep]')).length).toBe(2);
52+
});
53+
54+
it('should move correctly to the previous step', () => {
55+
const firstStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[previousStep]')).nativeElement;
56+
const secondStepButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[previousStep]')).nativeElement;
57+
58+
expect(wizardTest.wizard.currentStepIndex).toBe(0);
59+
60+
// don't go to zero (-1) step, because it doesn't exist
61+
firstStepButton.click();
62+
63+
expect(wizardTest.wizard.currentStepIndex).toBe(0);
64+
65+
// move to second step to test the previousStep directive
66+
wizardTest.wizard.goToStep(1);
67+
wizardTestFixture.detectChanges();
68+
69+
expect(wizardTest.wizard.currentStepIndex).toBe(1);
70+
71+
// go back to first step
72+
secondStepButton.click();
73+
74+
expect(wizardTest.wizard.currentStepIndex).toBe(0);
975
});
1076
});

0 commit comments

Comments
 (0)