Skip to content

Commit 89dd4aa

Browse files
madoarmadoar
committed
- adding tests for the new navigationBarLocations left and right
- making tslint happy by replacing " with '
1 parent 86dfdab commit 89dd4aa

8 files changed

+139
-73
lines changed

‎src/components/components/wizard-navigation-bar.component.spec.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/* tslint:disable:no-unused-variable */
2-
import {async, ComponentFixture, TestBed} from "@angular/core/testing";
3-
import {ViewChild, Component} from "@angular/core";
4-
import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
5-
import {WizardComponent} from "./wizard.component";
6-
import {WizardStepComponent} from "./wizard-step.component";
7-
import {GoToStepDirective} from "../directives/go-to-step.directive";
8-
import {By} from "@angular/platform-browser";
9-
import {OptionalStepDirective} from "../directives/optional-step.directive";
2+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
3+
import {ViewChild, Component} from '@angular/core';
4+
import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
5+
import {WizardComponent} from './wizard.component';
6+
import {WizardStepComponent} from './wizard-step.component';
7+
import {GoToStepDirective} from '../directives/go-to-step.directive';
8+
import {By} from '@angular/platform-browser';
9+
import {OptionalStepDirective} from '../directives/optional-step.directive';
1010

1111
@Component({
1212
selector: 'test-wizard',

‎src/components/components/wizard-step.component.spec.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* tslint:disable:no-unused-variable */
2-
import {async, ComponentFixture, TestBed} from "@angular/core/testing";
3-
import {WizardStepComponent} from "./wizard-step.component";
4-
import {ViewChild, Component} from "@angular/core";
5-
import {WizardComponent} from "./wizard.component";
6-
import {MovingDirection} from "../util/MovingDirection";
7-
import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
8-
import {GoToStepDirective} from "../directives/go-to-step.directive";
9-
import {By} from "@angular/platform-browser";
10-
import {OptionalStepDirective} from "../directives/optional-step.directive";
2+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
3+
import {WizardStepComponent} from './wizard-step.component';
4+
import {ViewChild, Component} from '@angular/core';
5+
import {WizardComponent} from './wizard.component';
6+
import {MovingDirection} from '../util/MovingDirection';
7+
import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
8+
import {GoToStepDirective} from '../directives/go-to-step.directive';
9+
import {By} from '@angular/platform-browser';
10+
import {OptionalStepDirective} from '../directives/optional-step.directive';
1111

1212
@Component({
1313
selector: 'test-wizard',

‎src/components/components/wizard.component.spec.ts

+84-18
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {WizardComponent} from './wizard.component';
55
import {WizardStepComponent} from './wizard-step.component';
66
import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
77
import {GoToStepDirective} from '../directives/go-to-step.directive';
8-
import {By} from "@angular/platform-browser";
8+
import {By} from '@angular/platform-browser';
99

1010
@Component({
1111
selector: 'test-wizard',
@@ -63,30 +63,96 @@ describe('WizardComponent', () => {
6363
expect(wizardTestFixture.debugElement.query(By.css('wizard'))).toBeTruthy();
6464
});
6565

66-
it('should contain navigation bar at the correct position', () => {
66+
it('should contain navigation bar at the correct position in default navBarLocation mode', () => {
67+
const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
68+
const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
69+
const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
70+
6771
// check default: the navbar should be at the top of the wizard if no navBarLocation was set
68-
expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
69-
expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
70-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('wizard-navigation-bar');
71-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('div');
72+
expect(navBar).toBeTruthy();
73+
expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
74+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
75+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
76+
77+
expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
78+
expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
79+
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
80+
});
7281

73-
wizardTest.wizard.navBarLocation = "bottom";
82+
it('should contain navigation bar at the correct position in top navBarLocation mode', () => {
83+
wizardTest.wizard.navBarLocation = 'top';
7484
wizardTestFixture.detectChanges();
7585

76-
// navBar should be at the bottom of the wizard
77-
expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
78-
expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
79-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('div');
80-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('wizard-navigation-bar');
86+
const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
87+
const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
88+
const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
89+
90+
// check default: the navbar should be at the top of the wizard if no navBarLocation was set
91+
expect(navBar).toBeTruthy();
92+
expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
93+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
94+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
95+
96+
expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
97+
expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
98+
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
99+
});
81100

82-
wizardTest.wizard.navBarLocation = "top";
101+
it('should contain navigation bar at the correct position in left navBarLocation mode', () => {
102+
wizardTest.wizard.navBarLocation = 'left';
83103
wizardTestFixture.detectChanges();
84104

85-
// navBar should be at the top of the wizard
86-
expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
87-
expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
88-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('wizard-navigation-bar');
89-
expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('div');
105+
const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
106+
const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
107+
const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
108+
109+
// check default: the navbar should be at the top of the wizard if no navBarLocation was set
110+
expect(navBar).toBeTruthy();
111+
expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
112+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
113+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
114+
115+
expect(navBar.classes).toEqual({ 'horizontal': false, 'vertical': true });
116+
expect(wizard.classes).toEqual({ 'horizontal': false, 'vertical': true });
117+
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': false, 'vertical': true });
118+
});
119+
120+
it('should contain navigation bar at the correct position in bottom navBarLocation mode', () => {
121+
wizardTest.wizard.navBarLocation = 'bottom';
122+
wizardTestFixture.detectChanges();
123+
124+
const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
125+
const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
126+
const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
127+
128+
// check default: the navbar should be at the top of the wizard if no navBarLocation was set
129+
expect(navBar).toBeTruthy();
130+
expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
131+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('div');
132+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('wizard-navigation-bar');
133+
134+
expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
135+
expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
136+
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
137+
});
138+
139+
it('should contain navigation bar at the correct position in right navBarLocation mode', () => {
140+
wizardTest.wizard.navBarLocation = 'right';
141+
wizardTestFixture.detectChanges();
142+
143+
const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
144+
const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
145+
const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
146+
147+
// check default: the navbar should be at the top of the wizard if no navBarLocation was set
148+
expect(navBar).toBeTruthy();
149+
expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
150+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('div');
151+
expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('wizard-navigation-bar');
152+
153+
expect(navBar.classes).toEqual({ 'horizontal': false, 'vertical': true });
154+
expect(wizard.classes).toEqual({ 'horizontal': false, 'vertical': true });
155+
expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': false, 'vertical': true });
90156
});
91157

92158
it('should have steps', () => {

‎src/components/components/wizard.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ export class WizardComponent implements AfterContentInit {
2121

2222
@HostBinding('class.horizontal')
2323
public get horizontalOrientation(): boolean {
24-
return this.navBarLocation === "top" || this.navBarLocation === "bottom";
24+
return this.navBarLocation === 'top' || this.navBarLocation === 'bottom';
2525
}
2626

2727
@HostBinding('class.vertical')
2828
public get verticalOrientation(): boolean {
29-
return this.navBarLocation === "left" || this.navBarLocation === "right";
29+
return this.navBarLocation === 'left' || this.navBarLocation === 'right';
3030
}
3131

3232
/**

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

+15-15
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
* Created by marc on 09.01.17.
33
*/
44
import {GoToStepDirective} from './go-to-step.directive';
5-
import {Component, ViewChild} from "@angular/core";
6-
import {WizardComponent} from "../components/wizard.component";
7-
import {ComponentFixture, async, TestBed} from "@angular/core/testing";
8-
import {WizardStepComponent} from "../components/wizard-step.component";
9-
import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
10-
import {By} from "@angular/platform-browser";
11-
import {OptionalStepDirective} from "./optional-step.directive";
5+
import {Component, ViewChild} from '@angular/core';
6+
import {WizardComponent} from '../components/wizard.component';
7+
import {ComponentFixture, async, TestBed} from '@angular/core/testing';
8+
import {WizardStepComponent} from '../components/wizard-step.component';
9+
import {WizardNavigationBarComponent} from '../components/wizard-navigation-bar.component';
10+
import {By} from '@angular/platform-browser';
11+
import {OptionalStepDirective} from './optional-step.directive';
1212

1313
@Component({
1414
selector: 'test-wizard',
@@ -72,57 +72,57 @@ describe('GoToStepDirective', () => {
7272
const secondStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]')).nativeElement;
7373

7474
expect(wizardTest.wizard.currentStepIndex).toBe(0);
75-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
75+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
7676

7777
// click button
7878
firstStepGoToButton.click();
7979
wizardTestFixture.detectChanges();
8080

8181
expect(wizardTest.wizard.currentStepIndex).toBe(1);
82-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 2");
82+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 2');
8383

8484
// click button
8585
secondStepGoToButton.click();
8686
wizardTestFixture.detectChanges();
8787

8888
expect(wizardTest.wizard.currentStepIndex).toBe(2);
89-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
89+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 3');
9090
});
9191

9292
it('should jump over an optional step correctly', () => {
9393
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(3)')).nativeElement;
9494
const thirdStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 3"] > button[goToStep]')).nativeElement;
9595

9696
expect(wizardTest.wizard.currentStepIndex).toBe(0);
97-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
97+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
9898

9999
// click button
100100
firstStepGoToButton.click();
101101
wizardTestFixture.detectChanges();
102102

103103
expect(wizardTest.wizard.currentStepIndex).toBe(2);
104-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
104+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 3');
105105

106106
// click button
107107
thirdStepGoToButton.click();
108108
wizardTestFixture.detectChanges();
109109

110110
expect(wizardTest.wizard.currentStepIndex).toBe(0);
111-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
111+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
112112
});
113113

114114
it('should stay at current step correctly', () => {
115115
const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(1)')).nativeElement;
116116

117117
expect(wizardTest.wizard.currentStepIndex).toBe(0);
118-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
118+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
119119

120120
// click button
121121
firstStepGoToButton.click();
122122
wizardTestFixture.detectChanges();
123123

124124
expect(wizardTest.wizard.currentStepIndex).toBe(0);
125-
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
125+
expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
126126
});
127127

128128
it('should finalize step correctly', () => {

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
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";
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';
1111

1212
@Component({
1313
selector: 'test-wizard',

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
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";
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';
1111

1212
@Component({
1313
selector: 'test-wizard',

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
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";
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';
1111

1212
@Component({
1313
selector: 'test-wizard',

0 commit comments

Comments
 (0)