Commit 80b38d78 authored by Guillaume Cornut's avatar Guillaume Cornut
Browse files

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

parent 2726921c
<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)">
......
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');
}));
});
......@@ -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';
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment