From 6b5986a9ac059a6a6abe54c59ab5f53eb6bb44fd Mon Sep 17 00:00:00 2001
From: Tifenn Guillas <tifenn.guillas@gmail.com>
Date: Wed, 27 Oct 2021 14:22:30 +0200
Subject: [PATCH] WIP: tests on datatable components
---
.../datatable/datatable.component.spec.ts | 222 ++++++++++++++++++
.../datatable/datatable.component.ts | 50 ++--
2 files changed, 251 insertions(+), 21 deletions(-)
create mode 100644 client/src/app/instance/shared-search/components/datatable/datatable.component.spec.ts
diff --git a/client/src/app/instance/shared-search/components/datatable/datatable.component.spec.ts b/client/src/app/instance/shared-search/components/datatable/datatable.component.spec.ts
new file mode 100644
index 00000000..1a99ea6c
--- /dev/null
+++ b/client/src/app/instance/shared-search/components/datatable/datatable.component.spec.ts
@@ -0,0 +1,222 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AccordionModule } from 'ngx-bootstrap/accordion';
+
+import { DatatableComponent } from './datatable.component';
+import { SearchQueryParams } from '../../../store/models';
+import {
+ DetailRendererConfig,
+ DownloadRendererConfig,
+ ImageRendererConfig,
+ LinkRendererConfig,
+ RendererConfig
+} from '../../../../metamodel/models/renderers';
+
+describe('[Instance][SharedSearch][Components][Datatable] DatatableComponent', () => {
+ @Component({ selector: 'app-detail-renderer', template: '' })
+ class DetailRendererStubComponent {
+ @Input() value: string | number;
+ @Input() datasetName: string;
+ @Input() instanceSelected: string;
+ @Input() queryParams: SearchQueryParams;
+ @Input() config: DetailRendererConfig;
+ }
+
+ @Component({ selector: 'app-link-renderer', template: '' })
+ class LinkRendererStubComponent {
+ @Input() value: string | number;
+ @Input() datasetName: string;
+ @Input() config: LinkRendererConfig;
+ }
+
+ @Component({ selector: 'app-download-renderer', template: '' })
+ class DownloadRendererStubComponent {
+ @Input() value: string;
+ @Input() datasetName: string;
+ @Input() datasetPublic: boolean;
+ @Input() config: DownloadRendererConfig;
+ }
+
+ @Component({ selector: 'app-image-renderer', template: '' })
+ class ImageRendererStubComponent {
+ @Input() value: string | number;
+ @Input() datasetName: string;
+ @Input() config: ImageRendererConfig;
+ }
+
+ @Component({ selector: 'app-json-renderer', template: '' })
+ class JsonRendererStubComponent {
+ @Input() value: string | number;
+ @Input() attributeLabel: string;
+ @Input() config: RendererConfig;
+ }
+
+ @Component({ selector: 'pagination', template: '' })
+ class PaginationStubComponent {
+ @Input() totalItems: number;
+ @Input() boundaryLinks: boolean;
+ @Input() rotate: boolean;
+ @Input() maxSize: number;
+ }
+
+ let component: DatatableComponent;
+ let fixture: ComponentFixture<DatatableComponent>;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ DatatableComponent,
+ DetailRendererStubComponent,
+ LinkRendererStubComponent,
+ DownloadRendererStubComponent,
+ ImageRendererStubComponent,
+ JsonRendererStubComponent,
+ PaginationStubComponent
+ ],
+ // imports: [AccordionModule.forRoot(), BrowserAnimationsModule]
+ });
+ fixture = TestBed.createComponent(DatatableComponent);
+ component = fixture.componentInstance;
+ });
+
+ it('should create the component', () => {
+ expect(component).toBeTruthy();
+ });
+
+ // it('#requiredParams() should return if required params are loaded', () => {
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.outputList = [1];
+ // component.dataLength = 1;
+ // expect(component.requiredParams()).toBeTruthy();
+ // component.dataLength = undefined;
+ // expect(component.requiredParams()).toBeFalsy();
+ // component.dataLength = 1;
+ // component.outputList = [];
+ // expect(component.requiredParams()).toBeFalsy();
+ // component.outputList = [1];
+ // component.attributeList = []
+ // expect(component.requiredParams()).toBeFalsy();
+ // });
+ //
+ // it('#noSelectedData() should return true if no selectedData', () => {
+ // component.selectedData = [];
+ // expect(component.noSelectedData()).toBeTruthy();
+ // });
+ //
+ // it('#noSelectedData() should return false if there are selectedData', () => {
+ // component.selectedData = [123456];
+ // expect(component.noSelectedData()).toBeFalsy();
+ // });
+ //
+ // it('#getOutputList() should return filtered output list', () => {
+ // component.outputList = [2]
+ // component.attributeList = ATTRIBUTE_LIST;
+ // expect(component.getOutputList().length).toBe(1);
+ // });
+ //
+ // it('#toggleSelection(datum) should return add datum to selectedData', () => {
+ // const datum = { label_one: 123456 };
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.selectedData = [];
+ // component.addSelectedData.subscribe((event: any) => expect(event).toBe(123456));
+ // component.toggleSelection(datum);
+ // });
+ //
+ // it('#toggleSelection(datum) should return remove datum to selectedData', () => {
+ // const datum = { label_one: 123456 };
+ // component.selectedData = [123456];
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.deleteSelectedData.subscribe((event: any) => expect(event).toBe(123456));
+ // component.toggleSelection(datum);
+ // });
+ //
+ // it('#isSelected(datum) should return true datum is selected', () => {
+ // const datum = { label_one: 123456 };
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.selectedData = [123456];
+ // expect(component.isSelected(datum)).toBeTruthy();
+ // });
+ //
+ // it('#isSelected(datum) should return false datum is not selected', () => {
+ // const datum = { label_one: 123456 };
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.selectedData = [];
+ // expect(component.isSelected(datum)).toBeFalsy();
+ // });
+ //
+ // it('#changePage() should change page value and raise getData event', () => {
+ // component.dataset = DATASET;
+ // component.sortedCol = 1;
+ // component.sortedOrder = PaginationOrder.a;
+ // const expectedPagination: Pagination = {
+ // dname: 'cat_1',
+ // page: 2,
+ // nbItems: 10,
+ // sortedCol: 1,
+ // order: PaginationOrder.a
+ // }
+ // component.getData.subscribe((event: Pagination) => expect(event).toEqual(expectedPagination));
+ // component.changePage(2);
+ // });
+ //
+ // it('#changeNbItems() should change nbItems value and raise getData event', () => {
+ // component.dataset = DATASET;
+ // component.sortedCol = 1;
+ // component.sortedOrder = PaginationOrder.a;
+ // const expectedPagination: Pagination = {
+ // dname: 'cat_1',
+ // page: 1,
+ // nbItems: 20,
+ // sortedCol: 1,
+ // order: PaginationOrder.a
+ // }
+ // component.getData.subscribe((event: Pagination) => expect(event).toEqual(expectedPagination));
+ // component.changeNbItems(20);
+ // });
+ //
+ // it('#sort() should raise getData event with correct parameters', () => {
+ // component.dataset = DATASET;
+ // component.sortedOrder = PaginationOrder.a;
+ // let expectedPagination: Pagination = {
+ // dname: 'cat_1',
+ // page: 1,
+ // nbItems: 10,
+ // sortedCol: 1,
+ // order: PaginationOrder.a
+ // }
+ // let subscribtion = component.getData.subscribe((event: Pagination) => expect(event).toEqual(expectedPagination));
+ // component.sort(1);
+ // subscribtion.unsubscribe();
+ // component.sortedCol = 1;
+ // component.sortedOrder = PaginationOrder.a;
+ // expectedPagination = {
+ // dname: 'cat_1',
+ // page: 1,
+ // nbItems: 10,
+ // sortedCol: 1,
+ // order: PaginationOrder.d
+ // }
+ // subscribtion = component.getData.subscribe((event: Pagination) => expect(event).toEqual(expectedPagination));
+ // component.sort(1);
+ // subscribtion.unsubscribe();
+ // component.sortedCol = 1;
+ // component.sortedOrder = PaginationOrder.d;
+ // expectedPagination = {
+ // dname: 'cat_1',
+ // page: 1,
+ // nbItems: 10,
+ // sortedCol: 1,
+ // order: PaginationOrder.a
+ // }
+ // subscribtion = component.getData.subscribe((event: Pagination) => expect(event).toEqual(expectedPagination));
+ // component.sort(1);
+ // });
+ //
+ // it('#ngOnInit() should init sortedCol value', () => {
+ // component.attributeList = ATTRIBUTE_LIST;
+ // component.ngOnInit();
+ // expect(component.sortedCol).toEqual(1);
+ // });
+});
diff --git a/client/src/app/instance/shared-search/components/datatable/datatable.component.ts b/client/src/app/instance/shared-search/components/datatable/datatable.component.ts
index 08038733..51615592 100644
--- a/client/src/app/instance/shared-search/components/datatable/datatable.component.ts
+++ b/client/src/app/instance/shared-search/components/datatable/datatable.component.ts
@@ -9,20 +9,28 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Instance, Attribute, Dataset, DetailRendererConfig, DownloadRendererConfig, ImageRendererConfig, LinkRendererConfig, RendererConfig } from 'src/app/metamodel/models';
+import {
+ Instance,
+ Attribute,
+ Dataset,
+ DetailRendererConfig,
+ DownloadRendererConfig,
+ ImageRendererConfig,
+ LinkRendererConfig,
+ RendererConfig } from 'src/app/metamodel/models';
import { Pagination, PaginationOrder, SearchQueryParams } from 'src/app/instance/store/models';
-@Component({
- selector: 'app-datatable',
- templateUrl: 'datatable.component.html',
- styleUrls: ['datatable.component.scss'],
-})
/**
* @class
* @classdesc Datatable component.
*
* @implements OnInit
*/
+@Component({
+ selector: 'app-datatable',
+ templateUrl: 'datatable.component.html',
+ styleUrls: ['datatable.component.scss'],
+})
export class DatatableComponent implements OnInit {
@Input() dataset: Dataset;
@Input() instance: Instance;
@@ -43,7 +51,7 @@ export class DatatableComponent implements OnInit {
public sortedCol: number = null;
public sortedOrder: PaginationOrder = PaginationOrder.a;
- ngOnInit() {
+ ngOnInit(): void {
this.sortedCol = this.attributeList.find(a => a.order_by).id;
Promise.resolve(null).then(() => this.retrieveData.emit({
dname: this.dataset.name,
@@ -54,28 +62,28 @@ export class DatatableComponent implements OnInit {
}));
}
- getRendererConfig(attribute: Attribute) {
- let config = null;
+ /**
+ * Returns renderer configuration for the given attribute.
+ *
+ * @param {Attribute} attribute - The attribute.
+ *
+ * @return DetailRendererConfig | LinkRendererConfig | DownloadRendererConfig | ImageRendererConfig | RendererConfig | null
+ */
+ getRendererConfig(attribute: Attribute): DetailRendererConfig | LinkRendererConfig | DownloadRendererConfig | ImageRendererConfig | RendererConfig | null {
switch(attribute.renderer) {
case 'detail':
- config = attribute.renderer_config as DetailRendererConfig;
- break;
+ return attribute.renderer_config as DetailRendererConfig;
case 'link':
- config = attribute.renderer_config as LinkRendererConfig;
- break;
+ return attribute.renderer_config as LinkRendererConfig;
case 'download':
- config = attribute.renderer_config as DownloadRendererConfig;
- break;
+ return attribute.renderer_config as DownloadRendererConfig;
case 'image':
- config = attribute.renderer_config as ImageRendererConfig;
- break;
+ return attribute.renderer_config as ImageRendererConfig;
case 'json':
- config = attribute.renderer_config as RendererConfig;
- break;
+ return attribute.renderer_config as RendererConfig;
default:
- config = null;
+ return null;
}
- return config;
}
/**
--
GitLab