-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- pushed ng2-archwizard version to 1.5.0 - added index.ts file to the root level of the project - updated README file to illustrate how the module can be imported at the root level - removed postcss-loader dependency - added a WizardStep interface, that needs to be implemented by all wizard steps - added a WizardCompletionStep component, which is a wizard step that can't be left and shows all steps (including optional steps) as completed upon entering - add reset method to the wizard component - added a function enter and exit to the WizardSteps - moved the function canExitStep to WizardComponent - added documentation to the code - added tests for the WizardCompletionStepComponent - added a test for the reset function - replaced the wizard init code with a reset() call - added missing tests for 100% branch converage - updated style-loader to current version - add a description of the wizard-completion-step to the README file
- Loading branch information
Showing
20 changed files
with
675 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/** | ||
* Created by marc on 14.05.17. | ||
*/ | ||
|
||
export * from './dist'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
src/components/components/wizard-completion-step.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
:host { | ||
height: auto; | ||
width: 100%; | ||
} |
1 change: 1 addition & 0 deletions
1
src/components/components/wizard-completion-step.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<ng-content></ng-content> |
136 changes: 136 additions & 0 deletions
136
src/components/components/wizard-completion-step.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
/** | ||
* 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 {By} from '@angular/platform-browser'; | ||
import {OptionalStepDirective} from '../directives/optional-step.directive'; | ||
|
||
@Component({ | ||
selector: 'test-wizard', | ||
template: ` | ||
<wizard> | ||
<wizard-step title='Steptitle 1' (stepEnter)="enterInto($event, 1)" (stepExit)="exitFrom($event, 1)">Step 1</wizard-step> | ||
<wizard-step title='Steptitle 2' [canExit]="isValid" | ||
optionalStep (stepEnter)="enterInto($event, 2)" (stepExit)="exitFrom($event, 2)">Step 2</wizard-step> | ||
<wizard-completion-step title='Completion steptitle 3' (stepEnter)="enterInto($event, 3)">Step 3</wizard-completion-step> | ||
</wizard> | ||
` | ||
}) | ||
class WizardTestComponent { | ||
@ViewChild(WizardComponent) | ||
public wizard: WizardComponent; | ||
|
||
public isValid: any = true; | ||
|
||
public eventLog: Array<string> = new Array<string>(); | ||
|
||
enterInto(direction: MovingDirection, destination: number): void { | ||
this.eventLog.push(`enter ${MovingDirection[direction]} ${destination}`); | ||
} | ||
|
||
exitFrom(direction: MovingDirection, source: number): void { | ||
this.eventLog.push(`exit ${MovingDirection[direction]} ${source}`); | ||
} | ||
} | ||
|
||
describe('WizardCompletionStepComponent', () => { | ||
let wizardTest: WizardTestComponent; | ||
let wizardTestFixture: ComponentFixture<WizardTestComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [WizardComponent, WizardStepComponent, WizardCompletionStepComponent, WizardNavigationBarComponent, | ||
WizardTestComponent, GoToStepDirective, OptionalStepDirective] | ||
}).compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
wizardTestFixture = TestBed.createComponent(WizardTestComponent); | ||
wizardTest = wizardTestFixture.componentInstance; | ||
wizardTestFixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(wizardTest).toBeTruthy(); | ||
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-step')).length).toBe(2); | ||
expect(wizardTestFixture.debugElement.queryAll(By.css('wizard-completion-step')).length).toBe(1); | ||
}); | ||
|
||
it('should have correct step title', () => { | ||
expect(wizardTest).toBeTruthy(); | ||
expect(wizardTest.wizard.getStepAtIndex(0).title).toBe('Steptitle 1'); | ||
expect(wizardTest.wizard.getStepAtIndex(1).title).toBe('Steptitle 2'); | ||
expect(wizardTest.wizard.getStepAtIndex(2).title).toBe('Completion steptitle 3'); | ||
}); | ||
|
||
it('should enter first step after initialisation', () => { | ||
expect(wizardTest.eventLog).toEqual(['enter Forwards 1']); | ||
}); | ||
|
||
it('should enter completion step after first step', () => { | ||
expect(wizardTest.wizard.currentStepIndex).toBe(0); | ||
|
||
wizardTest.wizard.goToNextStep(); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.currentStepIndex).toBe(1); | ||
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 2']); | ||
|
||
wizardTest.wizard.goToNextStep(); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.currentStepIndex).toBe(2); | ||
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 2', | ||
'exit Forwards 2', 'enter Forwards 3']); | ||
}); | ||
|
||
it('should enter completion step after jumping over second optional step', () => { | ||
wizardTest.wizard.goToStep(2); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.eventLog).toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 3']); | ||
}); | ||
|
||
it('should be unable to leave the completion step', () => { | ||
wizardTest.wizard.goToStep(2); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.canGoToStep(0)).toBe(false); | ||
expect(wizardTest.wizard.canGoToStep(1)).toBe(false); | ||
}); | ||
|
||
|
||
it('should not be able to leave the completion step in any direction', () => { | ||
wizardTest.isValid = false; | ||
|
||
wizardTest.wizard.goToStep(2); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.currentStepIndex).toBe(2); | ||
expect(wizardTest.wizard.currentStep.canExit).toBe(false); | ||
}); | ||
|
||
it('should not leave the completion step if it can\'t be exited', () => { | ||
wizardTest.isValid = false; | ||
|
||
wizardTest.wizard.goToStep(2); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.currentStepIndex).toBe(2); | ||
|
||
wizardTest.wizard.goToPreviousStep(); | ||
wizardTestFixture.detectChanges(); | ||
|
||
expect(wizardTest.wizard.currentStepIndex).toBe(2); | ||
expect(wizardTest.eventLog) | ||
.toEqual(['enter Forwards 1', 'exit Forwards 1', 'enter Forwards 3', 'enter Stay 3']); | ||
}); | ||
}); |
75 changes: 75 additions & 0 deletions
75
src/components/components/wizard-completion-step.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
/** | ||
* Created by marc on 20.05.17. | ||
*/ | ||
|
||
import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core'; | ||
import {MovingDirection} from '../util/MovingDirection'; | ||
import {WizardComponent} from './wizard.component'; | ||
import {WizardStep} from '../util/WizardStep'; | ||
|
||
@Component({ | ||
selector: 'wizard-completion-step', | ||
templateUrl: 'wizard-completion-step.component.html', | ||
styleUrls: ['wizard-completion-step.component.css'] | ||
}) | ||
export class WizardCompletionStepComponent implements WizardStep { | ||
/** | ||
* The visible title of this step in the navigation bar of this wizard | ||
*/ | ||
@Input() | ||
public title: string; | ||
|
||
/** | ||
* The symbol which is visible inside the circle belonging to this wizard step in the navigation bar. | ||
* | ||
* @type {string} | ||
*/ | ||
@Input() | ||
public navigationSymbol = ''; | ||
|
||
/** | ||
* The font in which the navigation symbol should be shown. | ||
* If no font is specified the system one should be taken. | ||
*/ | ||
@Input() | ||
public navigationSymbolFontFamily: string; | ||
|
||
/** | ||
* This EventEmitter is called when this step is entered. | ||
* The bound method should do initializing work. | ||
* | ||
* @type {EventEmitter<MovingDirection>} | ||
*/ | ||
@Output() | ||
public stepEnter = new EventEmitter<MovingDirection>(); | ||
|
||
/** | ||
* This EventEmitter is called when this step is exited. | ||
* | ||
* @type {EventEmitter<MovingDirection>} | ||
*/ | ||
public stepExit = new EventEmitter<MovingDirection>(); | ||
|
||
@HostBinding('hidden') | ||
public get hidden(): boolean { | ||
return !this.selected; | ||
} | ||
|
||
public completed: false; | ||
public selected = false; | ||
public optional = false; | ||
|
||
public canExit: ((direction: MovingDirection) => boolean) | boolean = false; | ||
|
||
constructor(private wizard: WizardComponent) { | ||
} | ||
|
||
enter(direction: MovingDirection): void { | ||
this.wizard.completed = true; | ||
this.stepEnter.emit(direction); | ||
} | ||
|
||
exit(direction: MovingDirection): void { | ||
// do nothing | ||
} | ||
} |
14 changes: 7 additions & 7 deletions
14
src/components/components/wizard-navigation-bar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.