From e836647433a1f480552f38291d887436a64156f6 Mon Sep 17 00:00:00 2001 From: Olivia Guyot Date: Fri, 25 Oct 2024 17:00:17 +0200 Subject: [PATCH] chore: make feature-dataviz components standalone --- apps/search/src/app/app.module.ts | 2 - .../src/app/webcomponents.module.ts | 2 - libs/feature/dataviz/src/index.ts | 1 - .../chart-view/chart-view.component.spec.ts | 44 +++------------ .../lib/chart-view/chart-view.component.ts | 22 +++++++- .../dataviz/src/lib/feature-dataviz.module.ts | 48 ----------------- .../figure-container.component.spec.ts | 22 +++----- .../figure-container.component.ts | 4 +- .../geo-table-view.component.spec.ts | 48 ++--------------- .../geo-table-view.component.ts | 7 ++- .../table-view/table-view.component.spec.ts | 53 ++++--------------- .../lib/table-view/table-view.component.ts | 17 +++++- .../src/lib/figure/figure.component.spec.ts | 1 - 13 files changed, 72 insertions(+), 199 deletions(-) delete mode 100644 libs/feature/dataviz/src/lib/feature-dataviz.module.ts diff --git a/apps/search/src/app/app.module.ts b/apps/search/src/app/app.module.ts index 7b1d5d3b8b..a05b04fc82 100644 --- a/apps/search/src/app/app.module.ts +++ b/apps/search/src/app/app.module.ts @@ -2,7 +2,6 @@ import { HttpClientModule } from '@angular/common/http' import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog' -import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz' import { FeatureMapModule } from '@geonetwork-ui/feature/map' import { UiLayoutModule } from '@geonetwork-ui/ui/layout' import { @@ -38,7 +37,6 @@ export const metaReducers: MetaReducer[] = !environment.production FeatureCatalogModule, UiLayoutModule, FeatureMapModule, - FeatureDatavizModule, StoreModule.forRoot({}, { metaReducers }), !environment.production ? StoreDevtoolsModule.instrument() : [], EffectsModule.forRoot(), diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts index 7d2fa698fa..dc9db6efaa 100644 --- a/apps/webcomponents/src/app/webcomponents.module.ts +++ b/apps/webcomponents/src/app/webcomponents.module.ts @@ -33,7 +33,6 @@ import { MapStateContainerComponent, } from '@geonetwork-ui/feature/map' import { GnDatasetViewChartComponent } from './components/gn-dataset-view-chart/gn-dataset-view-chart.component' -import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz' import { FeatureAuthModule } from '@geonetwork-ui/feature/auth' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { provideGn4 } from '@geonetwork-ui/api/repository' @@ -89,7 +88,6 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [ useClass: EmbeddedTranslateLoader, }, }), - FeatureDatavizModule, FeatureAuthModule, BrowserAnimationsModule, MapStateContainerComponent, diff --git a/libs/feature/dataviz/src/index.ts b/libs/feature/dataviz/src/index.ts index 4999775b7a..8a1a74097c 100644 --- a/libs/feature/dataviz/src/index.ts +++ b/libs/feature/dataviz/src/index.ts @@ -1,4 +1,3 @@ -export * from './lib/feature-dataviz.module' export * from './lib/service/data.service' export * from './lib/chart-view/chart-view.component' export * from './lib/figure/figure-container/figure-container.component' diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts index b675b3fe2f..f287c48322 100644 --- a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts +++ b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts @@ -6,14 +6,7 @@ import { tick, } from '@angular/core/testing' import { ChartViewComponent } from './chart-view.component' -import { - ChangeDetectionStrategy, - Component, - EventEmitter, - Input, - NO_ERRORS_SCHEMA, - Output, -} from '@angular/core' +import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core' import { TranslateModule } from '@ngx-translate/core' import { DataService } from '../service/data.service' import { firstValueFrom, of, throwError } from 'rxjs' @@ -21,28 +14,8 @@ import { By } from '@angular/platform-browser' import { aSetOfLinksFixture } from '@geonetwork-ui/common/fixtures' import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' import { FetchError } from '@geonetwork-ui/data-fetcher' - -@Component({ - selector: 'gn-ui-chart', - template: '
', -}) -export class MockChartComponent { - @Input() data: object[] - @Input() labelProperty: string - @Input() valueProperty: string - @Input() secondaryValueProperty: string - @Input() type: string -} - -@Component({ - selector: 'gn-ui-dropdown-selector', - template: '
', -}) -export class MockDropdownSelectorComponent { - @Input() selected: any - @Input() choices: unknown[] - @Output() selectValue = new EventEmitter() -} +import { MockBuilder } from 'ng-mocks' +import { ChartComponent } from '@geonetwork-ui/ui/dataviz' const SAMPLE_DATA_ITEMS = [ { type: 'Feature', properties: { id: 1 } }, @@ -109,15 +82,12 @@ describe('ChartViewComponent', () => { let component: ChartViewComponent let fixture: ComponentFixture let dataService: DataService - let chartComponent: MockChartComponent + let chartComponent: ChartComponent + + beforeEach(() => MockBuilder(ChartViewComponent)) beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - ChartViewComponent, - MockDropdownSelectorComponent, - MockChartComponent, - ], imports: [TranslateModule.forRoot()], providers: [ { @@ -143,7 +113,7 @@ describe('ChartViewComponent', () => { component.link = aSetOfLinksFixture().dataCsv() flushMicrotasks() chartComponent = fixture.debugElement.query( - By.directive(MockChartComponent) + By.directive(ChartComponent) ).componentInstance fixture.detectChanges() })) diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts index c88ed76858..ede90dcb74 100644 --- a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts +++ b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts @@ -12,7 +12,10 @@ import { FieldAggregation, getJsonDataItemsProxy, } from '@geonetwork-ui/data-fetcher' -import { DropdownChoice } from '@geonetwork-ui/ui/inputs' +import { + DropdownChoice, + DropdownSelectorComponent, +} from '@geonetwork-ui/ui/inputs' import { BehaviorSubject, combineLatest, EMPTY, Observable } from 'rxjs' import { catchError, @@ -26,7 +29,13 @@ import { import { DataService } from '../service/data.service' import { InputChartType } from '@geonetwork-ui/common/domain/model/dataviz/dataviz-configuration.model' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' +import { CommonModule } from '@angular/common' +import { ChartComponent } from '@geonetwork-ui/ui/dataviz' +import { + LoadingMaskComponent, + PopupAlertComponent, +} from '@geonetwork-ui/ui/widgets' marker('chart.type.bar') marker('chart.type.barHorizontal') @@ -45,6 +54,15 @@ marker('chart.aggregation.count') templateUrl: './chart-view.component.html', styleUrls: ['./chart-view.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + CommonModule, + DropdownSelectorComponent, + TranslateModule, + ChartComponent, + LoadingMaskComponent, + PopupAlertComponent, + ], + standalone: true, }) export class ChartViewComponent { @Input() set link(value: DatasetOnlineResource) { diff --git a/libs/feature/dataviz/src/lib/feature-dataviz.module.ts b/libs/feature/dataviz/src/lib/feature-dataviz.module.ts deleted file mode 100644 index 6aa9e14c05..0000000000 --- a/libs/feature/dataviz/src/lib/feature-dataviz.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { NgModule } from '@angular/core' -import { CommonModule } from '@angular/common' -import { FeatureMapModule } from '@geonetwork-ui/feature/map' -import { - FeatureDetailComponent, - MapContainerComponent, -} from '@geonetwork-ui/ui/map' -import { GeoTableViewComponent } from './geo-table-view/geo-table-view.component' -import { FigureContainerComponent } from './figure/figure-container/figure-container.component' -import { - ChartComponent, - TableComponent, - UiDatavizModule, -} from '@geonetwork-ui/ui/dataviz' -import { TableViewComponent } from './table-view/table-view.component' -import { ChartViewComponent } from './chart-view/chart-view.component' -import { TranslateModule } from '@ngx-translate/core' -import { PopupAlertComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets' -import { UiInputsModule } from '@geonetwork-ui/ui/inputs' - -@NgModule({ - imports: [ - CommonModule, - FeatureMapModule, - UiDatavizModule, - TableComponent, - UiWidgetsModule, - TranslateModule, - ChartComponent, - UiInputsModule, - PopupAlertComponent, - FeatureDetailComponent, - MapContainerComponent, - ], - declarations: [ - GeoTableViewComponent, - FigureContainerComponent, - TableViewComponent, - ChartViewComponent, - ], - exports: [ - GeoTableViewComponent, - FigureContainerComponent, - TableViewComponent, - ChartViewComponent, - ], -}) -export class FeatureDatavizModule {} diff --git a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.spec.ts b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.spec.ts index 4ba7dd68db..25f26cc60c 100644 --- a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.spec.ts +++ b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.spec.ts @@ -1,25 +1,17 @@ -import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { someFigureItemFixture, someHabFigureItemFixture, } from '../figure.fixtures' import { FigureContainerComponent } from './figure-container.component' +import { MockBuilder } from 'ng-mocks' +import { FigureService } from '../figure.service' describe('FigureContainerComponent', () => { let component: FigureContainerComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FigureContainerComponent], - schemas: [NO_ERRORS_SCHEMA], - }) - .overrideComponent(FigureContainerComponent, { - set: { changeDetection: ChangeDetectionStrategy.Default }, - }) - .compileComponents() - }) + beforeEach(() => MockBuilder(FigureContainerComponent).keep(FigureService)) beforeEach(() => { fixture = TestBed.createComponent(FigureContainerComponent) @@ -34,14 +26,14 @@ describe('FigureContainerComponent', () => { beforeEach(() => { component.dataset = someFigureItemFixture() component.expression = 'average|age' - component.ngOnChanges(null) + component.ngOnChanges() }) it('computes the average', () => { expect(component.figure).toEqual('26.67') }) it('with correct digits', () => { component.digits = 3 - component.ngOnChanges(null) + component.ngOnChanges() expect(component.figure).toEqual('26.667') }) }) @@ -49,7 +41,7 @@ describe('FigureContainerComponent', () => { beforeEach(() => { component.dataset = someHabFigureItemFixture() component.expression = 'sum|pop' - component.ngOnChanges(null) + component.ngOnChanges() }) it('computes the sum', () => { expect(component.figure).toEqual('159176260999') @@ -59,7 +51,7 @@ describe('FigureContainerComponent', () => { beforeEach(() => { component.dataset = someHabFigureItemFixture() component.expression = 'sumfds--fdfdspop' - component.ngOnChanges(null) + component.ngOnChanges() }) it('returns Nan', () => { expect(component.figure).toEqual('NaN') diff --git a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts index 33f024df0a..078b4f9154 100644 --- a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts +++ b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts @@ -4,7 +4,7 @@ import { Input, OnChanges, } from '@angular/core' -import { TableItemModel } from '@geonetwork-ui/ui/dataviz' +import { TableItemModel, UiDatavizModule } from '@geonetwork-ui/ui/dataviz' import { FigureService } from '../figure.service' @Component({ @@ -12,6 +12,8 @@ import { FigureService } from '../figure.service' templateUrl: './figure-container.component.html', styleUrls: ['./figure-container.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [UiDatavizModule], }) export class FigureContainerComponent implements OnChanges { @Input() dataset: TableItemModel[] diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts index 46f46b9589..197d04ecb0 100644 --- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts +++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts @@ -1,56 +1,14 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Input, - NO_ERRORS_SCHEMA, - Output, -} from '@angular/core' +import { ChangeDetectorRef } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures' import { GeoTableViewComponent } from './geo-table-view.component' -import { MapContext } from '@geospatial-sdk/core' -import { Subject } from 'rxjs' -import type { FeatureCollection } from 'geojson' - -@Component({ - selector: 'gn-ui-map-container', - template: '
', -}) -export class MockMapContainerComponent { - @Input() context: MapContext - @Output() featuresClick = new Subject() - openlayersMap = Promise.resolve({}) -} - -@Component({ - selector: 'gn-ui-table', - template: '
', -}) -export class MockTableComponent { - @Input() data: FeatureCollection - @Input() activeId: string - scrollToItem = jest.fn() -} +import { MockBuilder } from 'ng-mocks' describe('GeoTableViewComponent', () => { let component: GeoTableViewComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - GeoTableViewComponent, - MockMapContainerComponent, - MockTableComponent, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .overrideComponent(GeoTableViewComponent, { - set: { changeDetection: ChangeDetectionStrategy.Default }, - }) - .compileComponents() - }) + beforeEach(() => MockBuilder(GeoTableViewComponent)) beforeEach(() => { fixture = TestBed.createComponent(GeoTableViewComponent) diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts index 0d47f5fd5c..360df24de4 100644 --- a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts +++ b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts @@ -15,13 +15,18 @@ import { import type { Feature, FeatureCollection } from 'geojson' import { Subscription } from 'rxjs' import { MapContext } from '@geospatial-sdk/core' -import { MapContainerComponent } from '@geonetwork-ui/ui/map' +import { + FeatureDetailComponent, + MapContainerComponent, +} from '@geonetwork-ui/ui/map' @Component({ selector: 'gn-ui-geo-table-view', templateUrl: './geo-table-view.component.html', styleUrls: ['./geo-table-view.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [TableComponent, MapContainerComponent, FeatureDetailComponent], + standalone: true, }) export class GeoTableViewComponent implements OnInit, OnDestroy { @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] } diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts index a9672f88ef..708e0aeb9b 100644 --- a/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts +++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.spec.ts @@ -8,18 +8,15 @@ import { } from '@angular/core/testing' import { TableViewComponent } from './table-view.component' import { of, throwError } from 'rxjs' -import { - ChangeDetectionStrategy, - Component, - EventEmitter, - Input, - Output, -} from '@angular/core' -import { TranslateModule } from '@ngx-translate/core' +import { ChangeDetectionStrategy, importProvidersFrom } from '@angular/core' import { By } from '@angular/platform-browser' import { DataService } from '../service/data.service' import { aSetOfLinksFixture } from '@geonetwork-ui/common/fixtures' import { FetchError } from '@geonetwork-ui/data-fetcher' +import { MockBuilder } from 'ng-mocks' +import { TranslateModule } from '@ngx-translate/core' +import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets' +import { TableComponent } from '@geonetwork-ui/ui/dataviz' const SAMPLE_DATA_ITEMS = [ { type: 'Feature', properties: { id: 1 } }, @@ -38,50 +35,22 @@ class DataServiceMock { ) } -@Component({ - selector: 'gn-ui-table', - template: '
', -}) -export class MockTableComponent { - @Input() data: [] - @Input() activeId - @Output() selected = new EventEmitter() -} - -@Component({ - selector: 'gn-ui-loading-mask', - template: '
', -}) -export class MockLoadingMaskComponent { - @Input() message -} - -@Component({ - selector: 'gn-ui-popup-alert', - template: '
', -}) -export class MockPopupAlertComponent {} - describe('TableViewComponent', () => { let component: TableViewComponent let fixture: ComponentFixture let dataService: DataService + beforeEach(() => MockBuilder(TableViewComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - TableViewComponent, - MockTableComponent, - MockLoadingMaskComponent, - MockPopupAlertComponent, - ], providers: [ + importProvidersFrom(TranslateModule.forRoot()), { provide: DataService, useClass: DataServiceMock, }, ], - imports: [TranslateModule.forRoot()], }) .overrideComponent(TableViewComponent, { set: { changeDetection: ChangeDetectionStrategy.Default }, @@ -102,7 +71,7 @@ describe('TableViewComponent', () => { }) describe('initial state', () => { - let tableComponent: MockTableComponent + let tableComponent: TableComponent it('loads the data from the first available link', () => { expect(dataService.getDataset).toHaveBeenCalledWith( @@ -119,7 +88,7 @@ describe('TableViewComponent', () => { it('shows a loading indicator', () => { expect( - fixture.debugElement.query(By.directive(MockLoadingMaskComponent)) + fixture.debugElement.query(By.directive(LoadingMaskComponent)) ).toBeTruthy() }) }) @@ -130,7 +99,7 @@ describe('TableViewComponent', () => { fixture.detectChanges() flushMicrotasks() tableComponent = fixture.debugElement.query( - By.directive(MockTableComponent) + By.directive(TableComponent) ).componentInstance fixture.detectChanges() })) diff --git a/libs/feature/dataviz/src/lib/table-view/table-view.component.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.ts index 7b89e80cfa..cc483bf561 100644 --- a/libs/feature/dataviz/src/lib/table-view/table-view.component.ts +++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.ts @@ -10,15 +10,28 @@ import { } from 'rxjs/operators' import { DataItem, FetchError } from '@geonetwork-ui/data-fetcher' import { DataService } from '../service/data.service' -import { TableItemModel } from '@geonetwork-ui/ui/dataviz' +import { TableComponent, TableItemModel } from '@geonetwork-ui/ui/dataviz' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' +import { + LoadingMaskComponent, + PopupAlertComponent, +} from '@geonetwork-ui/ui/widgets' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-table-view', templateUrl: './table-view.component.html', styleUrls: ['./table-view.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + CommonModule, + TableComponent, + LoadingMaskComponent, + PopupAlertComponent, + TranslateModule, + ], + standalone: true, }) export class TableViewComponent { @Input() set link(value: DatasetOnlineResource) { diff --git a/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts b/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts index ac896b98ff..adaef407eb 100644 --- a/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts +++ b/libs/ui/dataviz/src/lib/figure/figure.component.spec.ts @@ -50,7 +50,6 @@ describe('FigureComponent', () => { ) }) it('should render icon', () => { - console.log(compiled.querySelector('ng-icon')) const icon = compiled.querySelector('ng-icon') as HTMLElement expect(icon['name']).toContain('group') })