- adding tests for the new navigationBarLocations left and right

- making tslint happy by replacing " with '
madoar · Feb 20, 2017 · 89dd4aa · 89dd4aa
1 parent 86dfdab
commit 89dd4aa
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 73 deletions.
diff --git a/src/components/components/wizard-navigation-bar.component.spec.ts b/src/components/components/wizard-navigation-bar.component.spec.ts
@@ -1,12 +1,12 @@
 /* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {ViewChild, Component} from "@angular/core";
-import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
-import {WizardComponent} from "./wizard.component";
-import {WizardStepComponent} from "./wizard-step.component";
-import {GoToStepDirective} from "../directives/go-to-step.directive";
-import {By} from "@angular/platform-browser";
-import {OptionalStepDirective} from "../directives/optional-step.directive";
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ViewChild, Component} from '@angular/core';
+import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
+import {WizardComponent} from './wizard.component';
+import {WizardStepComponent} from './wizard-step.component';
+import {GoToStepDirective} from '../directives/go-to-step.directive';
+import {By} from '@angular/platform-browser';
+import {OptionalStepDirective} from '../directives/optional-step.directive';
 
 @Component({
   selector: 'test-wizard',

diff --git a/src/components/components/wizard-step.component.spec.ts b/src/components/components/wizard-step.component.spec.ts
@@ -1,13 +1,13 @@
 /* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {WizardStepComponent} from "./wizard-step.component";
-import {ViewChild, Component} from "@angular/core";
-import {WizardComponent} from "./wizard.component";
-import {MovingDirection} from "../util/MovingDirection";
-import {WizardNavigationBarComponent} from "./wizard-navigation-bar.component";
-import {GoToStepDirective} from "../directives/go-to-step.directive";
-import {By} from "@angular/platform-browser";
-import {OptionalStepDirective} from "../directives/optional-step.directive";
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {WizardStepComponent} from './wizard-step.component';
+import {ViewChild, Component} from '@angular/core';
+import {WizardComponent} from './wizard.component';
+import {MovingDirection} from '../util/MovingDirection';
+import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
+import {GoToStepDirective} from '../directives/go-to-step.directive';
+import {By} from '@angular/platform-browser';
+import {OptionalStepDirective} from '../directives/optional-step.directive';
 
 @Component({
   selector: 'test-wizard',

diff --git a/src/components/components/wizard.component.spec.ts b/src/components/components/wizard.component.spec.ts
@@ -5,7 +5,7 @@ import {WizardComponent} from './wizard.component';
 import {WizardStepComponent} from './wizard-step.component';
 import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
 import {GoToStepDirective} from '../directives/go-to-step.directive';
-import {By} from "@angular/platform-browser";
+import {By} from '@angular/platform-browser';
 
 @Component({
   selector: 'test-wizard',
@@ -63,30 +63,96 @@ describe('WizardComponent', () => {
     expect(wizardTestFixture.debugElement.query(By.css('wizard'))).toBeTruthy();
   });
 
-  it('should contain navigation bar at the correct position', () => {
+  it('should contain navigation bar at the correct position in default navBarLocation mode', () => {
+    const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
+    const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
+    const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
+
     // check default: the navbar should be at the top of the wizard if no navBarLocation was set
-    expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
-    expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('wizard-navigation-bar');
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('div');
+    expect(navBar).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
+
+    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
+  });
 
-    wizardTest.wizard.navBarLocation = "bottom";
+  it('should contain navigation bar at the correct position in top navBarLocation mode', () => {
+    wizardTest.wizard.navBarLocation = 'top';
     wizardTestFixture.detectChanges();
 
-    // navBar should be at the bottom of the wizard
-    expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
-    expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('div');
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('wizard-navigation-bar');
+    const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
+    const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
+    const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
+
+    // check default: the navbar should be at the top of the wizard if no navBarLocation was set
+    expect(navBar).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
+
+    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
+  });
 
-    wizardTest.wizard.navBarLocation = "top";
+  it('should contain navigation bar at the correct position in left navBarLocation mode', () => {
+    wizardTest.wizard.navBarLocation = 'left';
     wizardTestFixture.detectChanges();
 
-    // navBar should be at the top of the wizard
-    expect(wizardTestFixture.debugElement.query(By.css("wizard-navigation-bar"))).toBeTruthy();
-    expect(wizardTestFixture.debugElement.query(By.css("wizard")).children.length).toBe(2);
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :first-child")).name).toBe('wizard-navigation-bar');
-    expect(wizardTestFixture.debugElement.query(By.css("wizard > :last-child")).name).toBe('div');
+    const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
+    const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
+    const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
+
+    // check default: the navbar should be at the top of the wizard if no navBarLocation was set
+    expect(navBar).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('wizard-navigation-bar');
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('div');
+
+    expect(navBar.classes).toEqual({ 'horizontal': false, 'vertical': true });
+    expect(wizard.classes).toEqual({ 'horizontal': false, 'vertical': true });
+    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': false, 'vertical': true });
+  });
+
+  it('should contain navigation bar at the correct position in bottom navBarLocation mode', () => {
+    wizardTest.wizard.navBarLocation = 'bottom';
+    wizardTestFixture.detectChanges();
+
+    const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
+    const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
+    const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
+
+    // check default: the navbar should be at the top of the wizard if no navBarLocation was set
+    expect(navBar).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('div');
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('wizard-navigation-bar');
+
+    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizard.classes).toEqual({ 'horizontal': true, 'vertical': false });
+    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': true, 'vertical': false });
+  });
+
+  it('should contain navigation bar at the correct position in right navBarLocation mode', () => {
+    wizardTest.wizard.navBarLocation = 'right';
+    wizardTestFixture.detectChanges();
+
+    const navBar = wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'));
+    const wizard = wizardTestFixture.debugElement.query(By.css('wizard'));
+    const wizardStepsDiv = wizardTestFixture.debugElement.query(By.css('div.wizard-steps'));
+
+    // check default: the navbar should be at the top of the wizard if no navBarLocation was set
+    expect(navBar).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard')).children.length).toBe(2);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :first-child')).name).toBe('div');
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > :last-child')).name).toBe('wizard-navigation-bar');
+
+    expect(navBar.classes).toEqual({ 'horizontal': false, 'vertical': true });
+    expect(wizard.classes).toEqual({ 'horizontal': false, 'vertical': true });
+    expect(wizardStepsDiv.classes).toEqual({ 'wizard-steps': true, 'horizontal': false, 'vertical': true });
   });
 
   it('should have steps', () => {

diff --git a/src/components/components/wizard.component.ts b/src/components/components/wizard.component.ts
@@ -21,12 +21,12 @@ export class WizardComponent implements AfterContentInit {
 
   @HostBinding('class.horizontal')
   public get horizontalOrientation(): boolean {
-    return this.navBarLocation === "top" || this.navBarLocation === "bottom";
+    return this.navBarLocation === 'top' || this.navBarLocation === 'bottom';
   }
 
   @HostBinding('class.vertical')
   public get verticalOrientation(): boolean {
-    return this.navBarLocation === "left" || this.navBarLocation === "right";
+    return this.navBarLocation === 'left' || this.navBarLocation === 'right';
   }
 
   /**

diff --git a/src/components/directives/go-to-step.directive.spec.ts b/src/components/directives/go-to-step.directive.spec.ts
@@ -2,13 +2,13 @@
  * Created by marc on 09.01.17.
  */
 import {GoToStepDirective} from './go-to-step.directive';
-import {Component, ViewChild} from "@angular/core";
-import {WizardComponent} from "../components/wizard.component";
-import {ComponentFixture, async, TestBed} from "@angular/core/testing";
-import {WizardStepComponent} from "../components/wizard-step.component";
-import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
-import {By} from "@angular/platform-browser";
-import {OptionalStepDirective} from "./optional-step.directive";
+import {Component, ViewChild} from '@angular/core';
+import {WizardComponent} from '../components/wizard.component';
+import {ComponentFixture, async, TestBed} from '@angular/core/testing';
+import {WizardStepComponent} from '../components/wizard-step.component';
+import {WizardNavigationBarComponent} from '../components/wizard-navigation-bar.component';
+import {By} from '@angular/platform-browser';
+import {OptionalStepDirective} from './optional-step.directive';
 
 @Component({
   selector: 'test-wizard',
@@ -72,57 +72,57 @@ describe('GoToStepDirective', () => {
     const secondStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
 
     // click button
     firstStepGoToButton.click();
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(1);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 2");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 2');
 
     // click button
     secondStepGoToButton.click();
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(2);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 3');
   });
 
   it('should jump over an optional step correctly', () => {
     const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(3)')).nativeElement;
     const thirdStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 3"] > button[goToStep]')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
 
     // click button
     firstStepGoToButton.click();
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(2);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 3");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 3');
 
     // click button
     thirdStepGoToButton.click();
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
   });
 
   it('should stay at current step correctly', () => {
     const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]:nth-child(1)')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
 
     // click button
     firstStepGoToButton.click();
     wizardTestFixture.detectChanges();
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
-    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe("Steptitle 1");
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step.current')).nativeElement.title).toBe('Steptitle 1');
   });
 
   it('should finalize step correctly', () => {

diff --git a/src/components/directives/next-step.directive.spec.ts b/src/components/directives/next-step.directive.spec.ts
@@ -1,13 +1,13 @@
 /* tslint:disable:no-unused-variable */
 
 import { NextStepDirective } from './next-step.directive';
-import {ViewChild, Component} from "@angular/core";
-import {WizardComponent} from "../components/wizard.component";
-import {ComponentFixture, async, TestBed} from "@angular/core/testing";
-import {WizardStepComponent} from "../components/wizard-step.component";
-import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
-import {GoToStepDirective} from "./go-to-step.directive";
-import {By} from "@angular/platform-browser";
+import {ViewChild, Component} from '@angular/core';
+import {WizardComponent} from '../components/wizard.component';
+import {ComponentFixture, async, TestBed} from '@angular/core/testing';
+import {WizardStepComponent} from '../components/wizard-step.component';
+import {WizardNavigationBarComponent} from '../components/wizard-navigation-bar.component';
+import {GoToStepDirective} from './go-to-step.directive';
+import {By} from '@angular/platform-browser';
 
 @Component({
   selector: 'test-wizard',

diff --git a/src/components/directives/optional-step.directive.spec.ts b/src/components/directives/optional-step.directive.spec.ts
@@ -1,13 +1,13 @@
 /* tslint:disable:no-unused-variable */
 
 import { OptionalStepDirective } from './optional-step.directive';
-import {Component, ViewChild} from "@angular/core";
-import {WizardComponent} from "../components/wizard.component";
-import {ComponentFixture, TestBed, async} from "@angular/core/testing";
-import {WizardStepComponent} from "../components/wizard-step.component";
-import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
-import {GoToStepDirective} from "./go-to-step.directive";
-import {By} from "@angular/platform-browser";
+import {Component, ViewChild} from '@angular/core';
+import {WizardComponent} from '../components/wizard.component';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {WizardStepComponent} from '../components/wizard-step.component';
+import {WizardNavigationBarComponent} from '../components/wizard-navigation-bar.component';
+import {GoToStepDirective} from './go-to-step.directive';
+import {By} from '@angular/platform-browser';
 
 @Component({
   selector: 'test-wizard',

diff --git a/src/components/directives/previous-step.directive.spec.ts b/src/components/directives/previous-step.directive.spec.ts
@@ -1,13 +1,13 @@
 /* tslint:disable:no-unused-variable */
 
 import { PreviousStepDirective } from './previous-step.directive';
-import {ViewChild, Component} from "@angular/core";
-import {WizardComponent} from "../components/wizard.component";
-import {GoToStepDirective} from "./go-to-step.directive";
-import {WizardNavigationBarComponent} from "../components/wizard-navigation-bar.component";
-import {WizardStepComponent} from "../components/wizard-step.component";
-import {TestBed, async, ComponentFixture} from "@angular/core/testing";
-import {By} from "@angular/platform-browser";
+import {ViewChild, Component} from '@angular/core';
+import {WizardComponent} from '../components/wizard.component';
+import {GoToStepDirective} from './go-to-step.directive';
+import {WizardNavigationBarComponent} from '../components/wizard-navigation-bar.component';
+import {WizardStepComponent} from '../components/wizard-step.component';
+import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 
 @Component({
   selector: 'test-wizard',