- optional steps can belong to the css class default too now

- added additional tests for clicks on links in the navigation bar
- imporoved the existing tests for the navigation bar
- added string as a valid type for the destinationStep input to the goToStep directive
- added Code climate for code coverage

Author: madoar

.travis.yml

@@ -10,3 +10,10 @@ node_js:
 
 before_install: if [[ `npm -v` != 3* || `npm -v` != 4* ]]; then npm i -g npm@3; fi
 
+addons:
+  code_climate:
+    repo_token: 185e4d44752c64f89d9e5c50eb3a8d5ec421acf3b58b7cdb01ddcff2257336dd
+
+after_success:
+  - npm install -g codeclimate-test-reporter
+  - codeclimate-test-reporter < lcov.info

README.md

@@ -4,6 +4,8 @@
 [![Dependency Status](https://david-dm.org/madoar/ng2-wizard.svg)](https://david-dm.org/madoar/ng2-wizard)
 [![Dev-Dependency Status](https://david-dm.org/madoar/ng2-wizard/dev-status.svg)](https://david-dm.org/madoar/ng2-wizard?type=dev)
 [![Dependency Licence Status](https://dependencyci.com/github/madoar/ng2-wizard/badge)](https://dependencyci.com/github/madoar/ng2-wizard)
+[![Code Climate](https://codeclimate.com/github/madoar/ng2-wizard/badges/gpa.svg)](https://codeclimate.com/github/madoar/ng2-wizard)
+[![Test Coverage](https://codeclimate.com/github/madoar/ng2-wizard/badges/coverage.svg)](https://codeclimate.com/github/madoar/ng2-wizard/coverage)
 
 This project contains a functional wizard component for [Angular 2](https://angular.io/).
 

package.json

@@ -82,7 +82,7 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "node-sass": "^3.4.2",
-    "phantomjs-prebuilt": "^2.1.4",
+    "phantomjs-prebuilt": "^2.1.14",
     "postcss-loader": "^1.1.0",
     "protractor": "^4.0.10",
     "raw-loader": "0.5.1",

src/components/components/wizard-navigation-bar.component.html

@@ -1,7 +1,7 @@
 <ul class="steps-indicator steps-{{numberOfWizardSteps()}}">
   <li *ngFor="let step of getWizardSteps()"
       [ngClass]="{
-        default: !step.completed && !step.selected && !step.optional,
+        default: !step.completed && !step.selected,
         current: step.selected && !step.completed,
         done: step.completed && !step.selected,
         editing: step.selected && step.completed,

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

@@ -69,10 +69,11 @@ describe('WizardNavigationBarComponent', () => {
     expect(navBar.query(By.css('li.optional'))).toBe(navBar.query(By.css('li:nth-child(2)')));
     expect(navBar.queryAll(By.css('li.optional')).length).toBe(1);
 
-    // only the third step is marked as default (neither done, current or optional)
+    // the second and third step is marked as default (neither done or current)
     expect(navBar.query(By.css('li.default'))).toBeTruthy();
-    expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(3)')));
-    expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
+    expect(navBar.queryAll(By.css('li.default'))[0]).toBe(navBar.query(By.css('li:nth-child(2)')));
+    expect(navBar.queryAll(By.css('li.default'))[1]).toBe(navBar.query(By.css('li:nth-child(3)')));
+    expect(navBar.queryAll(By.css('li.default')).length).toBe(2);
   });
 
   it('should show the second step correctly', () => {
@@ -98,7 +99,7 @@ describe('WizardNavigationBarComponent', () => {
     // no step is marked as optional, because the optional step is the current step
     expect(navBar.query(By.css('li.optional'))).toBeNull();
 
-    // only the third step is marked as default (neither done, current or optional)
+    // only the third step is marked as default (neither done or current)
     expect(navBar.query(By.css('li.default'))).toBeTruthy();
     expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(3)')));
     expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
@@ -120,8 +121,8 @@ describe('WizardNavigationBarComponent', () => {
 
     // the first and second step should be marked as done
     expect(navBar.query(By.css('li.done'))).toBeTruthy();
-    expect(navBar.query(By.css('li.done:first-child'))).toBe(navBar.query(By.css('li:nth-child(1)')));
-    expect(navBar.query(By.css('li.done:nth-child(2)'))).toBe(navBar.query(By.css('li:nth-child(2)')));
+    expect(navBar.queryAll(By.css('li.done'))[0]).toBe(navBar.query(By.css('li:nth-child(1)')));
+    expect(navBar.queryAll(By.css('li.done'))[1]).toBe(navBar.query(By.css('li:nth-child(2)')));
     expect(navBar.queryAll(By.css('li.done')).length).toBe(2);
 
     // no step is marked as editing
@@ -159,8 +160,10 @@ describe('WizardNavigationBarComponent', () => {
     expect(navBar.query(By.css('li.optional'))).toBe(navBar.query(By.css('li:nth-child(2)')));
     expect(navBar.queryAll(By.css('li.optional')).length).toBe(1);
 
-    // no step is marked as default (neither done, current or optional)
-    expect(navBar.query(By.css('li.default'))).toBeNull();
+    // the second step is marked as default (neither done nor current)
+    expect(navBar.query(By.css('li.default'))).toBeTruthy();
+    expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(2)')));
+    expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
   });
 
   it('should show the first step correctly, after going back from the second step to the first step', () => {
@@ -188,10 +191,11 @@ describe('WizardNavigationBarComponent', () => {
     expect(navBar.query(By.css('li.optional'))).toBe(navBar.query(By.css('li:nth-child(2)')));
     expect(navBar.queryAll(By.css('li.optional')).length).toBe(1);
 
-    // no step is marked as default (neither done, current or optional)
+    // the second and third step is marked as default (neither done or current)
     expect(navBar.query(By.css('li.default'))).toBeTruthy();
-    expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(3)')));
-    expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
+    expect(navBar.queryAll(By.css('li.default'))[0]).toBe(navBar.query(By.css('li:nth-child(2)')));
+    expect(navBar.queryAll(By.css('li.default'))[1]).toBe(navBar.query(By.css('li:nth-child(3)')));
+    expect(navBar.queryAll(By.css('li.default')).length).toBe(2);
   });
 
   it('should show the first step correctly, after first jumping from the first to the third step and then back from the third step to the first step', () => {
@@ -219,10 +223,11 @@ describe('WizardNavigationBarComponent', () => {
     expect(navBar.query(By.css('li.optional'))).toBe(navBar.query(By.css('li:nth-child(2)')));
     expect(navBar.queryAll(By.css('li.optional')).length).toBe(1);
 
-    // the third step is marked as default (neither done, current or optional)
+    // the second and third step is marked as default (neither done or current)
     expect(navBar.query(By.css('li.default'))).toBeTruthy();
-    expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(3)')));
-    expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
+    expect(navBar.queryAll(By.css('li.default'))[0]).toBe(navBar.query(By.css('li:nth-child(2)')));
+    expect(navBar.queryAll(By.css('li.default'))[1]).toBe(navBar.query(By.css('li:nth-child(3)')));
+    expect(navBar.queryAll(By.css('li.default')).length).toBe(2);
   });
 
   it('should show the second step correctly, after first jumping from the first to the third step and then back from the third step to the second step', () => {
@@ -250,9 +255,69 @@ describe('WizardNavigationBarComponent', () => {
     // no step is marked as optional, because the optional step is the current step
     expect(navBar.query(By.css('li.optional'))).toBeNull();
 
-    // the third step is marked as default (neither done, current or optional)
+    // the third step is marked as default (neither done or current)
     expect(navBar.query(By.css('li.default'))).toBeTruthy();
     expect(navBar.query(By.css('li.default'))).toBe(navBar.query(By.css('li:nth-child(3)')));
     expect(navBar.queryAll(By.css('li.default')).length).toBe(1);
   });
+
+  it('should move back to the first step from the second step, after clicking on the corresponding link', () => {
+    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+
+    // go to the second step
+    wizardTest.wizard.goToNextStep();
+    expect(wizardTest.wizard.currentStepIndex).toBe(1);
+
+    // go back to the first step
+    goToFirstStepLink.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+  });
+
+  it('should move back to the first step from the third step, after clicking on the corresponding link', () => {
+    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+
+    // go to the second step
+    wizardTest.wizard.goToStep(2);
+    expect(wizardTest.wizard.currentStepIndex).toBe(2);
+
+    // go back to the first step
+    goToFirstStepLink.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+  });
+
+  it('should move back to the second step from the third step, after clicking on the corresponding link', () => {
+    const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2) > a')).nativeElement;
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+
+    // go to the second step
+    wizardTest.wizard.goToStep(2);
+    expect(wizardTest.wizard.currentStepIndex).toBe(2);
+
+    // go back to the first step
+    goToSecondStepLink.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(1);
+  });
+
+  it('should not move to the second step from the first step, after clicking on the corresponding link', () => {
+    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1)'));
+    const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2)'));
+    const goToThirdStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(3)'));
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+    // links contain a class that is not clickable (contains "pointer-events: none;")
+    expect(goToFirstStepLink.classes.hasOwnProperty('current')).toBeTruthy('First step label is clickable');
+    expect(goToSecondStepLink.classes.hasOwnProperty('default')).toBeTruthy('Second step label is clickable');
+    expect(goToThirdStepLink.classes.hasOwnProperty('default')).toBeTruthy('Third step label is clickable');
+  });
 });

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

@@ -14,7 +14,7 @@ export class GoToStepDirective {
   public finalize = new EventEmitter();
 
   @Input('goToStep')
-  public destinationStep: WizardStepComponent | number;
+  public destinationStep: WizardStepComponent | number | string;
 
   constructor(private wizard: WizardComponent) { }