- improved css for the nav bar

- removed nav-bar classes top and bottom, because they aren't needed anymore
- added badge to README.md to show the dependency licence status
- improved nav bar test

Author: madoar

README.md

@@ -3,6 +3,7 @@
 [![Build Status](https://travis-ci.org/madoar/ng2-wizard.png)](https://travis-ci.org/madoar/ng2-wizard)
 [![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)
 
 This project contains a functional wizard component for [Angular 2](https://angular.io/).
 

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

@@ -5,6 +5,7 @@
 @wz-color-editing:  #FF0000;
 
 .steps-indicator {
+  padding: 10px 0 25px 0;
   list-style: none;
 
   &:before {
@@ -71,8 +72,7 @@
     position: relative;
     float: left;
     margin: 0;
-    padding: 0;
-    padding-top: 10px;
+    padding: 10px 0 0 0;
     text-align: center;
     line-height: 15px;
 

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

@@ -1,35 +1,46 @@
 /* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {DebugElement, QueryList} from '@angular/core';
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {QueryList, ViewChild, Component, ContentChild, OnInit} 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 {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';
+@Component({
+  selector: 'test-wizard',
+  template: `
+    <wizard>
+      <wizard-step title='Steptitle 1'>Step 1</wizard-step>
+      <wizard-step title='Steptitle 2'>Step 2</wizard-step>
+      <wizard-step title='Steptitle 3'>Step 3</wizard-step>
+    </wizard>
+  `
+})
+class WizardTestComponent {
+  @ViewChild(WizardComponent)
+  public wizard: WizardComponent;
+}
 
 describe('WizardNavigationBarComponent', () => {
-  let component: WizardNavigationBarComponent;
-  let fixture: ComponentFixture<WizardNavigationBarComponent>;
+  let wizardTest: WizardTestComponent;
+  let wizardTestFixture: ComponentFixture<WizardTestComponent>;
 
   beforeEach(async(() => {
-    let wizard = new WizardComponent();
-
-    wizard.wizardSteps = new QueryList<WizardStepComponent>();
-
     TestBed.configureTestingModule({
-      declarations: [WizardNavigationBarComponent, WizardComponent, WizardStepComponent, GoToStepDirective],
-      providers: [{ provide: WizardComponent, useValue: wizard }]
+      declarations: [ WizardComponent, WizardStepComponent, WizardNavigationBarComponent, WizardTestComponent, GoToStepDirective ]
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(WizardNavigationBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    wizardTestFixture = TestBed.createComponent(WizardTestComponent);
+    wizardTest = wizardTestFixture.componentInstance;
+    wizardTestFixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(wizardTest).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard-navigation-bar'))).toBeTruthy();
   });
 });

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

@@ -0,0 +1,4 @@
+.step {
+  height: auto;
+  width: 100%;
+}

src/components/components/wizard.component.html

@@ -1,9 +1,9 @@
 <div class="wizard-centered">
-  <wizard-navigation-bar *ngIf="navBarLocation == 'top'" [ngClass]="['nav-bar', 'top']"></wizard-navigation-bar>
+  <wizard-navigation-bar class="nav-bar" *ngIf="navBarLocation == 'top'"></wizard-navigation-bar>
 
   <div class="steps">
     <ng-content></ng-content>
   </div>
 
-  <wizard-navigation-bar *ngIf="navBarLocation == 'bottom'" [ngClass]="['nav-bar', 'bottom']"></wizard-navigation-bar>
+  <wizard-navigation-bar class="nav-bar" *ngIf="navBarLocation == 'bottom'"></wizard-navigation-bar>
 </div>

src/components/components/wizard.component.less

@@ -9,14 +9,5 @@
     margin: 0;
     width: 100%;
     height: auto;
-    overflow: hidden;
-
-    &.top {
-      padding-bottom: 10px;
-    }
-
-    &.bottom {
-      padding-top: 10px;
-    }
   }
 }

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

@@ -59,29 +59,31 @@ describe('WizardComponent', () => {
 
   it('should create', () => {
     expect(wizardTest).toBeTruthy();
+    expect(wizardTest.wizard).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css('wizard'))).toBeTruthy();
   });
 
   it('should contain navigation bar at the correct position', () => {
     // check default: the navbar should be at the top of the wizard if no navBarLocation was set
     expect(wizardTestFixture.debugElement.query(By.css(".nav-bar"))).toBeTruthy();
     expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :first-child")).name).toBe('wizard-navigation-bar');
-    expect(wizardTestFixture.debugElement.query(By.css(".nav-bar.top"))).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :last-child")).name).toBe('div');
 
     wizardTest.wizard.navBarLocation = "bottom";
     wizardTestFixture.detectChanges();
 
     // navBar should be at the bottom of the wizard
     expect(wizardTestFixture.debugElement.query(By.css(".nav-bar"))).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :first-child")).name).toBe('div');
     expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :last-child")).name).toBe('wizard-navigation-bar');
-    expect(wizardTestFixture.debugElement.query(By.css(".nav-bar.bottom"))).toBeTruthy();
 
     wizardTest.wizard.navBarLocation = "top";
     wizardTestFixture.detectChanges();
 
     // navBar should be at the top of the wizard
     expect(wizardTestFixture.debugElement.query(By.css(".nav-bar"))).toBeTruthy();
     expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :first-child")).name).toBe('wizard-navigation-bar');
-    expect(wizardTestFixture.debugElement.query(By.css(".nav-bar.top"))).toBeTruthy();
+    expect(wizardTestFixture.debugElement.query(By.css(".wizard-centered > :last-child")).name).toBe('div');
   });
 
   it('should have steps', () => {