test: Add test for form tab switching and simplify form component code.

frontend/src/app/form/form.component.html

 <ul class="nav nav-tabs">
   <li class="nav-item">
     <a tabindex="0"
-       class="nav-link {{ activeTab == 'Germplasm' ? 'active' : ''}}"
-       (click)="activeTab='Germplasm'">
-      Germplasm
+       class="nav-link germplasm {{ getNavClass(tabs.GERMPLASM) }}"
+       (click)="activeTab=tabs.GERMPLASM">
+      {{ tabs.GERMPLASM }}
     </a>
   </li>
   <li class="nav-item">
     <a tabindex="1"
-       class="nav-link {{ activeTab == 'Variable' ? 'active' : ''}}"
-       (click)="activeTab='Variable'">
-      Trait
+       class="nav-link trait {{ getNavClass(tabs.TRAIT) }}"
+       (click)="activeTab=tabs.TRAIT">
+      {{ tabs.TRAIT }}
     </a>
   </li>
 </ul>
 
 <!-- Germplasm tab -->
-<div class="{{ activeTab == 'Germplasm' ? 'visible' : 'd-none' }}">
+<div class="germplasm {{ getTabClass(tabs.GERMPLASM) }}">
   <!-- Input for the crops field -->
   <div class="form-group row pt-3">
     <label for="crops" class="col-sm-4">
@@ -70,8 +70,8 @@
   </div>
 </div>
 
-<!-- Variable tab -->
-<div class="{{ activeTab == 'Variable' ? 'visible' : 'd-none' }}">
+<!-- Trait tab -->
+<div class="trait {{ getTabClass(tabs.TRAIT) }}">
   <gpds-trait-ontology-widget
     [criteria$]="criteria$"
     (initialized)="traitWidgetInitialized.emit($event)">

frontend/src/app/form/form.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 
 import { FormComponent } from './form.component';
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
-
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
+/**
+ * Mock gpds-suggestion-field
+ */
 @Component({
     selector: 'gpds-suggestion-field',
     template: '<br/>'
 })
-class MockFieldComponent {
+class MockSuggestionFieldComponent {
+    @Input() criteria$: any;
+}
+
+/**
+ * Mock gpds-trait-ontology-widget
+ */
+@Component({
+    selector: 'gpds-trait-ontology-widget',
+    template: '<br/>'
+})
+class MockTraitWidgetComponent {
+    @Input() criteria$: any;
+    @Output() initialized = new EventEmitter();
 }
 
 describe('FormComponent', () => {
-    let component: FormComponent;
-    let fixture: ComponentFixture<FormComponent>;
 
-    beforeEach(() => {
+    beforeEach(async(() =>
         TestBed.configureTestingModule({
-            declarations: [FormComponent, MockFieldComponent],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
+            declarations: [FormComponent, MockSuggestionFieldComponent, MockTraitWidgetComponent],
+        }).compileComponents()
+    ));
 
-        fixture = TestBed.createComponent(FormComponent);
-        component = fixture.componentInstance;
+    it('should switch tabs', async(() => {
+        const fixture = TestBed.createComponent(FormComponent);
         fixture.detectChanges();
-    });
 
-    it('should create', () => {
+        const element: HTMLElement = fixture.nativeElement;
+        const germplasmNav: HTMLElement = element.querySelector('a.germplasm');
+        const germplasmTab: HTMLElement = element.querySelector('div.germplasm');
+        const traitNav: HTMLElement = element.querySelector('a.trait');
+        const traitTab: HTMLElement = element.querySelector('div.trait');
+
+        // Check default tab is active
+        expect(germplasmNav.getAttribute('class')).toContain('active');
+        expect(germplasmTab.getAttribute('class')).toContain('visible');
+        expect(traitNav.getAttribute('class')).not.toContain('active');
+        expect(traitTab.getAttribute('class')).toContain('d-none');
+
+        traitNav.click();
+        fixture.detectChanges();
+
+        // Check tab switched
+        expect(traitNav.getAttribute('class')).toContain('active');
+        expect(traitTab.getAttribute('class')).toContain('visible');
+        expect(germplasmNav.getAttribute('class')).not.toContain('active');
+        expect(germplasmTab.getAttribute('class')).toContain('d-none');
+
+        germplasmNav.click();
         fixture.detectChanges();
-        expect(component).toBeTruthy();
-    });
+
+        // Check tab switched back
+        expect(germplasmNav.getAttribute('class')).toContain('active');
+        expect(germplasmTab.getAttribute('class')).toContain('visible');
+        expect(traitNav.getAttribute('class')).not.toContain('active');
+        expect(traitTab.getAttribute('class')).toContain('d-none');
+    }));
 });

frontend/src/app/form/form.component.ts

@@ -2,6 +2,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DataDiscoveryCriteria } from '../models/data-discovery.model';
 import { BehaviorSubject } from 'rxjs';
 
+enum Tabs {
+    GERMPLASM = 'Germplasm',
+    TRAIT = 'Trait'
+}
+
 @Component({
     selector: 'gpds-form',
     templateUrl: './form.component.html',
@@ -10,5 +15,18 @@ import { BehaviorSubject } from 'rxjs';
 export class FormComponent {
     @Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>;
     @Output() traitWidgetInitialized = new EventEmitter();
-    activeTab = 'Germplasm';
+
+    // Default active tab
+    activeTab: Tabs = Tabs.GERMPLASM;
+
+    // to give access in HTML template
+    tabs = Tabs;
+
+    getNavClass(tab: Tabs) {
+        return this.activeTab === tab ? 'active' : '';
+    }
+
+    getTabClass(tab: Tabs) {
+        return this.activeTab === tab ? 'visible' : 'd-none';
+    }
 }