Fix issue 10 (#11)

- changed the interface WizardStep to an abstract class
- changed some WizardStepComponent objects to WizardStep objects
- fixed #10
- renamed file MovingDirection.ts to moving-direction.enum.ts
- renamed StepOffset.ts to step-offset.interface.ts
- renamed WizardStep.ts to wizard-step.interface.ts
- fixed problem in the WizardComponent test
- cleanup the TestBed configurations
- remove property allSteps from WizardComponent
- excluding the forRoot method in WizardModule from the coverage
- excluding the constructor method of the abstract WizardStep class from the coverage

Author: madoar

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

@@ -1,17 +1,13 @@
 /**
  * Created by marc on 20.05.17.
  */
-/* tslint:disable:no-unused-variable */
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {WizardStepComponent} from './wizard-step.component';
 import {WizardCompletionStepComponent} from './wizard-completion-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 {MovingDirection} from '../util/moving-direction.enum';
 import {By} from '@angular/platform-browser';
-import {OptionalStepDirective} from '../directives/optional-step.directive';
+import {WizardModule} from '../wizard.module';
 
 @Component({
   selector: 'test-wizard',
@@ -47,8 +43,8 @@ describe('WizardCompletionStepComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [WizardComponent, WizardStepComponent, WizardCompletionStepComponent, WizardNavigationBarComponent,
-        WizardTestComponent, GoToStepDirective, OptionalStepDirective]
+      declarations: [WizardTestComponent],
+      imports: [WizardModule]
     }).compileComponents();
   }));
 

src/components/components/wizard-completion-step.component.ts

@@ -2,10 +2,10 @@
  * Created by marc on 20.05.17.
  */
 
-import {Component, ContentChild, EventEmitter, HostBinding, Input, Output} from '@angular/core';
-import {MovingDirection} from '../util/MovingDirection';
+import {Component, ContentChild, EventEmitter, forwardRef, HostBinding, Inject, Input, Output} from '@angular/core';
+import {MovingDirection} from '../util/moving-direction.enum';
 import {WizardComponent} from './wizard.component';
-import {WizardStep} from '../util/WizardStep';
+import {WizardStep} from '../util/wizard-step.interface';
 import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
 
 /**
@@ -47,9 +47,12 @@ import {WizardStepTitleDirective} from '../directives/wizard-step-title.directiv
 @Component({
   selector: 'wizard-completion-step',
   templateUrl: 'wizard-completion-step.component.html',
-  styleUrls: ['wizard-completion-step.component.css']
+  styleUrls: ['wizard-completion-step.component.css'],
+  providers: [
+    { provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepComponent) }
+  ]
 })
-export class WizardCompletionStepComponent implements WizardStep {
+export class WizardCompletionStepComponent extends WizardStep {
   /**
    * @inheritDoc
    */
@@ -126,7 +129,9 @@ export class WizardCompletionStepComponent implements WizardStep {
    * Constructor
    * @param wizard The [[WizardComponent]], this completion step is contained inside
    */
-  constructor(private wizard: WizardComponent) { }
+  constructor(@Inject(forwardRef(() => WizardComponent)) private wizard: WizardComponent) {
+    super();
+  }
 
   /**
    * @inheritDoc

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

@@ -1,12 +1,9 @@
-/* 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 {WizardModule} from '../wizard.module';
 
 @Component({
   selector: 'test-wizard',
@@ -29,8 +26,8 @@ describe('WizardNavigationBarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WizardComponent, WizardStepComponent, WizardNavigationBarComponent,
-        WizardTestComponent, GoToStepDirective, OptionalStepDirective ]
+      declarations: [WizardTestComponent],
+      imports: [WizardModule]
     }).compileComponents();
   }));
 

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

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {WizardComponent} from './wizard.component';
-import {WizardStep} from '../util/WizardStep';
+import {WizardStep} from '../util/wizard-step.interface';
 
 /**
  * The `wizard-navigation-bar` component contains the navigation bar inside a [[WizardComponent]].
@@ -34,7 +34,7 @@ export class WizardNavigationBarComponent {
    * @returns {Array<WizardStep>} An array containing all [[WizardStep]]s
    */
   get wizardSteps(): Array<WizardStep> {
-    return this.wizard.allSteps;
+    return this.wizard.wizardSteps.toArray();
   }
 
   /**
@@ -43,6 +43,6 @@ export class WizardNavigationBarComponent {
    * @returns {number} The number of wizard steps to be displayed
    */
   get numberOfWizardSteps(): number {
-    return this.wizard.allSteps.length;
+    return this.wizard.wizardSteps.length;
   }
 }

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

@@ -1,13 +1,10 @@
-/* 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 {MovingDirection} from '../util/moving-direction.enum';
 import {By} from '@angular/platform-browser';
-import {OptionalStepDirective} from '../directives/optional-step.directive';
+import {WizardModule} from '../wizard.module';
 
 @Component({
   selector: 'test-wizard',
@@ -43,8 +40,8 @@ describe('WizardStepComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [WizardComponent, WizardStepComponent, WizardNavigationBarComponent,
-        WizardTestComponent, GoToStepDirective, OptionalStepDirective]
+      declarations: [WizardTestComponent],
+      imports: [WizardModule]
     }).compileComponents();
   }));
 

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

@@ -1,6 +1,6 @@
-import {Component, ContentChild, EventEmitter, HostBinding, Input, Output} from '@angular/core';
-import {MovingDirection} from '../util/MovingDirection';
-import {WizardStep} from '../util/WizardStep';
+import {Component, ContentChild, EventEmitter, forwardRef, HostBinding, Input, Output} from '@angular/core';
+import {MovingDirection} from '../util/moving-direction.enum';
+import {WizardStep} from '../util/wizard-step.interface';
 import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
 
 /**
@@ -54,9 +54,12 @@ import {WizardStepTitleDirective} from '../directives/wizard-step-title.directiv
 @Component({
   selector: 'wizard-step',
   templateUrl: 'wizard-step.component.html',
-  styleUrls: ['wizard-step.component.css']
+  styleUrls: ['wizard-step.component.css'],
+  providers: [
+    { provide: WizardStep, useExisting: forwardRef(() => WizardStepComponent) }
+  ]
 })
-export class WizardStepComponent implements WizardStep {
+export class WizardStepComponent extends WizardStep {
   /**
    * @inheritDoc
    */
@@ -135,6 +138,7 @@ export class WizardStepComponent implements WizardStep {
    * Constructor
    */
   constructor() {
+    super();
   }
 
   /**

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

@@ -1,11 +1,9 @@
-/* tslint:disable:no-unused-variable */
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {QueryList, Component, ViewChild} from '@angular/core';
 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 {WizardStep} from '../util/wizard-step.interface';
+import {WizardModule} from '../wizard.module';
 
 @Component({
   selector: 'test-wizard',
@@ -22,7 +20,7 @@ class WizardTestComponent {
   public wizard: WizardComponent;
 }
 
-function checkWizardSteps(steps: QueryList<WizardStepComponent>, selectedStepIndex: number) {
+function checkWizardSteps(steps: QueryList<WizardStep>, selectedStepIndex: number) {
   steps.forEach((step, index, array) => {
     // Only the selected step should be selected
     if (index === selectedStepIndex) {
@@ -48,8 +46,8 @@ describe('WizardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WizardComponent, WizardStepComponent, WizardNavigationBarComponent,
-        WizardTestComponent, GoToStepDirective ]
+      declarations: [WizardTestComponent],
+      imports: [WizardModule]
     }).compileComponents();
   }));
 

src/components/components/wizard.component.ts

@@ -1,11 +1,6 @@
-import {
-  AfterContentInit, Component, ContentChild, ContentChildren, forwardRef, HostBinding, Input,
-  QueryList
-} from '@angular/core';
-import {WizardStepComponent} from './wizard-step.component';
-import {MovingDirection} from '../util/MovingDirection';
-import {WizardCompletionStepComponent} from './wizard-completion-step.component';
-import {WizardStep} from '../util/WizardStep';
+import {AfterContentInit, Component, ContentChildren, HostBinding, Input, QueryList} from '@angular/core';
+import {MovingDirection} from '../util/moving-direction.enum';
+import {WizardStep} from '../util/wizard-step.interface';
 import {isBoolean} from 'util';
 
 /**
@@ -52,32 +47,8 @@ export class WizardComponent implements AfterContentInit {
   /**
    * A QueryList containing all WizardSteps in this Wizard
    */
-  @ContentChildren(WizardStepComponent)
-  public wizardSteps: QueryList<WizardStepComponent>;
-
-  /**
-   * An optional step, which is always the last step in the wizard and should be entered
-   * when the wizard has been successfully completed
-   */
-  @ContentChild(forwardRef(() => WizardCompletionStepComponent))
-  public completionStep: WizardCompletionStepComponent;
-
-  /**
-   * Returns a list containing all steps inside this [[WizardComponent]].
-   * This list contains both the normal [[WizardStepComponent]] inside `wizardSteps` and the optional [[WizardCompletionStepComponent]]
-   * inside `completionStep`
-   *
-   * @returns {Array<WizardStep>} A list containing all steps inside this wizard
-   */
-  public get allSteps(): Array<WizardStep> {
-    const steps: Array<WizardStep> = this.wizardSteps.toArray();
-
-    if (this.completionStep) {
-      steps.push(this.completionStep);
-    }
-
-    return steps;
-  }
+  @ContentChildren(WizardStep)
+  public wizardSteps: QueryList<WizardStep>;
 
   /**
    * The location of the navigation bar inside the wizard.
@@ -160,7 +131,7 @@ export class WizardComponent implements AfterContentInit {
    * @returns {boolean} True if the given `stepIndex` is contained inside this wizard, false otherwise
    */
   hasStep(stepIndex: number): boolean {
-    return this.allSteps.length > 0 && 0 <= stepIndex && stepIndex < this.allSteps.length;
+    return this.wizardSteps.length > 0 && 0 <= stepIndex && stepIndex < this.wizardSteps.length;
   }
 
   /**
@@ -187,7 +158,7 @@ export class WizardComponent implements AfterContentInit {
    * @returns {boolean} True if the wizard is currently inside its last step
    */
   isLastStep(): boolean {
-    return this.allSteps.length > 0 && this.currentStepIndex === this.allSteps.length - 1;
+    return this.wizardSteps.length > 0 && this.currentStepIndex === this.wizardSteps.length - 1;
   }
 
   /**
@@ -203,7 +174,7 @@ export class WizardComponent implements AfterContentInit {
       throw new Error(`Expected a known step, but got stepIndex: ${stepIndex}.`);
     }
 
-    return this.allSteps.find((item, index, array) => index === stepIndex);
+    return this.wizardSteps.find((item, index, array) => index === stepIndex);
   }
 
   /**
@@ -216,7 +187,7 @@ export class WizardComponent implements AfterContentInit {
   getIndexOfStep(step: WizardStep): number {
     let stepIndex: number = -1;
 
-    this.allSteps.forEach((item, index, array) => {
+    this.wizardSteps.forEach((item, index, array) => {
       if (item === step) {
         stepIndex = index;
       }
@@ -295,7 +266,7 @@ export class WizardComponent implements AfterContentInit {
     let result: boolean =
       this.canExitStep(this.currentStep, this.getMovingDirection(stepIndex)) && this.hasStep(stepIndex);
 
-    this.allSteps.forEach((wizardStep, index, array) => {
+    this.wizardSteps.forEach((wizardStep, index, array) => {
       if (index < stepIndex && index !== this.currentStepIndex) {
         // all steps before the next step, that aren't the current step, must be completed or optional
         result = result && (wizardStep.completed || wizardStep.optional);
@@ -319,7 +290,7 @@ export class WizardComponent implements AfterContentInit {
 
     if (this.canExitStep(this.currentStep, movingDirection)) {
       // is it possible to leave the current step in the given direction?
-      this.allSteps.forEach((wizardStep, index, array) => {
+      this.wizardSteps.forEach((wizardStep, index, array) => {
         if (index === this.currentStepIndex) {
           // finish processing old step
           wizardStep.completed = true;
@@ -354,7 +325,7 @@ export class WizardComponent implements AfterContentInit {
    */
   reset(): void {
     // reset the step internal state
-    this.allSteps.forEach((step, index) => {
+    this.wizardSteps.forEach((step, index) => {
       step.completed = false;
       step.selected = false;
     });