- added string parameter support for the canGoToStep and goToStep methods to support string inputs through input field of directives

- added tests for the goToStep directive

Author: madoar

src/components/components/wizard.component.ts

@@ -2,6 +2,7 @@ import {Component, ContentChildren, QueryList, AfterContentInit, Input} from '@a
 import {WizardStepComponent} from './wizard-step.component';
 import {isNumber} from 'util';
 import {MovingDirection} from '../util/MovingDirection';
+import {isString} from "util";
 
 @Component({
   selector: 'wizard',
@@ -112,13 +113,15 @@ export class WizardComponent implements AfterContentInit {
     return this.hasStep(nextStepIndex) && this.canGoToStep(nextStepIndex);
   }
 
-  canGoToStep(inputStep: WizardStepComponent | number): boolean {
+  canGoToStep(inputStep: WizardStepComponent | number | string): boolean {
     let nextStepIndex: number;
 
     if (inputStep instanceof WizardStepComponent) {
       nextStepIndex = this.getIndexOfStep(inputStep);
     } else if (isNumber(inputStep)) {
       nextStepIndex = inputStep as number;
+    } else if (isString(inputStep)) {
+      nextStepIndex = parseInt(inputStep as string);
     }
 
     let result: boolean = this.hasStep(nextStepIndex);
@@ -133,7 +136,7 @@ export class WizardComponent implements AfterContentInit {
     return result;
   }
 
-  goToStep(inputStep: WizardStepComponent | number) {
+  goToStep(inputStep: WizardStepComponent | number | string): void {
     let nextStepIndex: number;
     let nextStep: WizardStepComponent;
 
@@ -142,7 +145,10 @@ export class WizardComponent implements AfterContentInit {
       nextStep = inputStep;
     } else if (isNumber(inputStep)) {
       nextStepIndex = inputStep as number;
-      nextStep = this.getStepAtIndex(inputStep);
+      nextStep = this.getStepAtIndex(nextStepIndex);
+    } else if (isString(inputStep)) {
+      nextStepIndex = parseInt(inputStep as string);
+      nextStep = this.getStepAtIndex(nextStepIndex);
     }
 
     // In which direction is a step transition done?

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

@@ -2,10 +2,102 @@
  * 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";
+
+@Component({
+  selector: 'test-wizard',
+  template: `
+    <wizard>
+      <wizard-step title='Steptitle 1'>
+        Step 1
+        <button type="button" goToStep="1" (finalize)="finalizeStep(1)">Go to second step</button>
+      </wizard-step>
+      <wizard-step title='Steptitle 2'>
+        Step 2
+        <button type="button" goToStep="0" (finalize)="finalizeStep(2)">Go to first step</button>
+      </wizard-step>     
+    </wizard>
+  `
+})
+class WizardTestComponent {
+  @ViewChild(WizardComponent)
+  public wizard: WizardComponent;
+
+  public eventLog: Array<string> = new Array<string>();
+
+  finalizeStep(stepIndex: number): void {
+    this.eventLog.push(`finalize ${stepIndex}`);
+  }
+}
 
 describe('GoToStepDirective', () => {
+  let wizardTest: WizardTestComponent;
+  let wizardTestFixture: ComponentFixture<WizardTestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    wizardTestFixture = TestBed.createComponent(WizardTestComponent);
+    wizardTest = wizardTestFixture.componentInstance;
+    wizardTestFixture.detectChanges();
+  });
+
   it('should create an instance', () => {
-    let directive = new GoToStepDirective(null);
-    expect(directive).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]'))).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]'))).toBeTruthy();
+    expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step > button[goToStep]')).length).toBe(2);
+  });
+
+  it('should move to step correctly', () => {
+    const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]')).nativeElement;
+    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 > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step:first-child')));
+
+    // click button
+    firstStepGoToButton.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(1);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step :nth-child(2)')));
+
+    // click button
+    secondStepGoToButton.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+    expect(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step .current'))).toBe(wizardTestFixture.debugElement.query(By.css('wizard > wizard-step:first-child')));
+  });
+
+  it('should finalize step correctly', () => {
+    const firstStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 1"] > button[goToStep]')).nativeElement;
+    const secondStepGoToButton = wizardTestFixture.debugElement.query(By.css('wizard-step[title="Steptitle 2"] > button[goToStep]')).nativeElement;
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+    expect(wizardTest.eventLog).toEqual([]);
+
+    // click button
+    firstStepGoToButton.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(1);
+    expect(wizardTest.eventLog).toEqual(['finalize 1']);
+
+    // click button
+    secondStepGoToButton.click();
+    wizardTestFixture.detectChanges();
+
+    expect(wizardTest.wizard.currentStepIndex).toBe(0);
+    expect(wizardTest.eventLog).toEqual(['finalize 1', 'finalize 2']);
   });
 });