vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

added tests for linear workflow components

Browse source
This commit is contained in:
alecmerdler 2017-02-22 15:44:20 -08:00 committed by Joseph Schorr
parent b0cc8d0f19
commit ff07533d80
8 changed files with 198 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/js/directives/ui/linear-workflow/linear-workflow-section.component.html
View file

@ -1,7 +1,7 @@
<div class="linear-workflow-section-element"
ng-show="$ctrl.sectionVisible"
ng-if="$ctrl.sectionVisible"
ng-class="$ctrl.isCurrentSection ? 'current-section' : ''">
<form ng-submit="$ctrl.submitSection()">
<form ng-submit="$ctrl.onSubmitSection()">
<div ng-transclude />
</form>
</div>

57
static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
View file

@ -22,4 +22,61 @@ describe("LinearWorkflowSectionComponent", () => {
expect(addSectionSpy.calls.argsFor(0)[0]).toBe(component);
});
});
describe("$onChanges", () => {
var onSectionInvalidSpy: Spy;
var changesObj: ng.IOnChangesObject;
beforeEach(() => {
onSectionInvalidSpy = spyOn(parentMock, "onSectionInvalid").and.returnValue(null);
changesObj = {
sectionValid: {
currentValue: true,
previousValue: false,
isFirstChange: () => false,
},
};
});
it("does nothing if 'sectionValid' input not changed", () => {
component.$onChanges({});
expect(onSectionInvalidSpy).not.toHaveBeenCalled();
});
it("does nothing if 'sectionValid' input is true", () => {
component.$onChanges(changesObj);
expect(onSectionInvalidSpy).not.toHaveBeenCalled();
});
it("calls parent method to inform that section is invalid if 'sectionValid' input changed to false", () => {
changesObj['sectionValid'].currentValue = false;
component.$onChanges(changesObj);
expect(onSectionInvalidSpy.calls.argsFor(0)[0]).toEqual(component.sectionId);
});
});
describe("onSubmitSection", () => {
var onNextSectionSpy: Spy;
beforeEach(() => {
onNextSectionSpy = spyOn(parentMock, "onNextSection").and.returnValue(null);
});
it("does nothing if section is invalid", () => {
component.sectionValid = false;
component.onSubmitSection();
expect(onNextSectionSpy).not.toHaveBeenCalled();
});
it("calls parent method to go to next section if section is valid", () => {
component.sectionValid = true;
component.onSubmitSection();
expect(onNextSectionSpy).toHaveBeenCalled();
});
});
});

18
static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
View file

@ -10,7 +10,7 @@ import { LinearWorkflowComponent } from './linear-workflow.component';
templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html',
transclude: true,
require: {
parent: '^linearWorkflow'
parent: '^^linearWorkflow'
}
})
export class LinearWorkflowSectionComponent implements ng.IComponentController {
@ -22,11 +22,19 @@ export class LinearWorkflowSectionComponent implements ng.IComponentController {
public isCurrentSection: boolean = false;
public parent: LinearWorkflowComponent;
constructor() {
}
public $onInit(): void {
this.parent.addSection(this);
}
public $onChanges(changes: ng.IOnChangesObject): void {
if (changes['sectionValid'] !== undefined && !changes['sectionValid'].currentValue) {
this.parent.onSectionInvalid(this.sectionId);
}
}
public onSubmitSection(): void {
if (this.sectionValid) {
this.parent.onNextSection();
}
}
}

14
static/js/directives/ui/linear-workflow/linear-workflow.component.html
View file

@ -8,15 +8,15 @@
<td>
<!-- Next button -->
<button class="btn btn-primary"
ng-disabled="!$ctrl.currentSection.valid"
ng-click="$ctrl.onNextSection()"
ng-class="{
'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
}">
ng-disabled="!$ctrl.currentSection.component.sectionValid"
ng-click="$ctrl.onNextSection()"
ng-class="{
'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
}">
<span ng-if="$ctrl.currentSection.index != sections.length - 1">Continue</span>
<span ng-if="$ctrl.currentSection.index == sections.length - 1">
<i class="fa fa-check-circle"></i>{{ $ctrl.doneTitle }}
<i class="fa fa-check-circle"></i>{{ ::$ctrl.doneTitle }}
</span>
</button>
</td>

94
static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
View file

@ -1,5 +1,6 @@
import { LinearWorkflowComponent, SectionInfo } from './linear-workflow.component';
import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
import Spy = jasmine.Spy;
describe("LinearWorkflowComponent", () => {
@ -10,10 +11,103 @@ describe("LinearWorkflowComponent", () => {
});
describe("addSection", () => {
var newSection: LinearWorkflowSectionComponent;
beforeEach(() => {
newSection = new LinearWorkflowSectionComponent;
});
it("does not set 'sectionVisible' or 'isCurrentSection' of given section if not the first section added", () => {
component.addSection(new LinearWorkflowSectionComponent);
component.addSection(newSection);
expect(newSection.sectionVisible).toBe(false);
expect(newSection.isCurrentSection).toBe(false);
});
it("sets 'sectionVisible' of given section to true if it is the first section added", () => {
component.addSection(newSection);
expect(newSection.sectionVisible).toBe(true);
});
it("sets 'isCurrentSection' of given section to true if it is the first section added", () => {
component.addSection(newSection);
expect(newSection.isCurrentSection).toBe(true);
});
});
describe("onNextSection", () => {
var currentSection: LinearWorkflowSectionComponent;
beforeEach(() => {
component.onWorkflowComplete = jasmine.createSpy("onWorkflowComplete").and.returnValue(null);
currentSection = new LinearWorkflowSectionComponent;
currentSection.sectionValid = true;
component.addSection(currentSection);
});
it("does not complete workflow or change current section if current section is invalid", () => {
currentSection.sectionValid = false;
component.onNextSection();
expect(component.onWorkflowComplete).not.toHaveBeenCalled();
expect(currentSection.isCurrentSection).toBe(true);
});
it("calls workflow completed output callback if current section is the last section and is valid", () => {
component.onNextSection();
expect(component.onWorkflowComplete).toHaveBeenCalled();
});
it("sets the current section to the next section if there are remaining sections and current section valid", () => {
var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent();
component.addSection(nextSection);
component.onNextSection();
expect(currentSection.isCurrentSection).toBe(false);
expect(nextSection.isCurrentSection).toBe(true);
expect(nextSection.sectionVisible).toBe(true);
});
});
describe("onSectionInvalid", () => {
var invalidSection: LinearWorkflowSectionComponent;
var sections: LinearWorkflowSectionComponent[];
beforeEach(() => {
invalidSection = new LinearWorkflowSectionComponent();
invalidSection.sectionId = "Git Repository";
invalidSection.sectionValid = false;
component.addSection(invalidSection);
sections = [
new LinearWorkflowSectionComponent(),
new LinearWorkflowSectionComponent(),
new LinearWorkflowSectionComponent(),
];
sections.forEach((section) => {
section.sectionVisible = true;
section.isCurrentSection = true;
component.addSection(section);
});
});
it("sets the section with the given id to be the current section", () => {
component.onSectionInvalid(invalidSection.sectionId);
expect(invalidSection.isCurrentSection).toBe(true);
});
it("hides all sections after the section with the given id", () => {
component.onSectionInvalid(invalidSection.sectionId);
sections.forEach((section) => {
expect(section.sectionVisible).toBe(false);
expect(section.isCurrentSection).toBe(false);
});
});
});
});

39
static/js/directives/ui/linear-workflow/linear-workflow.component.ts
View file

@ -18,15 +18,6 @@ export class LinearWorkflowComponent implements ng.IComponentController {
private sections: SectionInfo[] = [];
private currentSection: SectionInfo;
constructor() {
}
public $onInit(): void {
}
public addSection(component: LinearWorkflowSectionComponent): void {
this.sections.push({
index: this.sections.length,
@ -34,20 +25,34 @@ export class LinearWorkflowComponent implements ng.IComponentController {
});
if (this.sections.length == 1) {
this.sections[0].component.sectionVisible = true;
this.currentSection = this.sections[0];
this.currentSection.component.sectionVisible = true;
this.currentSection.component.isCurrentSection = true;
}
}
public onNextSection(): void {
if (this.currentSection.component.sectionValid) {
if (this.currentSection.index + 1 >= this.sections.length) {
this.onWorkflowComplete({});
}
else {
this.currentSection = this.sections[this.currentSection.index];
}
if (this.currentSection.component.sectionValid && this.currentSection.index + 1 >= this.sections.length) {
this.onWorkflowComplete({});
}
else if (this.currentSection.component.sectionValid && this.currentSection.index + 1 < this.sections.length) {
this.currentSection.component.isCurrentSection = false;
this.currentSection = this.sections[this.currentSection.index + 1];
this.currentSection.component.sectionVisible = true;
this.currentSection.component.isCurrentSection = true;
}
}
public onSectionInvalid(sectionId: string): void {
var invalidSection = this.sections.filter(section => section.component.sectionId == sectionId)[0];
invalidSection.component.isCurrentSection = true;
this.currentSection = invalidSection;
this.sections.forEach((section) => {
if (section.index > invalidSection.index) {
section.component.sectionVisible = false;
section.component.isCurrentSection = false;
}
});
}
}

58
static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
View file

@ -4,11 +4,10 @@
done-title="Create Trigger"
workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
<!-- Section: Repository -->
<linear-workflow-section
class="row"
<linear-workflow-section class="row"
section-id="repo"
section-title="Git Repository"
section-valid="$ctrl.config.build_source">
section-valid="$ctrl.config.build_source !== undefined">
<div class="col-lg-7 col-md-7 col-sm-12 main-col">
<h3>Enter repository</h3>
@ -25,8 +24,7 @@
</linear-workflow-section><!-- /Section: Repository -->
<!-- Section: Build context -->
<linear-workflow-section
class="row"
<linear-workflow-section class="row"
section-id="dockerfile"
section-title="Build context"
section-valid="$ctrl.config.subdir">
@ -45,53 +43,3 @@
</linear-workflow-section><!-- /Section: Build context -->
</linear-workflow>
</div>
<!-- FIXME: Remove -->
<!--<div class="manage-trigger-custom-git-element manage-trigger-control">-->
<!--<div class="linear-workflow"-->
<!--workflow-state="$ctrl.currentState"-->
<!--done-title="Create Trigger"-->
<!--workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">-->
<!--&lt;!&ndash; Section: Repository &ndash;&gt;-->
<!--<div class="linear-workflow-section row"-->
<!--section-id="repo"-->
<!--section-title="Git Repository"-->
<!--section-valid="$ctrl.config.build_source">-->
<!--<div class="col-lg-7 col-md-7 col-sm-12 main-col">-->
<!--<h3>Enter repository</h3>-->
<!--<strong>Please enter the HTTP or SSH style URL used to clone your git repository:</strong>-->
<!--<input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"-->
<!--ng-model="$ctrl.config.build_source"-->
<!--ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">-->
<!--</div>-->
<!--<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">-->
<!--<p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>-->
<!--<p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>-->
<!--</div>-->
<!--</div>&lt;!&ndash; /Section: Repository &ndash;&gt;-->
<!--&lt;!&ndash; Section: Build context &ndash;&gt;-->
<!--<div class="linear-workflow-section row"-->
<!--section-id="dockerfile"-->
<!--section-title="Build context"-->
<!--section-valid="$ctrl.config.subdir">-->
<!--<div class="col-lg-7 col-md-7 col-sm-12 main-col">-->
<!--<h3>Select build context directory</h3>-->
<!--<strong>Please select the build context directory under the git repository:</strong>-->
<!--<input class="form-control" type="text" placeholder="/"-->
<!--ng-model="$ctrl.config.subdir"-->
<!--ng-pattern="/^($|\/|\/.+)/">-->
<!--</div>-->
<!--<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">-->
<!--<p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>-->
<!--<p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>-->
<!--</div>-->
<!--</div>&lt;!&ndash; /Section: Build context &ndash;&gt;-->
<!--</div>-->
<!--</div>-->

BIN
test/data/test.db
View file

Binary file not shown.