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

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