diff --git a/client/src/app/instance/search/components/progress-bar.component.spec.ts b/client/src/app/instance/search/components/progress-bar.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..3fe9d464e317a407963696d40f8d9a7ac9286e3b --- /dev/null +++ b/client/src/app/instance/search/components/progress-bar.component.spec.ts @@ -0,0 +1,122 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProgressBarComponent } from './progress-bar.component'; +import { RouterTestingModule } from '@angular/router/testing'; + +describe('[Instance][Search][Component] ProgressBarComponent', () => { + let component: ProgressBarComponent; + let fixture: ComponentFixture<ProgressBarComponent>; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ProgressBarComponent], + imports: [ + RouterTestingModule, + // AccordionModule.forRoot(), + // TooltipModule.forRoot(), + // BrowserAnimationsModule + ] + }); + fixture = TestBed.createComponent(ProgressBarComponent); + component = fixture.componentInstance; + }); + + it('should create the component', () => { + expect(component).toBeTruthy(); + }); + + it('#getStepClass() should return correct step class', () => { + let style = component.getStepClass(); + expect(style).toBe('datasetStep'); + component.currentStep = 'dataset'; + style = component.getStepClass(); + expect(style).toBe('datasetStep'); + component.currentStep = 'criteria'; + style = component.getStepClass(); + expect(style).toBe('criteriaStep'); + component.currentStep = 'output'; + style = component.getStepClass(); + expect(style).toBe('outputStep'); + component.currentStep = 'result'; + style = component.getStepClass(); + expect(style).toBe('resultStep'); + }); + + it('#getNavItemAStyle() should return link color theme', () => { + component.instance = { + name: 'myInstance', + label: 'My Instance', + data_path: 'data/path', + config: { + design: { + design_color: 'green', + design_background_color: 'darker green', + design_logo: 'path/to/logo', + design_favicon: 'path/to/favicon' + }, + home: { + home_component: 'HomeComponent', + home_config: { + home_component_text: 'Description', + home_component_logo: 'path/to/logo' + } + }, + search: { + search_by_criteria_allowed: true, + search_by_criteria_label: 'Search', + search_multiple_allowed: true, + search_multiple_label: 'Search multiple', + search_multiple_all_datasets_selected: false + }, + documentation: { + documentation_allowed: true, + documentation_label: 'Documentation' + } + }, + nb_dataset_families: 1, + nb_datasets: 2 + }; + component.currentStep = 'a'; + expect(component.getNavItemAStyle('b', false)).toBeNull(); + expect(component.getNavItemAStyle('b', true)).toEqual({ color: 'green' }); + }); + + it('#getNavItemIconCircleStyle() should return circle color theme', () => { + component.instance = { + name: 'myInstance', + label: 'My Instance', + data_path: 'data/path', + config: { + design: { + design_color: 'green', + design_background_color: 'darker green', + design_logo: 'path/to/logo', + design_favicon: 'path/to/favicon' + }, + home: { + home_component: 'HomeComponent', + home_config: { + home_component_text: 'Description', + home_component_logo: 'path/to/logo' + } + }, + search: { + search_by_criteria_allowed: true, + search_by_criteria_label: 'Search', + search_multiple_allowed: true, + search_multiple_label: 'Search multiple', + search_multiple_all_datasets_selected: false + }, + documentation: { + documentation_allowed: true, + documentation_label: 'Documentation' + } + }, + nb_dataset_families: 1, + nb_datasets: 2 + }; + component.currentStep = 'a'; + expect(component.getNavItemIconCircleStyle('a', false)).toEqual({ 'background-color': 'green', 'border-color': 'green' }); + expect(component.getNavItemIconCircleStyle('b', true)).toEqual({ 'color': 'green', 'border-color': 'green' }); + }); +}); diff --git a/client/src/app/instance/search/components/progress-bar.component.ts b/client/src/app/instance/search/components/progress-bar.component.ts index de9abad0eaa41190f28662e6515dba35ddff7ae1..64a727878469177543983997f63934430c9d057b 100644 --- a/client/src/app/instance/search/components/progress-bar.component.ts +++ b/client/src/app/instance/search/components/progress-bar.component.ts @@ -12,16 +12,16 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core'; import { SearchQueryParams } from '../../store/models'; import { Instance } from 'src/app/metamodel/models'; +/** + * @class + * @classdesc Search progress bar component. + */ @Component({ selector: 'app-progress-bar', templateUrl: 'progress-bar.component.html', styleUrls: ['progress-bar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -/** - * @class - * @classdesc Search progress bar component. - */ export class ProgressBarComponent { @Input() currentStep: string; @Input() instance: Instance; @@ -52,7 +52,12 @@ export class ProgressBarComponent { } } - getNavItemAStyle(currentStep: string, checked: boolean) { + /** + * Returns link color theme. + * + * @return { color: string } | null + */ + getNavItemAStyle(currentStep: string, checked: boolean): { color: string } | null { if (this.currentStep === currentStep || checked) { return { 'color': this.instance.config.design.design_color @@ -62,7 +67,12 @@ export class ProgressBarComponent { } } - getNavItemIconCircleStyle(currentStep: string, checked: boolean) { + /** + * Returns circle color theme. + * + * @return { } + */ + getNavItemIconCircleStyle(currentStep: string, checked: boolean): {} { let style = {}; if (this.currentStep === currentStep) { style['border-color'] = this.instance.config.design.design_color; diff --git a/client/src/app/instance/search/components/summary.component.spec.ts b/client/src/app/instance/search/components/summary.component.spec.ts index 1b46e6ac5d7d5150701a7f9026c886b22ba2d973..9d5c4d91f527d008f7c6a817d5f3cb5c8e440178 100644 --- a/client/src/app/instance/search/components/summary.component.spec.ts +++ b/client/src/app/instance/search/components/summary.component.spec.ts @@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AccordionModule } from 'ngx-bootstrap/accordion'; +import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { SummaryComponent } from './summary.component'; -import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { FieldCriterion } from '../../store/models/criterion'; +import { OutputCategory } from '../../../metamodel/models'; describe('[Instance][Search][Component] SummaryComponent', () => { let component: SummaryComponent; @@ -147,8 +148,8 @@ describe('[Instance][Search][Component] SummaryComponent', () => { component.criteriaList = []; expect(component.noCriteria()).toBeTruthy(); component.criteriaList = [ - {id: 1, type: 'field', operator: 'eq', value: 'fd_crit_1'} as FieldCriterion, - {id: 2, type: 'field', operator: 'eq', value: 'fd_crit_2'} as FieldCriterion + { id: 1, type: 'field', operator: 'eq', value: 'fd_crit_1' } as FieldCriterion, + { id: 2, type: 'field', operator: 'eq', value: 'fd_crit_2' } as FieldCriterion ] ; expect(component.noCriteria()).toBeFalsy(); @@ -158,29 +159,110 @@ describe('[Instance][Search][Component] SummaryComponent', () => { expect(component.noCriteria()).toBeFalsy(); }); - // it('#getAttribute() should return the attribute with the given id', () => { - // component.attributeList = ATTRIBUTE_LIST; - // expect(component.getAttribute(1).name).toBe('name_one'); - // }); - // - // it('#printCriterion() should return pretty criterion', () => { - // const criterion: Criterion = CRITERIA_LIST.find(c => c.id === 1); - // expect(component.printCriterion(criterion)).toBe('= fd_crit_1'); - // }); - // - // it('#getCategoryByFamilySortedByDisplay(idFamily) should sort by display categories belonging to idFamily', () => { - // component.categoryList = CATEGORY_LIST; - // const sortedCategoryList: Category[] = component.getCategoryByFamilySortedByDisplay(1); - // expect(sortedCategoryList.length).toBe(2); - // expect(sortedCategoryList[0].id).toBe(2); - // expect(sortedCategoryList[1].id).toBe(1); - // }); - // - // it('#getSelectedOutputByCategory() should return selected attributes belonging to the given category', () => { - // component.attributeList = ATTRIBUTE_LIST; - // component.outputList = [1]; - // expect(component.getSelectedOutputByCategory(1).length).toEqual(1); - // component.outputList = []; - // expect(component.getSelectedOutputByCategory(1).length).toEqual(0); - // }); + it('#getAttribute() should return the attribute with the given id', () => { + component.attributeList = [ + { + id: 1, + name: 'att1', + label: 'attribute1', + form_label: 'Attribute 1', + output_display: 1, + criteria_display: 1, + search_type: 'field', + operator: 'eq', + type: 'string', + min: 'one', + display_detail: 1, + id_criteria_family: 1, + id_output_category: 1 + }, + { + id: 2, + name: 'att2', + label: 'attribute2', + form_label: 'Attribute 2', + output_display: 1, + criteria_display: 1, + search_type: 'field', + operator: 'eq', + type: 'string', + min: 'two', + display_detail: 1, + id_criteria_family: 2, + id_output_category: 1 + } + ]; + expect(component.getAttribute(1).name).toBe('att1'); + }); + + it('#printCriterion() should return pretty criterion', () => { + const criterion = { id: 1, type: 'field', operator: 'eq', value: 'fd_crit_1' } as FieldCriterion; + expect(component.printCriterion(criterion)).toBe('= fd_crit_1'); + }); + + it('#getCategoryByFamilySortedByDisplay(idFamily) should sort by display categories belonging to idFamily', () => { + component.outputCategoryList = [ + { + id: 3, + label: 'The last output category', + display: 30, + id_output_family: 2 + }, + { + id: 1, + label: 'Another output category', + display: 10, + id_output_family: 1 + }, + { + id: 2, + label: 'Default output category', + display: 20, + id_output_family: 1 + } + ]; + const sortedCategoryList: OutputCategory[] = component.getCategoryByFamilySortedByDisplay(1); + expect(sortedCategoryList.length).toBe(2); + expect(sortedCategoryList[0].id).toBe(1); + expect(sortedCategoryList[1].id).toBe(2); + }); + + it('#getSelectedOutputByCategory() should return selected attributes belonging to the given category', () => { + component.attributeList = [ + { + id: 1, + name: 'att1', + label: 'attribute1', + form_label: 'Attribute 1', + output_display: 1, + criteria_display: 1, + search_type: 'field', + operator: 'eq', + type: 'string', + min: 'one', + display_detail: 1, + id_criteria_family: 1, + id_output_category: 1 + }, + { + id: 2, + name: 'att2', + label: 'attribute2', + form_label: 'Attribute 2', + output_display: 1, + criteria_display: 1, + search_type: 'field', + operator: 'eq', + type: 'string', + min: 'two', + display_detail: 1, + id_criteria_family: 2, + id_output_category: 2 + } + ]; + component.outputList = [1]; + expect(component.getSelectedOutputByCategory(1).length).toEqual(1); + component.outputList = []; + expect(component.getSelectedOutputByCategory(1).length).toEqual(0); + }); });