Apply the [stepId] field from the WizardSteps at ids in the navigation bar (#186)

- fix #183
- provide a description for the new usecase of the stepId input

Author: madoar

README.md

@@ -145,6 +145,7 @@ One of these two ways is by using the `<aw-wizard-step>` component.
 #### \[stepId\]
 A wizard step can have its own unique id.
 This id can then be used to navigate to the step.
+In addition the `[stepId]` of a wizard step is used as the `id` of the `li` element for the wizard step in the navigation bar.
 
 #### \[stepTitle\]
 A wizard step needs to contain a title, which is shown in the navigation bar of the wizard.

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

@@ -1,5 +1,5 @@
 <ul class="steps-indicator steps-{{numberOfWizardSteps}}">
-  <li *ngFor="let step of wizardSteps"
+  <li [attr.id]="step.stepId" *ngFor="let step of wizardSteps"
       [ngClass]="{
         default: isDefault(step),
         current: isCurrent(step),

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

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {Component, ViewChild} from '@angular/core';
+import {Component, DebugElement, ViewChild} from '@angular/core';
 import {WizardNavigationBarComponent} from './wizard-navigation-bar.component';
 import {WizardComponent} from './wizard.component';
 import {By} from '@angular/platform-browser';
@@ -11,15 +11,17 @@ import {WizardState} from '../navigation/wizard-state.model';
   selector: 'aw-test-wizard',
   template: `
     <aw-wizard>
-      <aw-wizard-step stepTitle='Steptitle 1'>Step 1</aw-wizard-step>
+      <aw-wizard-step stepTitle='Steptitle 1' [stepId]="firstStepId">Step 1</aw-wizard-step>
       <aw-wizard-step stepTitle='Steptitle 2' awOptionalStep>Step 2</aw-wizard-step>
       <aw-wizard-step stepTitle='Steptitle 3'>Step 3</aw-wizard-step>
     </aw-wizard>
   `
 })
 class WizardTestComponent {
+  public firstStepId = 'step1';
+
   @ViewChild(WizardComponent)
-  wizard: WizardComponent;
+  public wizard: WizardComponent;
 }
 
 describe('WizardNavigationBarComponent', () => {
@@ -459,8 +461,10 @@ describe('WizardNavigationBarComponent', () => {
   it('should use the \"small\" layout when no navigation bar layout is specified', () => {
     const navBar = wizardTestFixture.debugElement.query(By.css('aw-wizard-navigation-bar'));
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': true,
-      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': true,
+      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false
+    });
   });
 
   it('should use the \"small\" layout when it is specified', () => {
@@ -469,8 +473,10 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'small';
     wizardTestFixture.detectChanges();
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': true,
-      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': true,
+      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false
+    });
   });
 
   it('should use the \"large-filled\" layout when it is specified', () => {
@@ -479,8 +485,10 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-filled';
     wizardTestFixture.detectChanges();
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': false,
-      'large-filled': true, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': false,
+      'large-filled': true, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': false
+    });
   });
 
   it('should use the \"large-empty\" layout when it is specified', () => {
@@ -489,8 +497,10 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-empty';
     wizardTestFixture.detectChanges();
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': false,
-      'large-filled': false, 'large-filled-symbols': false, 'large-empty': true, 'large-empty-symbols': false });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': false,
+      'large-filled': false, 'large-filled-symbols': false, 'large-empty': true, 'large-empty-symbols': false
+    });
   });
 
   it('should use the \"large-filled-symbols\" layout when it is specified', () => {
@@ -499,8 +509,10 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-filled-symbols';
     wizardTestFixture.detectChanges();
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': false,
-      'large-filled': false, 'large-filled-symbols': true, 'large-empty': false, 'large-empty-symbols': false });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': false,
+      'large-filled': false, 'large-filled-symbols': true, 'large-empty': false, 'large-empty-symbols': false
+    });
   });
 
   it('should use the \"large-empty-symbols\" layout when it is specified', () => {
@@ -509,8 +521,10 @@ describe('WizardNavigationBarComponent', () => {
     wizardTest.wizard.navBarLayout = 'large-empty-symbols';
     wizardTestFixture.detectChanges();
 
-    expect(navBar.classes).toEqual({ 'horizontal': true, 'vertical': false, 'small': false,
-      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': true });
+    expect(navBar.classes).toEqual({
+      'horizontal': true, 'vertical': false, 'small': false,
+      'large-filled': false, 'large-filled-symbols': false, 'large-empty': false, 'large-empty-symbols': true
+    });
   });
 
   it('should show the correct step titles', () => {
@@ -533,4 +547,25 @@ describe('WizardNavigationBarComponent', () => {
     expect(navigationLinks[1].nativeElement.innerText).toBe('STEPTITLE 2');
     expect(navigationLinks[2].nativeElement.innerText).toBe('STEPTITLE 1');
   });
+
+  it('should have the correct stepId', () => {
+    const navigationLiElements = wizardTestFixture.debugElement.queryAll(By.css('aw-wizard-navigation-bar ul li'));
+
+    expect(navigationLiElements.length).toBe(3);
+    expect(navigationLiElements[0].nativeElement.id).toBe('step1');
+    expect(navigationLiElements[1].nativeElement.id).toBe('');
+    expect(navigationLiElements[2].nativeElement.id).toBe('');
+  });
+
+  it('should change the stepId correctly', () => {
+    wizardTest.firstStepId = null;
+    wizardTestFixture.detectChanges();
+
+    const navigationLiElements = wizardTestFixture.debugElement.queryAll(By.css('aw-wizard-navigation-bar ul li'));
+
+    expect(navigationLiElements.length).toBe(3);
+    expect(navigationLiElements[0].nativeElement.id).toBe('');
+    expect(navigationLiElements[1].nativeElement.id).toBe('');
+    expect(navigationLiElements[2].nativeElement.id).toBe('');
+  });
 });