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"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a tabindex="0" <a tabindex="0"
class="nav-link {{ activeTab == 'Germplasm' ? 'active' : ''}}" class="nav-link germplasm {{ getNavClass(tabs.GERMPLASM) }}"
(click)="activeTab='Germplasm'"> (click)="activeTab=tabs.GERMPLASM">
Germplasm {{ tabs.GERMPLASM }}
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a tabindex="1" <a tabindex="1"
class="nav-link {{ activeTab == 'Variable' ? 'active' : ''}}" class="nav-link trait {{ getNavClass(tabs.TRAIT) }}"
(click)="activeTab='Variable'"> (click)="activeTab=tabs.TRAIT">
Trait {{ tabs.TRAIT }}
</a> </a>
</li> </li>
</ul> </ul>
<!-- Germplasm tab --> <!-- Germplasm tab -->
<div class="{{ activeTab == 'Germplasm' ? 'visible' : 'd-none' }}"> <div class="germplasm {{ getTabClass(tabs.GERMPLASM) }}">
<!-- Input for the crops field --> <!-- Input for the crops field -->
<div class="form-group row pt-3"> <div class="form-group row pt-3">
<label for="crops" class="col-sm-4"> <label for="crops" class="col-sm-4">
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
</div> </div>
</div> </div>
<!-- Variable tab --> <!-- Trait tab -->
<div class="{{ activeTab == 'Variable' ? 'visible' : 'd-none' }}"> <div class="trait {{ getTabClass(tabs.TRAIT) }}">
<gpds-trait-ontology-widget <gpds-trait-ontology-widget
[criteria$]="criteria$" [criteria$]="criteria$"
(initialized)="traitWidgetInitialized.emit($event)"> (initialized)="traitWidgetInitialized.emit($event)">
......
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { async, TestBed } from '@angular/core/testing';
import { FormComponent } from './form.component'; 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({ @Component({
selector: 'gpds-suggestion-field', selector: 'gpds-suggestion-field',
template: '<br/>' 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', () => { describe('FormComponent', () => {
let component: FormComponent;
let fixture: ComponentFixture<FormComponent>;
beforeEach(() => { beforeEach(async(() =>
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [FormComponent, MockFieldComponent], declarations: [FormComponent, MockSuggestionFieldComponent, MockTraitWidgetComponent],
schemas: [NO_ERRORS_SCHEMA] }).compileComponents()
}).compileComponents(); ));
fixture = TestBed.createComponent(FormComponent); it('should switch tabs', async(() => {
component = fixture.componentInstance; const fixture = TestBed.createComponent(FormComponent);
fixture.detectChanges(); 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(); 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'; ...@@ -2,6 +2,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DataDiscoveryCriteria } from '../models/data-discovery.model'; import { DataDiscoveryCriteria } from '../models/data-discovery.model';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
enum Tabs {
GERMPLASM = 'Germplasm',
TRAIT = 'Trait'
}
@Component({ @Component({
selector: 'gpds-form', selector: 'gpds-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
...@@ -10,5 +15,18 @@ import { BehaviorSubject } from 'rxjs'; ...@@ -10,5 +15,18 @@ import { BehaviorSubject } from 'rxjs';
export class FormComponent { export class FormComponent {
@Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>; @Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>;
@Output() traitWidgetInitialized = new EventEmitter(); @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';
}
} }
Supports Markdown
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