added tests for linear workflow components

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

@@ -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>

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

@@ -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();
+    });
+  });
 });

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

@@ -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();
+    }
+  }
 }

static/js/directives/ui/linear-workflow/linear-workflow.component.html

@@ -8,15 +8,15 @@
         <td>
           <!-- Next button -->
           <button class="btn btn-primary"
-                  ng-disabled="!$ctrl.currentSection.valid"
+            ng-disabled="!$ctrl.currentSection.component.sectionValid"
-                  ng-click="$ctrl.onNextSection()"
+            ng-click="$ctrl.onNextSection()"
-                  ng-class="{
+            ng-class="{
-                    'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
+              'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
-                    'btn-lg': $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>

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

@@ -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);
+      });
+    });
   });
 });

static/js/directives/ui/linear-workflow/linear-workflow.component.ts

@@ -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.component.sectionValid && this.currentSection.index + 1 >= this.sections.length) {
-      if (this.currentSection.index + 1 >= this.sections.length) {
+      this.onWorkflowComplete({});
-        this.onWorkflowComplete({});
-      }
-      else {
-        this.currentSection = this.sections[this.currentSection.index];
-      }
     }
+    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;
+      }
+    });
   }
 }
 

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

@@ -4,11 +4,10 @@
     done-title="Create Trigger"
     workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
     <!-- Section: Repository -->
-    <linear-workflow-section
+    <linear-workflow-section class="row"
-      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
+    <linear-workflow-section class="row"
-      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>-->
-