diff --git a/apps/datafeeder/src/app/app.module.ts b/apps/datafeeder/src/app/app.module.ts index 11a4cb3e45..7f0117eef5 100644 --- a/apps/datafeeder/src/app/app.module.ts +++ b/apps/datafeeder/src/app/app.module.ts @@ -1,7 +1,10 @@ import { BrowserModule } from '@angular/platform-browser' import { importProvidersFrom, NgModule } from '@angular/core' import { ApiModule, Configuration } from '@geonetwork-ui/data-access/datafeeder' -import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets' +import { + ProgressBarComponent, + UiWidgetsModule, +} from '@geonetwork-ui/ui/widgets' import { StoreModule } from '@ngrx/store' import { StoreDevtoolsModule } from '@ngrx/store-devtools' import { environment } from '../environments/environment' @@ -84,6 +87,7 @@ export function apiConfigurationFactory() { [DATAFEEDER_STATE_KEY]: reducer, }), !environment.production ? StoreDevtoolsModule.instrument() : [], + ProgressBarComponent, ], providers: [importProvidersFrom(FeatureAuthModule)], bootstrap: [AppComponent], diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 03555b3475..ba063cb92d 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser' import { Router, RouterModule } from '@angular/router' import { FeatureCatalogModule, + OrganisationsComponent, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, } from '@geonetwork-ui/feature/catalog' @@ -29,19 +30,11 @@ import { RECORD_URL_TOKEN, } from '@geonetwork-ui/feature/search' import { - LinkCardComponent, THUMBNAIL_PLACEHOLDER, UiElementsModule, } from '@geonetwork-ui/ui/elements' -import { - PreviousNextButtonsComponent, - UiInputsModule, -} from '@geonetwork-ui/ui/inputs' -import { - BlockListComponent, - CarouselComponent, - UiLayoutModule, -} from '@geonetwork-ui/ui/layout' +import { UiInputsModule } from '@geonetwork-ui/ui/inputs' +import { UiLayoutModule } from '@geonetwork-ui/ui/layout' import { UiSearchModule } from '@geonetwork-ui/ui/search' import { getGlobalConfig, @@ -74,14 +67,16 @@ import { NewsPageComponent } from './home/news-page/news-page.component' import { OrganisationsPageComponent } from './home/organisations-page/organisations-page.component' import { SearchPageComponent } from './home/search/search-page/search-page.component' import { SearchFiltersComponent } from './home/search/search-filters/search-filters.component' -import { HeaderRecordComponent } from './record/header-record/header-record.component' import { NavigationBarComponent } from './record/navigation-bar/navigation-bar.component' import { RecordPageComponent } from './record/record-page/record-page.component' import { DatahubRouterService } from './router/datahub-router.service' import { NavigationMenuComponent } from './home/navigation-menu/navigation-menu.component' import { FormsModule } from '@angular/forms' import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz' -import { LANGUAGES_LIST, UiCatalogModule } from '@geonetwork-ui/ui/catalog' +import { + LANGUAGES_LIST, + LanguageSwitcherComponent, +} from '@geonetwork-ui/ui/catalog' import { LOGIN_URL, METADATA_LANGUAGE, @@ -89,14 +84,8 @@ import { provideRepositoryUrl, } from '@geonetwork-ui/api/repository' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' -import { RecordRelatedRecordsComponent } from './record/record-related-records/record-related-records.component' -import { RecordMetadataComponent } from './record/record-metadata/record-metadata.component' -import { RecordOtherlinksComponent } from './record/record-otherlinks/record-otherlinks.component' -import { RecordDownloadsComponent } from './record/record-downloads/record-downloads.component' -import { RecordApisComponent } from './record/record-apis/record-apis.component' import { MatTabsModule } from '@angular/material/tabs' import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets' -import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component' import { LetDirective } from '@ngrx/component' import { OrganizationPageComponent } from './organization/organization-page/organization-page.component' import { @@ -105,16 +94,11 @@ import { MAP_VIEW_CONSTRAINTS, } from '@geonetwork-ui/ui/map' import { - matAccountBoxOutline, matAddOutline, - matCloseOutline, - matEditOutline, matExpandMoreOutline, - matLocationSearchingOutline, matMenuOutline, matMoreHorizOutline, matRemoveOutline, - matSendOutline, matStarOutline, } from '@ng-icons/material-icons/outline' import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core' @@ -128,8 +112,6 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : [] HomePageComponent, HomeHeaderComponent, HeaderBadgeButtonComponent, - HeaderRecordComponent, - RecordPageComponent, SearchFiltersComponent, NavigationBarComponent, NewsPageComponent, @@ -138,12 +120,6 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : [] LastCreatedComponent, KeyFiguresComponent, NavigationMenuComponent, - RecordRelatedRecordsComponent, - RecordUserFeedbacksComponent, - RecordMetadataComponent, - RecordOtherlinksComponent, - RecordDownloadsComponent, - RecordApisComponent, ], imports: [ BrowserModule, @@ -182,29 +158,21 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : [] UiDatavizModule, FormsModule, UiInputsModule, - UiCatalogModule, MatTabsModule, UiWidgetsModule, - LinkCardComponent, - CarouselComponent, - BlockListComponent, - PreviousNextButtonsComponent, RecordMetaComponent, LetDirective, // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone NgIconsModule.withIcons({ matMenuOutline, matRemoveOutline, - matCloseOutline, matMoreHorizOutline, matAddOutline, matExpandMoreOutline, - matEditOutline, - matAccountBoxOutline, matStarOutline, - matLocationSearchingOutline, - matSendOutline, }), + OrganisationsComponent, + LanguageSwitcherComponent, ], providers: [ provideNgIconsConfig({ diff --git a/apps/datahub/src/app/organization/organization-details/organization-details.component.ts b/apps/datahub/src/app/organization/organization-details/organization-details.component.ts index 620324cf4f..a089aca958 100644 --- a/apps/datahub/src/app/organization/organization-details/organization-details.component.ts +++ b/apps/datahub/src/app/organization/organization-details/organization-details.component.ts @@ -6,7 +6,7 @@ import { OnInit, ViewChild, } from '@angular/core' -import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common' +import { CommonModule } from '@angular/common' import { CatalogRecord, Organization, @@ -23,8 +23,10 @@ import { } from '@geonetwork-ui/ui/layout' import { LetDirective } from '@ngrx/component' import { + ErrorComponent, ErrorType, LinkCardComponent, + RelatedRecordCardComponent, UiElementsModule, } from '@geonetwork-ui/ui/elements' import { UiSearchModule } from '@geonetwork-ui/ui/search' @@ -41,7 +43,10 @@ import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz' import { RouterLink } from '@angular/router' import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router' import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface' -import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets' +import { + SpinningLoaderComponent, + UiWidgetsModule, +} from '@geonetwork-ui/ui/widgets' import { startWith } from 'rxjs/operators' @Component({ @@ -51,15 +56,13 @@ import { startWith } from 'rxjs/operators' changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - AsyncPipe, - NgIf, + CommonModule, ButtonComponent, TranslateModule, CarouselComponent, BlockListComponent, LetDirective, LinkCardComponent, - NgForOf, PreviousNextButtonsComponent, UiElementsModule, UiSearchModule, @@ -67,7 +70,9 @@ import { startWith } from 'rxjs/operators' UiDatavizModule, RouterLink, UiWidgetsModule, - NgClass, + ErrorComponent, + SpinningLoaderComponent, + RelatedRecordCardComponent, ], }) export class OrganizationDetailsComponent implements OnInit, OnDestroy { diff --git a/apps/datahub/src/app/organization/organization-header/organization-header.component.spec.ts b/apps/datahub/src/app/organization/organization-header/organization-header.component.spec.ts index 7028299361..a43c64c1b1 100644 --- a/apps/datahub/src/app/organization/organization-header/organization-header.component.spec.ts +++ b/apps/datahub/src/app/organization/organization-header/organization-header.component.spec.ts @@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { OrganizationHeaderComponent } from './organization-header.component' import { UiInputsModule } from '@geonetwork-ui/ui/inputs' import { TranslateModule } from '@ngx-translate/core' -import { UiCatalogModule } from '@geonetwork-ui/ui/catalog' import { AsyncPipe, Location, NgIf } from '@angular/common' import { someOrganizationsFixture } from '@geonetwork-ui/common/fixtures' @@ -33,7 +32,6 @@ describe('OrganizationHeaderComponent', () => { OrganizationHeaderComponent, UiInputsModule, TranslateModule, - UiCatalogModule, NgIf, AsyncPipe, TranslateModule.forRoot(), diff --git a/apps/datahub/src/app/organization/organization-header/organization-header.component.ts b/apps/datahub/src/app/organization/organization-header/organization-header.component.ts index a59e7de46b..37b3216a59 100644 --- a/apps/datahub/src/app/organization/organization-header/organization-header.component.ts +++ b/apps/datahub/src/app/organization/organization-header/organization-header.component.ts @@ -1,8 +1,10 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { getGlobalConfig, getThemeConfig } from '@geonetwork-ui/util/app-config' import { TranslateModule } from '@ngx-translate/core' -import { UiInputsModule } from '@geonetwork-ui/ui/inputs' -import { UiCatalogModule } from '@geonetwork-ui/ui/catalog' +import { + NavigationButtonComponent, + UiInputsModule, +} from '@geonetwork-ui/ui/inputs' import { Organization } from '@geonetwork-ui/common/domain/model/record' import { AsyncPipe, Location, NgIf } from '@angular/common' import { ErrorType, UiElementsModule } from '@geonetwork-ui/ui/elements' @@ -16,6 +18,8 @@ import { matFolderOutline, matOpenInNewOutline, } from '@ng-icons/material-icons/outline' +import { LanguageSwitcherComponent } from '@geonetwork-ui/ui/catalog' +import { matArrowBack } from '@ng-icons/material-icons/baseline' @Component({ selector: 'datahub-organization-header', @@ -26,14 +30,15 @@ import { imports: [ UiInputsModule, TranslateModule, - UiCatalogModule, NgIf, AsyncPipe, UiElementsModule, NgIconComponent, + LanguageSwitcherComponent, + NavigationButtonComponent, ], providers: [ - provideIcons({ matFolderOutline, matOpenInNewOutline }), + provideIcons({ matFolderOutline, matOpenInNewOutline, matArrowBack }), provideNgIconsConfig({ size: '1.5em', }), diff --git a/apps/datahub/src/app/record/header-record/header-record.component.spec.ts b/apps/datahub/src/app/record/header-record/header-record.component.spec.ts index 8381d548d5..5d30a6cfcf 100644 --- a/apps/datahub/src/app/record/header-record/header-record.component.spec.ts +++ b/apps/datahub/src/app/record/header-record/header-record.component.spec.ts @@ -1,12 +1,12 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures' -import { MdViewFacade } from '@geonetwork-ui/feature/record' import { SearchService } from '@geonetwork-ui/feature/search' import { TranslateModule } from '@ngx-translate/core' -import { BehaviorSubject } from 'rxjs' import { HeaderRecordComponent } from './header-record.component' +import { MockBuilder, MockProvider } from 'ng-mocks' +import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record' +import { MdViewFacade } from '@geonetwork-ui/feature/record' jest.mock('@geonetwork-ui/util/app-config', () => ({ getThemeConfig: () => ({ @@ -20,30 +20,20 @@ jest.mock('@geonetwork-ui/util/app-config', () => ({ }, })) -const searchServiceMock = { - updateFilters: jest.fn(), -} - -class MdViewFacadeMock { - mapApiLinks$ = new BehaviorSubject([]) - geoDataLinks$ = new BehaviorSubject([]) -} - describe('HeaderRecordComponent', () => { let component: HeaderRecordComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(HeaderRecordComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [HeaderRecordComponent], imports: [TranslateModule.forRoot()], - schemas: [NO_ERRORS_SCHEMA], providers: [ - { provide: SearchService, useValue: searchServiceMock }, - { - provide: MdViewFacade, - useClass: MdViewFacadeMock, - }, + MockProvider(MdViewFacade), + MockProvider(SearchService, { + updateFilters: jest.fn(), + }), ], }).compileComponents() }) @@ -53,7 +43,7 @@ describe('HeaderRecordComponent', () => { component = fixture.componentInstance component.metadata = { ...datasetRecordsFixture()[0], - } + } as DatasetRecord fixture.detectChanges() }) @@ -63,8 +53,9 @@ describe('HeaderRecordComponent', () => { describe('#back', () => { it('searchFilter updateSearch', () => { + const searchService = TestBed.inject(SearchService) component.back() - expect(searchServiceMock.updateFilters).toHaveBeenCalledWith({}) + expect(searchService.updateFilters).toHaveBeenCalledWith({}) }) }) }) diff --git a/apps/datahub/src/app/record/header-record/header-record.component.ts b/apps/datahub/src/app/record/header-record/header-record.component.ts index 9d92672674..dc0c3a481a 100644 --- a/apps/datahub/src/app/record/header-record/header-record.component.ts +++ b/apps/datahub/src/app/record/header-record/header-record.component.ts @@ -1,16 +1,39 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' -import { SearchService } from '@geonetwork-ui/feature/search' +import { + FavoriteStarComponent, + SearchService, +} from '@geonetwork-ui/feature/search' import { getGlobalConfig, getThemeConfig } from '@geonetwork-ui/util/app-config' import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { combineLatest, map } from 'rxjs' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' +import { + BadgeComponent, + NavigationButtonComponent, +} from '@geonetwork-ui/ui/inputs' +import { LanguageSwitcherComponent } from '@geonetwork-ui/ui/catalog' +import { CommonModule } from '@angular/common' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { matLocationSearchingOutline } from '@ng-icons/material-icons/outline' +import { matArrowBack } from '@ng-icons/material-icons/baseline' @Component({ selector: 'datahub-header-record', templateUrl: './header-record.component.html', styleUrls: ['./header-record.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + NavigationButtonComponent, + LanguageSwitcherComponent, + TranslateModule, + FavoriteStarComponent, + BadgeComponent, + NgIcon, + ], + viewProviders: [provideIcons({ matLocationSearchingOutline, matArrowBack })], }) export class HeaderRecordComponent { @Input() metadata: DatasetRecord diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts index 699b7e7b08..4581894788 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts @@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core' import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { BehaviorSubject } from 'rxjs' -import { NO_ERRORS_SCHEMA } from '@angular/core' +import { MockBuilder } from 'ng-mocks' class MdViewFacadeMock { selectedApiLink$ = new BehaviorSubject([]) @@ -20,11 +20,11 @@ describe('RecordApisComponent', () => { let component: RecordApisComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(RecordApisComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RecordApisComponent], imports: [TranslateModule.forRoot()], - schemas: [NO_ERRORS_SCHEMA], providers: [ { provide: MdViewFacade, diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.ts index c89732aff9..d08c6717ba 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.ts +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.ts @@ -8,12 +8,36 @@ import { import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { CarouselComponent } from '@geonetwork-ui/ui/layout' +import { PreviousNextButtonsComponent } from '@geonetwork-ui/ui/inputs' +import { + ApiCardComponent, + RecordApiFormComponent, +} from '@geonetwork-ui/ui/elements' +import { CommonModule } from '@angular/common' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { matCloseOutline } from '@ng-icons/material-icons/outline' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'datahub-record-apis', templateUrl: './record-apis.component.html', styleUrls: ['./record-apis.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + CarouselComponent, + PreviousNextButtonsComponent, + ApiCardComponent, + RecordApiFormComponent, + NgIcon, + TranslateModule, + ], + viewProviders: [ + provideIcons({ + matCloseOutline, + }), + ], }) export class RecordApisComponent implements OnInit { @ViewChild(CarouselComponent) carousel: CarouselComponent diff --git a/apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts b/apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts index faf9206080..4ac4a1fecd 100644 --- a/apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts +++ b/apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts @@ -6,11 +6,12 @@ import { } from '@angular/core/testing' import { BehaviorSubject, of, throwError } from 'rxjs' import { RecordDownloadsComponent } from './record-downloads.component' -import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core' import { By } from '@angular/platform-browser' import { DataService } from '@geonetwork-ui/feature/dataviz' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' +import { MockBuilder } from 'ng-mocks' +import { PopupAlertComponent } from '@geonetwork-ui/ui/widgets' // This is used to work around a very weird bug when comparing URL objects would fail // if the `searchParams` of the object wasn't accessed beforehand in some cases... @@ -71,34 +72,15 @@ class DataServiceMock { ) } -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-download-item', - template: '
', -}) -export class MockDownloadsListItemComponent { - @Input() link: DatasetOnlineResource -} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-popup-alert', - template: '
', -}) -export class MockPopupAlertComponent {} - -describe('DataDownloadsComponent', () => { +describe('RecordDownloadsComponent', () => { let component: RecordDownloadsComponent let fixture: ComponentFixture let facade + beforeEach(() => MockBuilder(RecordDownloadsComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - RecordDownloadsComponent, - MockDownloadsListItemComponent, - MockPopupAlertComponent, - ], providers: [ { provide: MdViewFacade, @@ -109,7 +91,6 @@ describe('DataDownloadsComponent', () => { useClass: DataServiceMock, }, ], - schemas: [NO_ERRORS_SCHEMA], }).compileComponents() facade = TestBed.inject(MdViewFacade) }) @@ -162,7 +143,7 @@ describe('DataDownloadsComponent', () => { // disable error handling in UI it.skip('shows an error', () => { const popup = fixture.debugElement.query( - By.directive(MockPopupAlertComponent) + By.directive(PopupAlertComponent) ) expect(popup).toBeTruthy() }) diff --git a/apps/datahub/src/app/record/record-downloads/record-downloads.component.ts b/apps/datahub/src/app/record/record-downloads/record-downloads.component.ts index d21343e025..e9293d7584 100644 --- a/apps/datahub/src/app/record/record-downloads/record-downloads.component.ts +++ b/apps/datahub/src/app/record/record-downloads/record-downloads.component.ts @@ -8,12 +8,16 @@ import { DatasetServiceDistribution, } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' +import { CommonModule } from '@angular/common' +import { DownloadsListComponent } from '@geonetwork-ui/ui/elements' @Component({ selector: 'datahub-record-downloads', templateUrl: './record-downloads.component.html', styleUrls: ['./record-downloads.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, DownloadsListComponent], }) export class RecordDownloadsComponent { constructor(public facade: MdViewFacade, private dataService: DataService) {} diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts index d6363c9659..ddb562bcf2 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts @@ -1,30 +1,32 @@ -import { - Component, - EventEmitter, - Input, - NO_ERRORS_SCHEMA, - Output, -} from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { By } from '@angular/platform-browser' import { SourcesService } from '@geonetwork-ui/feature/catalog' -import { MapManagerService } from '@geonetwork-ui/feature/map' import { SearchService } from '@geonetwork-ui/feature/search' -import { ErrorComponent, ErrorType } from '@geonetwork-ui/ui/elements' +import { + ErrorComponent, + ErrorType, + ImageOverlayPreviewComponent, + MetadataCatalogComponent, + MetadataContactComponent, + MetadataInfoComponent, +} from '@geonetwork-ui/ui/elements' import { TranslateModule } from '@ngx-translate/core' import { BehaviorSubject, of } from 'rxjs' import { RecordMetadataComponent } from './record-metadata.component' import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface' import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures' -import { MdViewFacade } from '@geonetwork-ui/feature/record' import { - CatalogRecord, - DatasetRecord, - DatasetServiceDistribution, - Individual, - Keyword, - Organization, -} from '@geonetwork-ui/common/domain/model/record' + DataViewComponent, + DataViewShareComponent, + MapViewComponent, + MdViewFacade, +} from '@geonetwork-ui/feature/record' +import { MockBuilder } from 'ng-mocks' +import { RecordDownloadsComponent } from '../record-downloads/record-downloads.component' +import { RecordOtherlinksComponent } from '../record-otherlinks/record-otherlinks.component' +import { RecordApisComponent } from '../record-apis/record-apis.component' +import { RecordRelatedRecordsComponent } from '../record-related-records/record-related-records.component' +import { MatTab, MatTabGroup } from '@angular/material/tabs' const SAMPLE_RECORD = { ...datasetRecordsFixture()[0], @@ -64,100 +66,6 @@ class OrganisationsServiceMock { ) } -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-map-view', - template: '
', -}) -export class MockDataMapComponent {} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-data-view', - template: '
', -}) -export class MockDataViewComponent {} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-data-view-share', - template: '
', -}) -export class MockDataViewShareComponent {} - -@Component({ - selector: 'datahub-record-downloads', - template: '
', -}) -export class MockDataDownloadsComponent {} - -@Component({ - selector: 'datahub-record-otherlinks', - template: '
', -}) -export class MockDataOtherlinksComponent {} - -@Component({ - selector: 'datahub-record-apis', - template: '
', -}) -export class MockDataApisComponent {} - -@Component({ - selector: 'datahub-record-related-records', - template: '
', -}) -export class MockRelatedComponent {} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-metadata-info', - template: '
', -}) -export class MockMetadataInfoComponent { - @Input() metadata: Partial - @Input() incomplete: boolean - @Output() keyword = new EventEmitter() -} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-metadata-contact', - template: '
', -}) -export class MockMetadataContactComponent { - @Input() metadata: Partial - @Output() organizationClick = new EventEmitter() - @Output() contactClick = new EventEmitter() -} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-metadata-catalog', - template: '
', -}) -export class MockMetadataCatalogComponent { - @Input() sourceLabel: string -} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-record-api-form', - template: '
', -}) -export class MockRecordApiFormComponent { - @Input() apiLink: DatasetServiceDistribution -} -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-image-overlay-preview', - template: '
', -}) -export class MockImgOverlayPreviewComponent { - @Input() imageUrl: string - @Output() isPlaceholderShown = new EventEmitter() -} - describe('RecordMetadataComponent', () => { let component: RecordMetadataComponent let fixture: ComponentFixture @@ -165,35 +73,16 @@ describe('RecordMetadataComponent', () => { let searchService: SearchService let sourcesService: SourcesService + beforeEach(() => MockBuilder(RecordMetadataComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - RecordMetadataComponent, - MockDataMapComponent, - MockDataViewComponent, - MockDataViewShareComponent, - MockDataDownloadsComponent, - MockDataOtherlinksComponent, - MockDataApisComponent, - MockRelatedComponent, - ErrorComponent, - MockMetadataInfoComponent, - MockMetadataCatalogComponent, - MockMetadataContactComponent, - MockRecordApiFormComponent, - MockImgOverlayPreviewComponent, - ], - schemas: [NO_ERRORS_SCHEMA], imports: [TranslateModule.forRoot()], providers: [ { provide: MdViewFacade, useClass: MdViewFacadeMock, }, - { - provide: MapManagerService, - useValue: {}, - }, { provide: SearchService, useClass: SearchServiceMock, @@ -224,21 +113,21 @@ describe('RecordMetadataComponent', () => { }) describe('about', () => { - let metadataInfo: MockMetadataInfoComponent - let metadataContact: MockMetadataContactComponent - let catalogComponent: MockMetadataCatalogComponent + let metadataInfo: MetadataInfoComponent + let metadataContact: MetadataContactComponent + let catalogComponent: MetadataCatalogComponent beforeEach(() => { facade.isPresent$.next(true) fixture.detectChanges() metadataInfo = fixture.debugElement.query( - By.directive(MockMetadataInfoComponent) + By.directive(MetadataInfoComponent) ).componentInstance metadataContact = fixture.debugElement.query( - By.directive(MockMetadataContactComponent) + By.directive(MetadataContactComponent) ).componentInstance catalogComponent = fixture.debugElement.query( - By.directive(MockMetadataCatalogComponent) + By.directive(MetadataCatalogComponent) ).componentInstance }) describe('if metadata present', () => { @@ -260,7 +149,7 @@ describe('RecordMetadataComponent', () => { facade.isPresent$.next(false) fixture.detectChanges() metadataInfo = fixture.debugElement.query( - By.directive(MockMetadataInfoComponent) + By.directive(MetadataInfoComponent) ).componentInstance }) it('shows a placeholder', () => { @@ -269,31 +158,29 @@ describe('RecordMetadataComponent', () => { }) it('does not display the metadata contact component', () => { expect( - fixture.debugElement.query(By.directive(MockMetadataContactComponent)) + fixture.debugElement.query(By.directive(MetadataContactComponent)) ).toBeFalsy() }) it('does not display the metadata catalog component', () => { expect( - fixture.debugElement.query(By.directive(MockMetadataCatalogComponent)) + fixture.debugElement.query(By.directive(MetadataCatalogComponent)) ).toBeFalsy() }) it('does not display the image overlay preview', () => { expect( - fixture.debugElement.query( - By.directive(MockImgOverlayPreviewComponent) - ) + fixture.debugElement.query(By.directive(ImageOverlayPreviewComponent)) ).toBeFalsy() }) }) describe('Image Overlay Preview', () => { describe('if metadata without overview', () => { - let imgOverlayPreview: MockImgOverlayPreviewComponent + let imgOverlayPreview: ImageOverlayPreviewComponent beforeEach(() => { facade.isPresent$.next(true) facade.metadata$.next({}) fixture.detectChanges() imgOverlayPreview = fixture.debugElement.query( - By.directive(MockImgOverlayPreviewComponent) + By.directive(ImageOverlayPreviewComponent) ).componentInstance }) it('should send undefined as imageUrl to imgOverlayPreview component', () => { @@ -302,12 +189,12 @@ describe('RecordMetadataComponent', () => { }) }) describe('if metadata with overview', () => { - let imgOverlayPreview: MockImgOverlayPreviewComponent + let imgOverlayPreview: ImageOverlayPreviewComponent beforeEach(() => { facade.isPresent$.next(true) fixture.detectChanges() imgOverlayPreview = fixture.debugElement.query( - By.directive(MockImgOverlayPreviewComponent) + By.directive(ImageOverlayPreviewComponent) ).componentInstance }) describe('and url defined', () => { @@ -347,18 +234,18 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { facade.dataLinks$.next(['link']) fixture.detectChanges() - mapTab = fixture.debugElement.queryAll(By.css('mat-tab'))[0] - tabGroup = fixture.debugElement.queryAll(By.css('mat-tab-group'))[0] + mapTab = fixture.debugElement.queryAll(By.directive(MatTab))[0] + tabGroup = fixture.debugElement.queryAll(By.directive(MatTabGroup))[0] }) it('renders preview, map tab is disabled', () => { - expect(mapTab.nativeNode.disabled).toBe(true) + expect(mapTab.componentInstance.disabled).toBe(true) }) it('renders preview, table tab is selected', () => { - expect(tabGroup.nativeNode.selectedIndex).toBe(1) + expect(tabGroup.componentInstance.selectedIndex).toBe(1) }) it('does not render map component', () => { expect( - fixture.debugElement.query(By.directive(MockDataMapComponent)) + fixture.debugElement.query(By.directive(MapViewComponent)) ).toBeFalsy() }) }) @@ -366,14 +253,14 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { facade.mapApiLinks$.next(['link']) fixture.detectChanges() - mapTab = fixture.debugElement.queryAll(By.css('mat-tab'))[0] + mapTab = fixture.debugElement.queryAll(By.directive(MatTab))[0] }) it('renders preview, map tab is enabled', () => { - expect(mapTab.nativeNode.disabled).toBe(false) + expect(mapTab.componentInstance.disabled).toBe(false) }) it('renders map component', () => { expect( - fixture.debugElement.query(By.directive(MockDataMapComponent)) + fixture.debugElement.query(By.directive(MapViewComponent)) ).toBeTruthy() }) }) @@ -382,14 +269,14 @@ describe('RecordMetadataComponent', () => { facade.geoDataLinksWithGeometry$.next(['link']) facade.geoDataLinks$.next(['link']) fixture.detectChanges() - mapTab = fixture.debugElement.queryAll(By.css('mat-tab'))[0] + mapTab = fixture.debugElement.queryAll(By.directive(MatTab))[0] }) it('renders preview, map tab is enabled', () => { - expect(mapTab.nativeNode.disabled).toBe(false) + expect(mapTab.componentInstance.disabled).toBe(false) }) it('renders map component', () => { expect( - fixture.debugElement.query(By.directive(MockDataMapComponent)) + fixture.debugElement.query(By.directive(MapViewComponent)) ).toBeTruthy() }) }) @@ -404,27 +291,27 @@ describe('RecordMetadataComponent', () => { facade.dataLinks$.next(null) facade.geoDataLinksWithGeometry$.next(null) fixture.detectChanges() - tableTab = fixture.debugElement.queryAll(By.css('mat-tab'))[1] - chartTab = fixture.debugElement.queryAll(By.css('mat-tab'))[2] - tabGroup = fixture.debugElement.queryAll(By.css('mat-tab-group'))[0] + tableTab = fixture.debugElement.queryAll(By.directive(MatTab))[1] + chartTab = fixture.debugElement.queryAll(By.directive(MatTab))[2] + tabGroup = fixture.debugElement.queryAll(By.directive(MatTabGroup))[0] }) it('renders preview, table tab is disabled', () => { - expect(tableTab.nativeNode.disabled).toBe(true) + expect(tableTab.componentInstance.disabled).toBe(true) }) it('renders preview, chart tab is disabled', () => { - expect(chartTab.nativeNode.disabled).toBe(true) + expect(chartTab.componentInstance.disabled).toBe(true) }) it('renders preview, map tab is selected', () => { - expect(tabGroup.nativeNode.selectedIndex).toBe(0) + expect(tabGroup.componentInstance.selectedIndex).toBe(0) }) it('does not render any data view component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewComponent)) + fixture.debugElement.query(By.directive(DataViewComponent)) ).toBeFalsy() }) it('does render the permalink component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewShareComponent)) + fixture.debugElement.query(By.directive(DataViewShareComponent)) ).toBeTruthy() }) }) @@ -432,24 +319,23 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { facade.dataLinks$.next(['link']) fixture.detectChanges() - tableTab = fixture.debugElement.queryAll(By.css('mat-tab'))[1] - chartTab = fixture.debugElement.queryAll(By.css('mat-tab'))[2] + tableTab = fixture.debugElement.queryAll(By.directive(MatTab))[1] + chartTab = fixture.debugElement.queryAll(By.directive(MatTab))[2] }) it('renders preview, table tab is enabled', () => { - expect(tableTab.nativeNode.disabled).toBe(false) + expect(tableTab.componentInstance.disabled).toBe(false) }) it('renders preview, chart tab is enabled', () => { - expect(chartTab.nativeNode.disabled).toBe(false) + expect(chartTab.componentInstance.disabled).toBe(false) }) it('renders two data view components (for table and chart tabs)', () => { expect( - fixture.debugElement.queryAll(By.directive(MockDataViewComponent)) - .length + fixture.debugElement.queryAll(By.directive(DataViewComponent)).length ).toEqual(2) }) it('does render the permalink component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewShareComponent)) + fixture.debugElement.query(By.directive(DataViewShareComponent)) ).toBeTruthy() }) describe('when selectedView$ is chart', () => { @@ -459,7 +345,7 @@ describe('RecordMetadataComponent', () => { }) it('renders the permalink component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewShareComponent)) + fixture.debugElement.query(By.directive(DataViewShareComponent)) ).toBeTruthy() }) }) @@ -468,19 +354,18 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { facade.geoDataLinks$.next(['link']) fixture.detectChanges() - tableTab = fixture.debugElement.queryAll(By.css('mat-tab'))[1] - chartTab = fixture.debugElement.queryAll(By.css('mat-tab'))[2] + tableTab = fixture.debugElement.queryAll(By.directive(MatTab))[1] + chartTab = fixture.debugElement.queryAll(By.directive(MatTab))[2] }) it('renders preview, table tab is enabled', () => { - expect(tableTab.nativeNode.disabled).toBe(false) + expect(tableTab.componentInstance.disabled).toBe(false) }) it('renders preview, chart tab is enabled', () => { - expect(chartTab.nativeNode.disabled).toBe(false) + expect(chartTab.componentInstance.disabled).toBe(false) }) it('renders two data view components (for table and chart tabs)', () => { expect( - fixture.debugElement.queryAll(By.directive(MockDataViewComponent)) - .length + fixture.debugElement.queryAll(By.directive(DataViewComponent)).length ).toEqual(2) }) }) @@ -491,7 +376,7 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { fixture.detectChanges() downloadsComponent = fixture.debugElement.query( - By.directive(MockDataDownloadsComponent) + By.directive(RecordDownloadsComponent) ) }) it('download component does not render', () => { @@ -503,7 +388,7 @@ describe('RecordMetadataComponent', () => { facade.downloadLinks$.next(['link']) fixture.detectChanges() downloadsComponent = fixture.debugElement.query( - By.directive(MockDataDownloadsComponent) + By.directive(RecordDownloadsComponent) ) }) it('download component renders', () => { @@ -517,7 +402,7 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { fixture.detectChanges() otherLinksComponent = fixture.debugElement.query( - By.directive(MockDataOtherlinksComponent) + By.directive(RecordOtherlinksComponent) ) }) it('otherlink component does not render', () => { @@ -529,7 +414,7 @@ describe('RecordMetadataComponent', () => { facade.otherLinks$.next(['link']) fixture.detectChanges() otherLinksComponent = fixture.debugElement.query( - By.directive(MockDataOtherlinksComponent) + By.directive(RecordOtherlinksComponent) ) }) it('otherlink component renders', () => { @@ -543,7 +428,7 @@ describe('RecordMetadataComponent', () => { beforeEach(() => { fixture.detectChanges() apiComponent = fixture.debugElement.query( - By.directive(MockDataApisComponent) + By.directive(RecordApisComponent) ) }) it('API component does not render', () => { @@ -555,7 +440,7 @@ describe('RecordMetadataComponent', () => { facade.apiLinks$.next(['link']) fixture.detectChanges() apiComponent = fixture.debugElement.query( - By.directive(MockDataApisComponent) + By.directive(RecordApisComponent) ) }) it('API component renders', () => { @@ -571,7 +456,7 @@ describe('RecordMetadataComponent', () => { facade.related$.next([]) fixture.detectChanges() relatedComponent = fixture.debugElement.query( - By.directive(MockRelatedComponent) + By.directive(RecordRelatedRecordsComponent) ) }) it('Related component does not render', () => { @@ -583,7 +468,7 @@ describe('RecordMetadataComponent', () => { facade.related$.next([{ title: 'title' }]) fixture.detectChanges() relatedComponent = fixture.debugElement.query( - By.directive(MockRelatedComponent) + By.directive(RecordRelatedRecordsComponent) ) }) it('Related component renders', () => { diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts index 3d485c2c0f..90c0227e92 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts @@ -1,7 +1,15 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { SourcesService } from '@geonetwork-ui/feature/catalog' import { SearchService } from '@geonetwork-ui/feature/search' -import { ErrorType } from '@geonetwork-ui/ui/elements' +import { + ErrorComponent, + ErrorType, + ImageOverlayPreviewComponent, + MetadataCatalogComponent, + MetadataContactComponent, + MetadataInfoComponent, + MetadataQualityComponent, +} from '@geonetwork-ui/ui/elements' import { BehaviorSubject, combineLatest } from 'rxjs' import { filter, map, mergeMap, startWith } from 'rxjs/operators' import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface' @@ -9,13 +17,46 @@ import { Keyword, Organization, } from '@geonetwork-ui/common/domain/model/record' -import { MdViewFacade } from '@geonetwork-ui/feature/record' +import { + DataViewComponent, + DataViewShareComponent, + MapViewComponent, + MdViewFacade, +} from '@geonetwork-ui/feature/record' +import { CommonModule } from '@angular/common' +import { MatTabsModule } from '@angular/material/tabs' +import { RecordUserFeedbacksComponent } from '../record-user-feedbacks/record-user-feedbacks.component' +import { RecordDownloadsComponent } from '../record-downloads/record-downloads.component' +import { RecordApisComponent } from '../record-apis/record-apis.component' +import { RecordOtherlinksComponent } from '../record-otherlinks/record-otherlinks.component' +import { RecordRelatedRecordsComponent } from '../record-related-records/record-related-records.component' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'datahub-record-metadata', templateUrl: './record-metadata.component.html', styleUrls: ['./record-metadata.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + ImageOverlayPreviewComponent, + MatTabsModule, + ErrorComponent, + RecordUserFeedbacksComponent, + RecordDownloadsComponent, + RecordApisComponent, + RecordOtherlinksComponent, + DataViewShareComponent, + MetadataInfoComponent, + MetadataContactComponent, + MetadataQualityComponent, + MetadataCatalogComponent, + RecordRelatedRecordsComponent, + DataViewComponent, + MapViewComponent, + TranslateModule, + ], }) export class RecordMetadataComponent { @Input() metadataQualityDisplay: boolean diff --git a/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts b/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts index bc4d48e632..34d39fa230 100644 --- a/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts +++ b/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts @@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { BehaviorSubject } from 'rxjs' import { RecordOtherlinksComponent } from './record-otherlinks.component' import { MdViewFacade } from '@geonetwork-ui/feature/record' +import { MockBuilder, MockProvider } from 'ng-mocks' class MdViewFacadeMock { otherLinks$ = new BehaviorSubject([]) @@ -10,10 +11,15 @@ describe('RecordOtherlinksComponent', () => { let component: RecordOtherlinksComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(RecordOtherlinksComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RecordOtherlinksComponent], - providers: [{ provide: MdViewFacade, useClass: MdViewFacadeMock }], + providers: [ + MockProvider(MdViewFacade, { + otherLinks$: new BehaviorSubject([]), + }), + ], }).compileComponents() }) diff --git a/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts b/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts index 97a39cf5a8..cef2c555c7 100644 --- a/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts +++ b/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts @@ -7,12 +7,27 @@ import { } from '@angular/core' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { BlockListComponent, CarouselComponent } from '@geonetwork-ui/ui/layout' +import { PreviousNextButtonsComponent } from '@geonetwork-ui/ui/inputs' +import { CommonModule } from '@angular/common' +import { LinkCardComponent } from '@geonetwork-ui/ui/elements' +import { LetDirective } from '@ngrx/component' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'datahub-record-otherlinks', templateUrl: './record-otherlinks.component.html', styleUrls: ['./record-otherlinks.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + PreviousNextButtonsComponent, + BlockListComponent, + LinkCardComponent, + CarouselComponent, + LetDirective, + TranslateModule, + ], }) export class RecordOtherlinksComponent implements AfterViewInit { otherLinks$ = this.facade.otherLinks$ diff --git a/apps/datahub/src/app/record/record-page/record-page.component.spec.ts b/apps/datahub/src/app/record/record-page/record-page.component.spec.ts index a13f001ce8..723866b8fa 100644 --- a/apps/datahub/src/app/record/record-page/record-page.component.spec.ts +++ b/apps/datahub/src/app/record/record-page/record-page.component.spec.ts @@ -1,28 +1,18 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { MdViewFacade } from '@geonetwork-ui/feature/record' -import { of } from 'rxjs' import { RecordPageComponent } from './record-page.component' - -class MdViewFacadeMock { - metadata$ = of() -} +import { MockBuilder, MockProvider } from 'ng-mocks' describe('RecordPageComponent', () => { let component: RecordPageComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(RecordPageComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RecordPageComponent], - schemas: [NO_ERRORS_SCHEMA], - providers: [ - { - provide: MdViewFacade, - useClass: MdViewFacadeMock, - }, - ], + providers: [MockProvider(MdViewFacade)], }).compileComponents() }) diff --git a/apps/datahub/src/app/record/record-page/record-page.component.ts b/apps/datahub/src/app/record/record-page/record-page.component.ts index dbe43824ce..08961234c9 100644 --- a/apps/datahub/src/app/record/record-page/record-page.component.ts +++ b/apps/datahub/src/app/record/record-page/record-page.component.ts @@ -1,15 +1,28 @@ import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core' -import { MdViewFacade } from '@geonetwork-ui/feature/record' import { - MetadataQualityConfig, + MdViewFacade, + RecordMetaComponent, +} from '@geonetwork-ui/feature/record' +import { getMetadataQualityConfig, + MetadataQualityConfig, } from '@geonetwork-ui/util/app-config' +import { RecordMetadataComponent } from '../record-metadata/record-metadata.component' +import { HeaderRecordComponent } from '../header-record/header-record.component' +import { CommonModule } from '@angular/common' @Component({ selector: 'datahub-record-page', templateUrl: './record-page.component.html', styleUrls: ['./record-page.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + RecordMetadataComponent, + HeaderRecordComponent, + RecordMetaComponent, + ], }) export class RecordPageComponent implements OnDestroy { metadataQualityDisplay: boolean diff --git a/apps/datahub/src/app/record/record-related-records/record-related-records.component.spec.ts b/apps/datahub/src/app/record/record-related-records/record-related-records.component.spec.ts index b5e95e7938..b51cfff4c3 100644 --- a/apps/datahub/src/app/record/record-related-records/record-related-records.component.spec.ts +++ b/apps/datahub/src/app/record/record-related-records/record-related-records.component.spec.ts @@ -1,16 +1,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { RecordRelatedRecordsComponent } from './record-related-records.component' +import { MockBuilder } from 'ng-mocks' describe('RelatedRecordsComponent', () => { let component: RecordRelatedRecordsComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [RecordRelatedRecordsComponent], - }).compileComponents() - }) + beforeEach(() => MockBuilder(RecordRelatedRecordsComponent)) beforeEach(() => { fixture = TestBed.createComponent(RecordRelatedRecordsComponent) diff --git a/apps/datahub/src/app/record/record-related-records/record-related-records.component.ts b/apps/datahub/src/app/record/record-related-records/record-related-records.component.ts index d82b51ff1f..d2802b425b 100644 --- a/apps/datahub/src/app/record/record-related-records/record-related-records.component.ts +++ b/apps/datahub/src/app/record/record-related-records/record-related-records.component.ts @@ -1,11 +1,16 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' +import { RelatedRecordCardComponent } from '@geonetwork-ui/ui/elements' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'datahub-record-related-records', templateUrl: './record-related-records.component.html', styleUrls: ['./record-related-records.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, RelatedRecordCardComponent, TranslateModule], }) export class RecordRelatedRecordsComponent { @Input() records: CatalogRecord[] diff --git a/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.spec.ts b/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.spec.ts index 048b1322fb..0fc6088674 100644 --- a/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.spec.ts +++ b/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.spec.ts @@ -8,11 +8,7 @@ import { RecordUserFeedbacksComponent } from './record-user-feedbacks.component' import { TranslateModule } from '@ngx-translate/core' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { BehaviorSubject, of, Subject } from 'rxjs' -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - NO_ERRORS_SCHEMA, -} from '@angular/core' +import { ChangeDetectionStrategy } from '@angular/core' import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface' import { barbieUserFixture, @@ -24,8 +20,9 @@ import { UserFeedbackViewModel, } from '@geonetwork-ui/common/domain/model/record' import { Gn4PlatformMapper } from '@geonetwork-ui/api/repository' +import { MockBuilder, MockProvider } from 'ng-mocks' -describe('RelatedRecordsComponent', () => { +describe('RecordUserFeedbacksComponent', () => { const allUserFeedbacks = someUserFeedbacksFixture() let mockDestroy$: Subject @@ -48,10 +45,6 @@ describe('RelatedRecordsComponent', () => { }, } - const changeDetectorRefMock: Partial = { - markForCheck: jest.fn(), - } - const platformServiceInterfaceMock: Partial = { getUserFeedbacks: jest.fn(), getMe: jest.fn(() => new BehaviorSubject(activeUser)), @@ -60,30 +53,17 @@ describe('RelatedRecordsComponent', () => { let component: RecordUserFeedbacksComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(RecordUserFeedbacksComponent)) + beforeEach(async () => { mockDestroy$ = new Subject() await TestBed.configureTestingModule({ - declarations: [RecordUserFeedbacksComponent], imports: [TranslateModule.forRoot()], - schemas: [NO_ERRORS_SCHEMA], providers: [ - { - provide: MdViewFacade, - useValue: mdViewFacadeMock, - }, - { - provide: ChangeDetectorRef, - useValue: changeDetectorRefMock, - }, - { - provide: PlatformServiceInterface, - useValue: platformServiceInterfaceMock, - }, - { - provide: Gn4PlatformMapper, - useValue: gn4PlatformMapperMock, - }, + MockProvider(MdViewFacade, mdViewFacadeMock), + MockProvider(PlatformServiceInterface, platformServiceInterfaceMock), + MockProvider(Gn4PlatformMapper, gn4PlatformMapperMock), ], }) .overrideComponent(RecordUserFeedbacksComponent, { diff --git a/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.ts b/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.ts index 9e7d92356f..033233ca64 100644 --- a/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.ts +++ b/apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.ts @@ -14,11 +14,24 @@ import { } from '@geonetwork-ui/common/domain/model/record' import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface' import { UserModel } from '@geonetwork-ui/common/domain/model/user' -import { DropdownChoice } from '@geonetwork-ui/ui/inputs' +import { + ButtonComponent, + DropdownChoice, + DropdownSelectorComponent, + TextAreaComponent, +} from '@geonetwork-ui/ui/inputs' import { MdViewFacade } from '@geonetwork-ui/feature/record' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' import { AuthService, Gn4PlatformMapper } from '@geonetwork-ui/api/repository' -import { UserApiModel } from '@geonetwork-ui/data-access/gn4' +import { SpinningLoaderComponent } from '@geonetwork-ui/ui/widgets' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { + matAccountBoxOutline, + matEditOutline, + matSendOutline, +} from '@ng-icons/material-icons/outline' +import { CommonModule } from '@angular/common' +import { UserFeedbackItemComponent } from '@geonetwork-ui/ui/elements' type UserFeedbackSortingFunction = ( userFeedbackA: UserFeedback, @@ -30,6 +43,24 @@ type UserFeedbackSortingFunction = ( templateUrl: './record-user-feedbacks.component.html', styleUrls: ['./record-user-feedbacks.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + DropdownSelectorComponent, + SpinningLoaderComponent, + NgIcon, + ButtonComponent, + TextAreaComponent, + TranslateModule, + UserFeedbackItemComponent, + ], + viewProviders: [ + provideIcons({ + matEditOutline, + matSendOutline, + matAccountBoxOutline, + }), + ], }) export class RecordUserFeedbacksComponent implements OnInit, OnDestroy { @Input() organisationName$: Observable diff --git a/apps/metadata-editor/src/app/records/records-list.component.spec.ts b/apps/metadata-editor/src/app/records/records-list.component.spec.ts index 2b1621ed6f..2a277e8594 100644 --- a/apps/metadata-editor/src/app/records/records-list.component.spec.ts +++ b/apps/metadata-editor/src/app/records/records-list.component.spec.ts @@ -1,49 +1,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' -import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search' +import { + ResultsTableContainerComponent, + SearchFacade, + SearchService, +} from '@geonetwork-ui/feature/search' import { allSearchFields, RecordsListComponent } from './records-list.component' -import { Component, EventEmitter, Input, Output } from '@angular/core' -import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' import { By } from '@angular/platform-browser' import { Router } from '@angular/router' import { BehaviorSubject } from 'rxjs' -import { CommonModule } from '@angular/common' import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures' +import { MockBuilder } from 'ng-mocks' +import { PaginationButtonsComponent } from '@geonetwork-ui/ui/elements' const results = [{ md: true }] const currentPage = 5 const totalPages = 25 -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-results-table-container', - template: '', - standalone: true, -}) -export class ResultsTableContainerComponent { - @Output() recordClick = new EventEmitter() - @Output() duplicateRecord = new EventEmitter() -} - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'gn-ui-pagination-buttons', - template: '', - standalone: true, -}) -export class PaginationButtonsComponent { - @Input() currentPage = 1 - @Input() totalPages = 1 - @Input() hideButton = false - @Output() newCurrentPageEvent = new EventEmitter() -} - -@Component({ - selector: 'md-editor-records-count', - template: '', - standalone: true, -}) -export class RecordsCountComponent {} - class SearchFacadeMock { results$ = new BehaviorSubject(results) currentPage$ = new BehaviorSubject(currentPage) @@ -68,6 +40,8 @@ describe('RecordsListComponent', () => { let searchService: SearchService let searchFacade: SearchFacade + beforeEach(() => MockBuilder(RecordsListComponent)) + beforeEach(() => { TestBed.configureTestingModule({ providers: [ @@ -84,15 +58,6 @@ describe('RecordsListComponent', () => { useClass: SearchServiceMock, }, ], - }).overrideComponent(RecordsListComponent, { - set: { - imports: [ - CommonModule, - ResultsTableContainerComponent, - PaginationButtonsComponent, - RecordsCountComponent, - ], - }, }) router = TestBed.inject(Router) searchService = TestBed.inject(SearchService) diff --git a/apps/metadata-editor/src/app/records/records-list.component.ts b/apps/metadata-editor/src/app/records/records-list.component.ts index 83b3b75ab7..8f53f6d992 100644 --- a/apps/metadata-editor/src/app/records/records-list.component.ts +++ b/apps/metadata-editor/src/app/records/records-list.component.ts @@ -8,10 +8,12 @@ import { SearchService, } from '@geonetwork-ui/feature/search' import { UiSearchModule } from '@geonetwork-ui/ui/search' -import { UiElementsModule } from '@geonetwork-ui/ui/elements' +import { + PaginationButtonsComponent, + UiElementsModule, +} from '@geonetwork-ui/ui/elements' import { TranslateModule } from '@ngx-translate/core' import { UiInputsModule } from '@geonetwork-ui/ui/inputs' -import { RecordsCountComponent } from './records-count/records-count.component' export const allSearchFields = [ 'uuid', @@ -36,7 +38,7 @@ export const allSearchFields = [ TranslateModule, ResultsTableContainerComponent, UiInputsModule, - RecordsCountComponent, + PaginationButtonsComponent, ], }) export class RecordsListComponent implements OnInit { 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/catalog/src/lib/feature-catalog.module.ts b/libs/feature/catalog/src/lib/feature-catalog.module.ts index 543275fb8d..7dfb323b01 100644 --- a/libs/feature/catalog/src/lib/feature-catalog.module.ts +++ b/libs/feature/catalog/src/lib/feature-catalog.module.ts @@ -1,8 +1,8 @@ import { InjectionToken, NgModule } from '@angular/core' import { SiteTitleComponent } from './site-title/site-title.component' import { + CatalogTitleComponent, OrganisationsFilterComponent, - UiCatalogModule, } from '@geonetwork-ui/ui/catalog' import { GroupsApiService, @@ -11,7 +11,6 @@ import { import { CommonModule } from '@angular/common' import { SourceLabelComponent } from './source-label/source-label.component' import { LangService, UtilI18nModule } from '@geonetwork-ui/util/i18n' -import { OrganisationsComponent } from './organisations/organisations.component' import { UiLayoutModule } from '@geonetwork-ui/ui/layout' import { TranslateModule, TranslateService } from '@ngx-translate/core' import { UiElementsModule } from '@geonetwork-ui/ui/elements' @@ -55,21 +54,17 @@ const organizationsServiceFactory = ( ) @NgModule({ - declarations: [ - SiteTitleComponent, - SourceLabelComponent, - OrganisationsComponent, - ], + declarations: [SiteTitleComponent, SourceLabelComponent], imports: [ - UiCatalogModule, UiLayoutModule, CommonModule, UtilI18nModule, TranslateModule.forChild(), UiElementsModule, OrganisationsFilterComponent, + CatalogTitleComponent, ], - exports: [SiteTitleComponent, SourceLabelComponent, OrganisationsComponent], + exports: [SiteTitleComponent, SourceLabelComponent], providers: [ { provide: OrganizationsServiceInterface, diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts index be631b6959..8844d1ccb0 100644 --- a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts +++ b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts @@ -1,55 +1,21 @@ import { ChangeDetectionStrategy, - Component, DebugElement, - EventEmitter, - Input, NO_ERRORS_SCHEMA, - Output, } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { By } from '@angular/platform-browser' -import { ContentGhostComponent } from '@geonetwork-ui/ui/elements' -import { Organization } from '@geonetwork-ui/common/domain/model/record' import { firstValueFrom, of } from 'rxjs' import { someOrganizationsFixture } from '@geonetwork-ui/common/fixtures' import { OrganisationsComponent } from './organisations.component' import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface' - -@Component({ - selector: 'gn-ui-organisations-filter', - template: '
', -}) -class OrganisationsFilterMockComponent { - @Output() sortBy = new EventEmitter() -} -@Component({ - selector: 'gn-ui-organisation-preview', - template: '
', -}) -class OrganisationPreviewMockComponent { - @Input() organization: Organization - @Output() clickedOrganization = new EventEmitter() -} - -@Component({ - selector: 'gn-ui-organisations-result', - template: '
', -}) -class OrganisationsResultMockComponent { - @Input() hits: number - @Input() total: number -} - -@Component({ - selector: 'gn-ui-pagination', - template: '
', -}) -class PaginationMockComponent { - @Input() currentPage: number - @Input() nPages: number - @Output() newCurrentPageEvent = new EventEmitter() -} +import { MockBuilder } from 'ng-mocks' +import { + OrganisationPreviewComponent, + OrganisationsFilterComponent, + OrganisationsResultComponent, +} from '@geonetwork-ui/ui/catalog' +import { PaginationComponent } from '@geonetwork-ui/ui/elements' class OrganisationsServiceMock { organisations$ = of(someOrganizationsFixture()) @@ -70,16 +36,10 @@ describe('OrganisationsComponent', () => { let fixture: ComponentFixture let de: DebugElement + beforeEach(() => MockBuilder(OrganisationsComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - OrganisationsComponent, - OrganisationsFilterMockComponent, - OrganisationPreviewMockComponent, - PaginationMockComponent, - OrganisationsResultMockComponent, - ContentGhostComponent, - ], providers: [ { provide: OrganizationsServiceInterface, @@ -105,18 +65,18 @@ describe('OrganisationsComponent', () => { }) describe('on component init', () => { - let orgPreviewComponents: OrganisationPreviewMockComponent[] - let orgResultComponent: OrganisationsResultMockComponent + let orgPreviewComponents: OrganisationPreviewComponent[] + let orgResultComponent: OrganisationsResultComponent let paginationComponentDE: DebugElement let setCurrentPageSpy let setSortBySpy beforeEach(() => { - paginationComponentDE = de.query(By.directive(PaginationMockComponent)) + paginationComponentDE = de.query(By.directive(PaginationComponent)) }) describe('pass organisations to ui preview components', () => { beforeEach(() => { orgPreviewComponents = de - .queryAll(By.directive(OrganisationPreviewMockComponent)) + .queryAll(By.directive(OrganisationPreviewComponent)) .map((debugElement) => debugElement.componentInstance) }) it('should pass first organisation (sorted by name-asc) to first ui preview component', () => { @@ -141,7 +101,7 @@ describe('OrganisationsComponent', () => { paginationComponentDE.triggerEventHandler('newCurrentPageEvent', 2) fixture.detectChanges() orgPreviewComponents = de - .queryAll(By.directive(OrganisationPreviewMockComponent)) + .queryAll(By.directive(OrganisationPreviewComponent)) .map((debugElement) => debugElement.componentInstance) }) afterEach(() => { @@ -180,11 +140,11 @@ describe('OrganisationsComponent', () => { beforeEach(() => { setSortBySpy = jest.spyOn(component, 'setSortBy') de.query( - By.directive(OrganisationsFilterMockComponent) + By.directive(OrganisationsFilterComponent) ).triggerEventHandler('sortBy', ['desc', 'recordCount']) fixture.detectChanges() orgPreviewComponents = de - .queryAll(By.directive(OrganisationPreviewMockComponent)) + .queryAll(By.directive(OrganisationPreviewComponent)) .map((debugElement) => debugElement.componentInstance) }) it('should call setSortBy', () => { @@ -209,7 +169,7 @@ describe('OrganisationsComponent', () => { describe('initial state', () => { beforeEach(() => { orgResultComponent = de.query( - By.directive(OrganisationsResultMockComponent) + By.directive(OrganisationsResultComponent) ).componentInstance }) it('should display number of organisations found to equal all', () => { @@ -226,7 +186,7 @@ describe('OrganisationsComponent', () => { describe('entering search terms', () => { beforeEach(() => { orgResultComponent = de.query( - By.directive(OrganisationsResultMockComponent) + By.directive(OrganisationsResultComponent) ).componentInstance }) it('should ignore case and display 11 matches for "Data", "DATA" or "data"', () => { @@ -247,7 +207,7 @@ describe('OrganisationsComponent', () => { orgSelected = [] component.orgSelect.subscribe((org) => orgSelected.push(org)) de.query( - By.directive(OrganisationPreviewMockComponent) + By.directive(OrganisationPreviewComponent) ).triggerEventHandler('clickedOrganisation', organisationMock) fixture.detectChanges() }) diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.ts index 84194910c4..565a631c68 100644 --- a/libs/feature/catalog/src/lib/organisations/organisations.component.ts +++ b/libs/feature/catalog/src/lib/organisations/organisations.component.ts @@ -14,12 +14,31 @@ import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/orga import { SortByField } from '@geonetwork-ui/common/domain/model/search' import { createFuzzyFilter } from '@geonetwork-ui/util/shared' import { ORGANIZATION_PAGE_URL_TOKEN } from '../organization-url.token' +import { + ContentGhostComponent, + PaginationComponent, +} from '@geonetwork-ui/ui/elements' +import { CommonModule } from '@angular/common' +import { + OrganisationPreviewComponent, + OrganisationsFilterComponent, + OrganisationsResultComponent, +} from '@geonetwork-ui/ui/catalog' @Component({ selector: 'gn-ui-organisations', templateUrl: './organisations.component.html', styleUrls: ['./organisations.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + ContentGhostComponent, + OrganisationsFilterComponent, + OrganisationsResultComponent, + OrganisationPreviewComponent, + PaginationComponent, + ], }) export class OrganisationsComponent { @Input() itemsOnPage = 12 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.stories.ts b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts index 913ce743d2..08b9cef6ca 100644 --- a/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts +++ b/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.stories.ts @@ -13,6 +13,8 @@ import { UiDatavizModule, } from '@geonetwork-ui/ui/dataviz' import { importProvidersFrom } from '@angular/core' +import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n' +import { TranslateModule } from '@ngx-translate/core' export default { title: 'Dataviz/FigureContainerComponent', @@ -22,7 +24,10 @@ export default { imports: [UiDatavizModule], }), applicationConfig({ - providers: [importProvidersFrom(BrowserAnimationsModule)], + providers: [ + importProvidersFrom(BrowserAnimationsModule), + importProvidersFrom(TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG)), + ], }), componentWrapperDecorator( (story) => ` 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.stories.ts b/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts index f77ba78d1e..78feec5feb 100644 --- a/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts +++ b/libs/feature/dataviz/src/lib/table-view/table-view.component.stories.ts @@ -11,16 +11,13 @@ import { } from '@storybook/angular' import { TableViewComponent } from './table-view.component' import { TableComponent, UiDatavizModule } from '@geonetwork-ui/ui/dataviz' -import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets' import { importProvidersFrom } from '@angular/core' -import { MatProgressSpinner } from '@angular/material/progress-spinner' export default { title: 'Smart/Dataviz/TableView', component: TableViewComponent, decorators: [ moduleMetadata({ - declarations: [LoadingMaskComponent, MatProgressSpinner], imports: [ TableComponent, TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG), 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/feature/map/src/lib/layers-panel/layers-panel.component.ts b/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts index 61e7dbf068..82774645f2 100644 --- a/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts +++ b/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' import { MapFacade } from '../+state/map.facade' import { firstValueFrom, map } from 'rxjs' import { MapContextLayer } from '@geospatial-sdk/core' -import { UiLayoutModule } from '@geonetwork-ui/ui/layout' +import { ExpandablePanelButtonComponent } from '@geonetwork-ui/ui/layout' import { MatTabsModule } from '@angular/material/tabs' import { AddLayerFromOgcApiComponent } from '../add-layer-from-ogc-api/add-layer-from-ogc-api.component' import { AddLayerFromWfsComponent } from '../add-layer-from-wfs/add-layer-from-wfs.component' @@ -29,7 +29,6 @@ import { matChevronRight } from '@ng-icons/material-icons/baseline' changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - UiLayoutModule, MatTabsModule, AddLayerFromOgcApiComponent, AddLayerFromWfsComponent, @@ -39,6 +38,7 @@ import { matChevronRight } from '@ng-icons/material-icons/baseline' TranslateModule, CommonModule, NgIconComponent, + ExpandablePanelButtonComponent, ], providers: [ provideIcons({ diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts index 381b66ecbf..d90543561d 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts @@ -6,10 +6,10 @@ import { } from './data-view-permalink.component' import { BehaviorSubject, firstValueFrom } from 'rxjs' import { MdViewFacade } from '../state' -import { Component, Input } from '@angular/core' import { TranslateModule } from '@ngx-translate/core' import { GN_UI_VERSION } from '../gn-ui-version.token' import { provideRepositoryUrl } from '@geonetwork-ui/api/repository' +import { MockBuilder } from 'ng-mocks' const chartConfig1 = { aggregation: 'sum', @@ -38,23 +38,15 @@ const baseUrl = 'https://example.com/wc-embedder' const gnUiVersion = 'v1.2.3' -@Component({ - selector: 'gn-ui-copy-text-button', - template: '
', -}) -export class MockCopyTextButtonComponent { - @Input() text: string - @Input() tooltipText: string - @Input() rows: number -} describe('DataViewPermalinkComponent', () => { let component: DataViewPermalinkComponent let fixture: ComponentFixture let facade + beforeEach(() => MockBuilder(DataViewPermalinkComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DataViewPermalinkComponent, MockCopyTextButtonComponent], imports: [TranslateModule.forRoot()], providers: [ provideRepositoryUrl('http://gn-api.url/'), diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts index ef55091071..c0036aa95d 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts @@ -10,6 +10,9 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4' import { BehaviorSubject, combineLatest, map } from 'rxjs' import { MdViewFacade } from '../state' import { GN_UI_VERSION } from '../gn-ui-version.token' +import { CopyTextButtonComponent } from '@geonetwork-ui/ui/inputs' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken( 'webComponentEmbedderUrl' @@ -20,6 +23,8 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken( templateUrl: './data-view-permalink.component.html', styleUrls: ['./data-view-permalink.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, CopyTextButtonComponent, TranslateModule], }) export class DataViewPermalinkComponent { viewType$ = new BehaviorSubject('map') diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts b/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts index cf87abd4f1..0dfac81abe 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.spec.ts @@ -1,36 +1,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { DataViewShareComponent } from './data-view-share.component' -import { Component, NO_ERRORS_SCHEMA } from '@angular/core' -import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component' +import { + DataViewPermalinkComponent, + WEB_COMPONENT_EMBEDDER_URL, +} from '../data-view-permalink/data-view-permalink.component' import { By } from '@angular/platform-browser' - -@Component({ - selector: 'gn-ui-data-view-permalink', - template: '
', -}) -export class MockDataViewPermalinkComponent {} - -@Component({ - selector: 'gn-ui-data-view-web-component', - template: '
', -}) -export class MockDataViewWebComponentComponent {} +import { MockBuilder } from 'ng-mocks' +import { DataViewWebComponentComponent } from '../data-view-web-component/data-view-web-component.component' const baseUrl = 'https://example.com/wc-embedder' describe('DataViewShareComponent', () => { let component: DataViewShareComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - DataViewShareComponent, - MockDataViewPermalinkComponent, - MockDataViewWebComponentComponent, - ], - schemas: [NO_ERRORS_SCHEMA], - }).compileComponents() - }) + beforeEach(() => MockBuilder(DataViewShareComponent)) describe('if no WEB_COMPONENT_EMBEDDER_URL is defined', () => { beforeEach(() => { @@ -51,14 +34,12 @@ describe('DataViewShareComponent', () => { }) it('does not render a data view permalink component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewPermalinkComponent)) + fixture.debugElement.query(By.directive(DataViewPermalinkComponent)) ).toBeFalsy() }) it('renders a data view web component component', () => { expect( - fixture.debugElement.query( - By.directive(MockDataViewWebComponentComponent) - ) + fixture.debugElement.query(By.directive(DataViewWebComponentComponent)) ).toBeTruthy() }) }) @@ -78,14 +59,12 @@ describe('DataViewShareComponent', () => { }) it('renders a data view permalink component', () => { expect( - fixture.debugElement.query(By.directive(MockDataViewPermalinkComponent)) + fixture.debugElement.query(By.directive(DataViewPermalinkComponent)) ).toBeTruthy() }) it('renders a data view web component component', () => { expect( - fixture.debugElement.query( - By.directive(MockDataViewWebComponentComponent) - ) + fixture.debugElement.query(By.directive(DataViewWebComponentComponent)) ).toBeTruthy() }) }) diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts index 95085e9e0b..d9cca54f30 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts @@ -5,13 +5,28 @@ import { Input, Optional, } from '@angular/core' -import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component' +import { + DataViewPermalinkComponent, + WEB_COMPONENT_EMBEDDER_URL, +} from '../data-view-permalink/data-view-permalink.component' +import { MatTabsModule } from '@angular/material/tabs' +import { CommonModule } from '@angular/common' +import { DataViewWebComponentComponent } from '../data-view-web-component/data-view-web-component.component' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-data-view-share', templateUrl: './data-view-share.component.html', styleUrls: ['./data-view-share.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + CommonModule, + MatTabsModule, + DataViewPermalinkComponent, + DataViewWebComponentComponent, + TranslateModule, + ], + standalone: true, }) export class DataViewShareComponent { private _viewType: string diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts index 7521751966..53f7280eb8 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts @@ -2,10 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { DataViewWebComponentComponent } from './data-view-web-component.component' import { BehaviorSubject, firstValueFrom } from 'rxjs' import { MdViewFacade } from '../state' -import { TranslateModule } from '@ngx-translate/core' -import { Component, Input } from '@angular/core' import { GN_UI_VERSION } from '../gn-ui-version.token' import { provideRepositoryUrl } from '@geonetwork-ui/api/repository' +import { MockBuilder } from 'ng-mocks' const chartConfig1 = { aggregation: 'sum', @@ -32,28 +31,15 @@ class MdViewFacadeMock { metadata$ = new BehaviorSubject(metadata) } -@Component({ - selector: 'gn-ui-copy-text-button', - template: '
', -}) -export class MockCopyTextButtonComponent { - @Input() text: string - @Input() tooltipText: string - @Input() rows: number -} - describe('DataViewWebComponentComponent', () => { let component: DataViewWebComponentComponent let fixture: ComponentFixture let facade + beforeEach(() => MockBuilder(DataViewWebComponentComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - DataViewWebComponentComponent, - MockCopyTextButtonComponent, - ], - imports: [TranslateModule.forRoot()], providers: [ provideRepositoryUrl('http://gn-api.url/'), { diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts index 98a9baa7b5..43d36b6fbc 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts @@ -8,12 +8,17 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4' import { MdViewFacade } from '../state' import { BehaviorSubject, combineLatest, map } from 'rxjs' import { GN_UI_VERSION } from '../gn-ui-version.token' +import { CopyTextButtonComponent } from '@geonetwork-ui/ui/inputs' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-data-view-web-component', templateUrl: './data-view-web-component.component.html', styleUrls: ['./data-view-web-component.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, CopyTextButtonComponent, TranslateModule], }) export class DataViewWebComponentComponent { viewType$ = new BehaviorSubject('map') diff --git a/libs/feature/record/src/lib/data-view/data-view.component.spec.ts b/libs/feature/record/src/lib/data-view/data-view.component.spec.ts index 8fcec52332..d66b0d6056 100644 --- a/libs/feature/record/src/lib/data-view/data-view.component.spec.ts +++ b/libs/feature/record/src/lib/data-view/data-view.component.spec.ts @@ -1,4 +1,3 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core' import { ComponentFixture, fakeAsync, @@ -6,16 +5,20 @@ import { TestBed, } from '@angular/core/testing' import { By } from '@angular/platform-browser' -import { BehaviorSubject, Subject } from 'rxjs' +import { Subject } from 'rxjs' import { MdViewFacade } from '../state' import { DataViewComponent } from './data-view.component' import { TranslateModule } from '@ngx-translate/core' -import { DatavizConfigurationModel } from '@geonetwork-ui/common/domain/model/dataviz/dataviz-configuration.model' -import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' import { someDataLinksFixture, someGeoDatalinksFixture, } from '@geonetwork-ui/common/fixtures' +import { MockBuilder } from 'ng-mocks' +import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' +import { + ChartViewComponent, + TableViewComponent, +} from '@geonetwork-ui/feature/dataviz' class MdViewFacadeMock { dataLinks$ = new Subject() @@ -30,49 +33,18 @@ const chartConfigMock = { chartType: 'bar', } -@Component({ - selector: 'gn-ui-table-view', - template: '
', -}) -export class MockTableViewComponent { - @Input() link: DatasetOnlineResource -} - -@Component({ - selector: 'gn-ui-chart-view', - template: '
', -}) -export class MockChartViewComponent { - @Input() link: DatasetOnlineResource - @Output() chartConfig$ = new BehaviorSubject(null) -} - -@Component({ - selector: 'gn-ui-dropdown-selector', - template: '
', -}) -export class MockDropdownSelectorComponent { - @Input() choices: unknown[] - @Input() showTitle - @Output() selectValue = new EventEmitter() -} - describe('DataViewComponent', () => { let component: DataViewComponent let fixture: ComponentFixture let facade - let dropdownComponent: MockDropdownSelectorComponent - let tableViewComponent: MockTableViewComponent - let chartViewComponent: MockChartViewComponent + let dropdownComponent: DropdownSelectorComponent + let tableViewComponent: TableViewComponent + let chartViewComponent: ChartViewComponent + + beforeEach(() => MockBuilder(DataViewComponent)) beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - DataViewComponent, - MockTableViewComponent, - MockChartViewComponent, - MockDropdownSelectorComponent, - ], providers: [ { provide: MdViewFacade, @@ -103,10 +75,10 @@ describe('DataViewComponent', () => { fixture.detectChanges() dropdownComponent = fixture.debugElement.query( - By.directive(MockDropdownSelectorComponent) + By.directive(DropdownSelectorComponent) ).componentInstance tableViewComponent = fixture.debugElement.query( - By.directive(MockTableViewComponent) + By.directive(TableViewComponent) ).componentInstance })) describe('when component is rendered', () => { @@ -155,18 +127,18 @@ describe('DataViewComponent', () => { component.mode = 'chart' fixture.detectChanges() chartViewComponent = fixture.debugElement.query( - By.directive(MockChartViewComponent) + By.directive(ChartViewComponent) ).componentInstance chartViewComponent.chartConfig$.next(chartConfigMock) })) it('creates a chart view component to render data', () => { expect( - fixture.debugElement.query(By.directive(MockChartViewComponent)) + fixture.debugElement.query(By.directive(ChartViewComponent)) ).toBeTruthy() }) it('does not create a table view component to render data', () => { expect( - fixture.debugElement.query(By.directive(MockTableViewComponent)) + fixture.debugElement.query(By.directive(TableViewComponent)) ).toBeFalsy() }) it('calls setChartConfig', () => { diff --git a/libs/feature/record/src/lib/data-view/data-view.component.ts b/libs/feature/record/src/lib/data-view/data-view.component.ts index d8e735c9df..89c227a1ff 100644 --- a/libs/feature/record/src/lib/data-view/data-view.component.ts +++ b/libs/feature/record/src/lib/data-view/data-view.component.ts @@ -10,12 +10,27 @@ import { map, tap } from 'rxjs/operators' import { MdViewFacade } from '../state' import { DatavizConfigurationModel } from '@geonetwork-ui/common/domain/model/dataviz/dataviz-configuration.model' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' +import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' +import { + ChartViewComponent, + TableViewComponent, +} from '@geonetwork-ui/feature/dataviz' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-data-view', templateUrl: './data-view.component.html', styleUrls: ['./data-view.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + DropdownSelectorComponent, + TableViewComponent, + TranslateModule, + ChartViewComponent, + ], }) export class DataViewComponent { @Input() mode: 'table' | 'chart' diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts index b6f1ef46df..efa4b13be1 100644 --- a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts +++ b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts @@ -1,4 +1,3 @@ -import { Component, EventEmitter, Output } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { By } from '@angular/platform-browser' import { @@ -6,25 +5,21 @@ import { EXTERNAL_VIEWER_URL_TEMPLATE, ExternalViewerButtonComponent, } from './external-viewer-button.component' +import { MockBuilder } from 'ng-mocks' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { importProvidersFrom } from '@angular/core' import { TranslateModule } from '@ngx-translate/core' -@Component({ - selector: 'gn-ui-button', - template: '
', -}) -export class MockButtonComponent { - @Output() buttonClick = new EventEmitter() -} - describe('ExternalViewerButtonComponent', () => { let component: ExternalViewerButtonComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(ExternalViewerButtonComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ExternalViewerButtonComponent, MockButtonComponent], - imports: [TranslateModule.forRoot()], providers: [ + importProvidersFrom(TranslateModule.forRoot()), { provide: EXTERNAL_VIEWER_URL_TEMPLATE, useValue: @@ -56,7 +51,7 @@ describe('ExternalViewerButtonComponent', () => { }) }) describe('with mapConfig and valid external links', () => { - let buttonComponent: MockButtonComponent + let buttonComponent: ButtonComponent let componentSpy let windowSpy const openMock = jest.fn().mockReturnThis() @@ -79,7 +74,7 @@ describe('ExternalViewerButtonComponent', () => { describe('click button', () => { beforeEach(() => { buttonComponent = fixture.debugElement.query( - By.directive(MockButtonComponent) + By.directive(ButtonComponent) ).componentInstance componentSpy = jest.spyOn(component, 'openInExternalViewer') windowSpy = jest @@ -127,7 +122,7 @@ describe('ExternalViewerButtonComponent', () => { describe('click button', () => { beforeEach(() => { buttonComponent = fixture.debugElement.query( - By.directive(MockButtonComponent) + By.directive(ButtonComponent) ).componentInstance componentSpy = jest.spyOn(component, 'openInExternalViewer') windowSpy = jest @@ -172,7 +167,7 @@ describe('ExternalViewerButtonComponent', () => { describe('click button', () => { beforeEach(() => { buttonComponent = fixture.debugElement.query( - By.directive(MockButtonComponent) + By.directive(ButtonComponent) ).componentInstance componentSpy = jest.spyOn(component, 'openInExternalViewer') windowSpy = jest diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts index 326eac72de..ec68aee03b 100644 --- a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts +++ b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts @@ -8,8 +8,12 @@ import { } from '@angular/core' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' import { marker } from '@biesbjerg/ngx-translate-extract-marker' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' import { getFileFormat } from '@geonetwork-ui/util/shared' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { CommonModule } from '@angular/common' +import { matOpenInNew } from '@ng-icons/material-icons/baseline' marker('externalviewer.dataset.unnamed') @@ -26,6 +30,9 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken( templateUrl: './external-viewer-button.component.html', styleUrls: ['./external-viewer-button.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, ButtonComponent, NgIcon, TranslateModule], + viewProviders: [provideIcons({ matOpenInNew })], }) export class ExternalViewerButtonComponent { @Input() link: DatasetOnlineResource diff --git a/libs/feature/record/src/lib/feature-record.module.ts b/libs/feature/record/src/lib/feature-record.module.ts index 855a62e344..eeca003147 100644 --- a/libs/feature/record/src/lib/feature-record.module.ts +++ b/libs/feature/record/src/lib/feature-record.module.ts @@ -1,48 +1,25 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' -import { - FeatureDetailComponent, - MapContainerComponent, -} from '@geonetwork-ui/ui/map' import { StoreModule } from '@ngrx/store' import { EffectsModule } from '@ngrx/effects' import { UiLayoutModule } from '@geonetwork-ui/ui/layout' -import { - FeatureMapModule, - MapStateContainerComponent, -} from '@geonetwork-ui/feature/map' +import { FeatureMapModule } from '@geonetwork-ui/feature/map' import { UiInputsModule } from '@geonetwork-ui/ui/inputs' import { UiElementsModule } from '@geonetwork-ui/ui/elements' import { MdViewFacade } from './state' import { MdViewEffects } from './state/mdview.effects' -import { MapViewComponent } from './map-view/map-view.component' -import { DataViewComponent } from './data-view/data-view.component' import { METADATA_VIEW_FEATURE_STATE_KEY, reducer, } from './state/mdview.reducer' import { MatTabsModule } from '@angular/material/tabs' -import { PopupAlertComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets' +import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets' import { TranslateModule } from '@ngx-translate/core' -import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component' import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog' import { TableComponent } from '@geonetwork-ui/ui/dataviz' -import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz' -import { DataViewPermalinkComponent } from './data-view-permalink/data-view-permalink.component' -import { DataViewWebComponentComponent } from './data-view-web-component/data-view-web-component.component' -import { DataViewShareComponent } from './data-view-share/data-view-share.component' import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core' -import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline' @NgModule({ - declarations: [ - MapViewComponent, - DataViewComponent, - ExternalViewerButtonComponent, - DataViewPermalinkComponent, - DataViewWebComponentComponent, - DataViewShareComponent, - ], imports: [ CommonModule, StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer), @@ -56,16 +33,7 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline' UiWidgetsModule, TranslateModule, TableComponent, - FeatureDatavizModule, - PopupAlertComponent, - FeatureDetailComponent, - MapStateContainerComponent, - MapContainerComponent, - // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone - NgIconsModule.withIcons({ - matClose, - matOpenInNew, - }), + NgIconsModule, ], providers: [ MdViewFacade, @@ -73,13 +41,5 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline' size: '1.5em', }), ], - exports: [ - MapViewComponent, - DataViewComponent, - DataViewPermalinkComponent, - DataViewWebComponentComponent, - DataViewShareComponent, - ExternalViewerButtonComponent, - ], }) export class FeatureRecordModule {} diff --git a/libs/feature/record/src/lib/map-view/map-view.component.spec.ts b/libs/feature/record/src/lib/map-view/map-view.component.spec.ts index 3d018c4a11..16ac477286 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.spec.ts +++ b/libs/feature/record/src/lib/map-view/map-view.component.spec.ts @@ -1,11 +1,4 @@ -import { - ChangeDetectorRef, - Component, - EventEmitter, - Input, - NO_ERRORS_SCHEMA, - Output, -} from '@angular/core' +import { ChangeDetectorRef, Component, Input } from '@angular/core' import { ComponentFixture, discardPeriodicTasks, @@ -25,12 +18,18 @@ import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures' import { Collection } from 'ol' import { Interaction } from 'ol/interaction' import { DataService } from '@geonetwork-ui/feature/dataviz' -import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' import * as geoSdkCore from '@geospatial-sdk/core' import { MapContext } from '@geospatial-sdk/core' -import { prioritizePageScroll } from '@geonetwork-ui/ui/map' +import { + MapContainerComponent, + prioritizePageScroll, +} from '@geonetwork-ui/ui/map' +import { MockBuilder } from 'ng-mocks' +import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component' +import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets' jest.mock('@geonetwork-ui/ui/map', () => ({ + ...jest.requireActual('@geonetwork-ui/ui/map'), prioritizePageScroll: jest.fn(), })) @@ -121,44 +120,13 @@ class InteractionsMock extends Collection {} @Component({ selector: 'gn-ui-map-container', template: '
', + standalone: true, }) export class MockMapContainerComponent { @Input() context: MapContext openlayersMap = Promise.resolve(new OpenLayersMapMock()) } -@Component({ - selector: 'gn-ui-dropdown-selector', - template: '
', -}) -export class MockDropdownSelectorComponent { - @Input() choices: unknown[] - @Input() showTitle - @Output() selectValue = new EventEmitter() -} - -@Component({ - selector: 'gn-ui-external-viewer-button', - template: '
', -}) -export class MockExternalViewerButtonComponent { - @Input() link: DatasetOnlineResource -} - -@Component({ - selector: 'gn-ui-loading-mask', - template: '
', -}) -export class MockLoadingMaskComponent { - @Input() message -} - -@Component({ - selector: 'gn-ui-popup-alert', - template: '
', -}) -export class MockPopupAlertComponent {} - describe('MapViewComponent', () => { let component: MapViewComponent let fixture: ComponentFixture @@ -170,17 +138,15 @@ describe('MapViewComponent', () => { geoSdkCore.returnImmediately(true) }) + beforeEach(() => + MockBuilder(MapViewComponent).replace( + MapContainerComponent, + MockMapContainerComponent + ) + ) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - MapViewComponent, - MockMapContainerComponent, - MockDropdownSelectorComponent, - MockExternalViewerButtonComponent, - MockLoadingMaskComponent, - MockPopupAlertComponent, - ], - schemas: [NO_ERRORS_SCHEMA], providers: [ { provide: MdViewFacade, @@ -216,14 +182,14 @@ describe('MapViewComponent', () => { describe('map layers', () => { let dropdownComponent: DropdownSelectorComponent - let externalViewerButtonComponent: MockExternalViewerButtonComponent + let externalViewerButtonComponent: ExternalViewerButtonComponent beforeEach(() => { dropdownComponent = fixture.debugElement.query( - By.directive(MockDropdownSelectorComponent) + By.directive(DropdownSelectorComponent) ).componentInstance externalViewerButtonComponent = fixture.debugElement.query( - By.directive(MockExternalViewerButtonComponent) + By.directive(ExternalViewerButtonComponent) ).componentInstance }) @@ -516,7 +482,7 @@ describe('MapViewComponent', () => { }) it('shows a loading indicator', () => { expect( - fixture.debugElement.query(By.directive(MockLoadingMaskComponent)) + fixture.debugElement.query(By.directive(LoadingMaskComponent)) ).toBeTruthy() }) }) @@ -548,7 +514,7 @@ describe('MapViewComponent', () => { it('does not show a loading indicator', () => { fixture.detectChanges() expect( - fixture.debugElement.query(By.directive(MockLoadingMaskComponent)) + fixture.debugElement.query(By.directive(LoadingMaskComponent)) ).toBeFalsy() }) }) diff --git a/libs/feature/record/src/lib/map-view/map-view.component.ts b/libs/feature/record/src/lib/map-view/map-view.component.ts index 953823db8f..9b16ef2ab3 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.ts +++ b/libs/feature/record/src/lib/map-view/map-view.component.ts @@ -34,16 +34,40 @@ import { MapContextLayer, } from '@geospatial-sdk/core' import { + FeatureDetailComponent, MapContainerComponent, prioritizePageScroll, } from '@geonetwork-ui/ui/map' import { Feature } from 'geojson' +import { NgIconComponent, provideIcons } from '@ng-icons/core' +import { matClose } from '@ng-icons/material-icons/baseline' +import { CommonModule } from '@angular/common' +import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' +import { TranslateModule } from '@ngx-translate/core' +import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component' +import { + LoadingMaskComponent, + PopupAlertComponent, +} from '@geonetwork-ui/ui/widgets' @Component({ selector: 'gn-ui-map-view', templateUrl: './map-view.component.html', styleUrls: ['./map-view.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + DropdownSelectorComponent, + MapContainerComponent, + FeatureDetailComponent, + PopupAlertComponent, + TranslateModule, + LoadingMaskComponent, + NgIconComponent, + ExternalViewerButtonComponent, + ], + viewProviders: [provideIcons({ matClose })], }) export class MapViewComponent implements AfterViewInit { @ViewChild('mapContainer') mapContainer: MapContainerComponent diff --git a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts index 9eca528262..d58ce87248 100644 --- a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts +++ b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.spec.ts @@ -37,8 +37,11 @@ describe('FavoriteStarComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [FavoriteStarComponent, StarToggleComponent], - imports: [TranslateModule.forRoot()], + imports: [ + TranslateModule.forRoot(), + FavoriteStarComponent, + StarToggleComponent, + ], providers: [ { provide: PlatformServiceInterface, @@ -66,7 +69,7 @@ describe('FavoriteStarComponent', () => { favoritesService = TestBed.inject(FavoritesService) fixture = TestBed.createComponent(FavoriteStarComponent) component = fixture.componentInstance - component.displayCount = 'true' + component.displayCount = true fixture.detectChanges() starToggle = fixture.debugElement.query( By.directive(StarToggleComponent) diff --git a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts index a6a9a1e8a1..d14ef66a4a 100644 --- a/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts +++ b/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts @@ -16,12 +16,15 @@ import { Observable, Subscription } from 'rxjs' import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' import { AuthService, FavoritesService } from '@geonetwork-ui/api/repository' import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-favorite-star', templateUrl: './favorite-star.component.html', styleUrls: ['./favorite-star.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, StarToggleComponent], }) export class FavoriteStarComponent implements AfterViewInit, OnDestroy { @Input() displayCount? = true diff --git a/libs/feature/search/src/lib/feature-search.module.ts b/libs/feature/search/src/lib/feature-search.module.ts index 331634fea2..32934d68af 100644 --- a/libs/feature/search/src/lib/feature-search.module.ts +++ b/libs/feature/search/src/lib/feature-search.module.ts @@ -16,12 +16,15 @@ import { ResultsHitsContainerComponent } from './results-hits-number/results-hit import { SearchStateContainerDirective } from './state/container/search-state.container.directive' import { AutocompleteComponent, UiInputsModule } from '@geonetwork-ui/ui/inputs' import { NgModule } from '@angular/core' -import { UiElementsModule } from '@geonetwork-ui/ui/elements' -import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component' +import { ErrorComponent, UiElementsModule } from '@geonetwork-ui/ui/elements' import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component' -import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets' +import { + SpinningLoaderComponent, + UiWidgetsModule, +} from '@geonetwork-ui/ui/widgets' import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface' import { Gn4Repository } from '@geonetwork-ui/api/repository' +import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component' @NgModule({ declarations: [ @@ -32,7 +35,6 @@ import { Gn4Repository } from '@geonetwork-ui/api/repository' ResultsListContainerComponent, ResultsHitsContainerComponent, SearchStateContainerDirective, - FavoriteStarComponent, FilterDropdownComponent, ], imports: [ @@ -50,6 +52,9 @@ import { Gn4Repository } from '@geonetwork-ui/api/repository' FacetsModule, UiWidgetsModule, AutocompleteComponent, + SpinningLoaderComponent, + ErrorComponent, + FavoriteStarComponent, ], exports: [ SortByComponent, @@ -60,7 +65,6 @@ import { Gn4Repository } from '@geonetwork-ui/api/repository' ResultsHitsContainerComponent, FacetsModule, SearchStateContainerDirective, - FavoriteStarComponent, FilterDropdownComponent, ], providers: [ diff --git a/libs/ui/catalog/src/index.ts b/libs/ui/catalog/src/index.ts index 6e32ac7e87..ed6b54668a 100644 --- a/libs/ui/catalog/src/index.ts +++ b/libs/ui/catalog/src/index.ts @@ -1,4 +1,3 @@ -export * from './lib/ui-catalog.module' export * from './lib/catalog-title/catalog-title.component' export * from './lib/language-switcher/language-switcher.component' export * from './lib/organisation-preview/organisation-preview.component' diff --git a/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.spec.ts b/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.spec.ts index 113dc6414f..009ac7b953 100644 --- a/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.spec.ts +++ b/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.spec.ts @@ -1,16 +1,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { CatalogTitleComponent } from './catalog-title.component' +import { MockBuilder } from 'ng-mocks' describe('CatalogTitleComponent', () => { let component: CatalogTitleComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [CatalogTitleComponent], - }).compileComponents() - }) + beforeEach(() => MockBuilder(CatalogTitleComponent)) beforeEach(() => { fixture = TestBed.createComponent(CatalogTitleComponent) diff --git a/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts b/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts index 73726780d6..a567c779f8 100644 --- a/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts +++ b/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts @@ -1,9 +1,12 @@ import { Component, Input } from '@angular/core' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-catalog-title', templateUrl: './catalog-title.component.html', styleUrls: ['./catalog-title.component.css'], + standalone: true, + imports: [CommonModule], }) export class CatalogTitleComponent { @Input() name: string diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.spec.ts b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.spec.ts index 38fb3d77e8..a1458744e7 100644 --- a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.spec.ts +++ b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.spec.ts @@ -2,10 +2,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { LANGUAGE_STORAGE_KEY } from '@geonetwork-ui/util/i18n' import { TranslateService } from '@ngx-translate/core' import { LanguageSwitcherComponent } from './language-switcher.component' +import { MockBuilder } from 'ng-mocks' class TranslateServiceMock { use = jest.fn() currentLang = 'en' + get = jest.fn() } window.console.warn = jest.fn() @@ -15,9 +17,10 @@ describe('LanguageSwitcherComponent', () => { let fixture: ComponentFixture let service: TranslateService + beforeEach(() => MockBuilder(LanguageSwitcherComponent)) + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LanguageSwitcherComponent], providers: [ { provide: TranslateService, diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts index 0c103ac287..d28c36cbfb 100644 --- a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts +++ b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts @@ -1,6 +1,7 @@ import { Component, Inject, InjectionToken, Optional } from '@angular/core' import { LANGUAGE_STORAGE_KEY } from '@geonetwork-ui/util/i18n' import { TranslateService } from '@ngx-translate/core' +import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' export const LANGUAGES_LIST = new InjectionToken('languages-list') @@ -10,6 +11,8 @@ const DEFAULT_LANGUAGES = ['en', 'fr'] selector: 'gn-ui-language-switcher', templateUrl: './language-switcher.component.html', styleUrls: ['./language-switcher.component.css'], + imports: [DropdownSelectorComponent], + standalone: true, }) export class LanguageSwitcherComponent { languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map( diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.spec.ts b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.spec.ts index 048255d6b0..8883bc32d0 100644 --- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.spec.ts +++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.spec.ts @@ -1,21 +1,12 @@ -import { Component, Input } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { OrganisationPreviewComponent } from './organisation-preview.component' - -@Component({ - selector: 'gn-ui-thumbnail', - template: '
', -}) -class RecordThumbnailMockComponent { - @Input() thumbnailUrl: string - @Input() fit: string -} +import { MockBuilder } from 'ng-mocks' const organisationMock = { name: 'my org', description: 'not much', - logoUrl: 'https://mygreatlogo.org', + logoUrl: new URL('https://mygreatlogo.org'), recordCount: 10, } @@ -23,14 +14,9 @@ describe('OrganisationPreviewComponent', () => { let component: OrganisationPreviewComponent let fixture: ComponentFixture - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - OrganisationPreviewComponent, - RecordThumbnailMockComponent, - ], - }).compileComponents() + beforeEach(() => MockBuilder(OrganisationPreviewComponent)) + beforeEach(() => { fixture = TestBed.createComponent(OrganisationPreviewComponent) component = fixture.componentInstance component.organization = organisationMock diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.stories.ts b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.stories.ts index 35702801fa..6a82644224 100644 --- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.stories.ts +++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.stories.ts @@ -12,7 +12,6 @@ import { UtilI18nModule, } from '@geonetwork-ui/util/i18n' import { UtilSharedModule } from '@geonetwork-ui/util/shared' -import { ThumbnailComponent } from '@geonetwork-ui/ui/elements' import { OrganisationPreviewComponent } from './organisation-preview.component' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { importProvidersFrom } from '@angular/core' @@ -28,7 +27,6 @@ export default { ], }), moduleMetadata({ - declarations: [ThumbnailComponent], imports: [ UtilI18nModule, UtilSharedModule, diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts index c8eae909ce..4bd51aef1c 100644 --- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts +++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts @@ -6,12 +6,23 @@ import { Output, } from '@angular/core' import { Organization } from '@geonetwork-ui/common/domain/model/record' +import { ThumbnailComponent } from '@geonetwork-ui/ui/elements' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { tablerFolderOpen } from '@ng-icons/tabler-icons' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-organisation-preview', templateUrl: './organisation-preview.component.html', styleUrls: ['./organisation-preview.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ThumbnailComponent, NgIcon, TranslateModule], + viewProviders: [ + provideIcons({ + tablerFolderOpen, + }), + ], + standalone: true, }) export class OrganisationPreviewComponent { @Input() organization: Organization diff --git a/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts index 62adb35991..9dd32b8639 100644 --- a/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts +++ b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts @@ -10,14 +10,12 @@ import { UtilI18nModule, } from '@geonetwork-ui/util/i18n' import { OrganisationsFilterComponent } from './organisations-filter.component' -import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' export default { title: 'Catalog/OrganisationsFilterComponent', component: OrganisationsFilterComponent, decorators: [ moduleMetadata({ - declarations: [DropdownSelectorComponent], imports: [ UtilI18nModule, TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG), diff --git a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts index 4c9a6314a7..69629bc20d 100644 --- a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts +++ b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts @@ -1,15 +1,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { OrganisationsResultComponent } from './organisations-result.component' +import { MockBuilder } from 'ng-mocks' describe('OrganisationsResultComponent', () => { let component: OrganisationsResultComponent let fixture: ComponentFixture + beforeEach(() => MockBuilder(OrganisationsResultComponent)) + beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [OrganisationsResultComponent], - }) fixture = TestBed.createComponent(OrganisationsResultComponent) component = fixture.componentInstance fixture.detectChanges() diff --git a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts index 3ed741624b..d98b4d1c90 100644 --- a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts +++ b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts @@ -1,9 +1,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-organisations-result', templateUrl: './organisations-result.component.html', changeDetection: ChangeDetectionStrategy.OnPush, + imports: [TranslateModule], + standalone: true, }) export class OrganisationsResultComponent { @Input() hits: number diff --git a/libs/ui/catalog/src/lib/ui-catalog.module.ts b/libs/ui/catalog/src/lib/ui-catalog.module.ts deleted file mode 100644 index d5ed56289e..0000000000 --- a/libs/ui/catalog/src/lib/ui-catalog.module.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { NgModule } from '@angular/core' -import { CommonModule } from '@angular/common' -import { CatalogTitleComponent } from './catalog-title/catalog-title.component' -import { OrganisationPreviewComponent } from './organisation-preview/organisation-preview.component' -import { TranslateModule } from '@ngx-translate/core' -import { UiElementsModule } from '@geonetwork-ui/ui/elements' -import { UiInputsModule } from '@geonetwork-ui/ui/inputs' -import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component' -import { OrganisationsResultComponent } from './organisations-result/organisations-result.component' -import { RouterLink } from '@angular/router' -import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core' -import { tablerFolderOpen } from '@ng-icons/tabler-icons' -@NgModule({ - declarations: [ - CatalogTitleComponent, - OrganisationPreviewComponent, - LanguageSwitcherComponent, - OrganisationsResultComponent, - ], - imports: [ - CommonModule, - TranslateModule.forChild(), - UiElementsModule, - UiInputsModule, - RouterLink, - // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone - NgIconsModule.withIcons({ - tablerFolderOpen, - }), - ], - providers: [ - provideNgIconsConfig({ - size: '1.5em', - }), - ], - exports: [ - CatalogTitleComponent, - OrganisationPreviewComponent, - LanguageSwitcherComponent, - OrganisationsResultComponent, - ], -}) -export class UiCatalogModule {} 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') }) diff --git a/libs/ui/dataviz/src/lib/figure/figure.component.stories.ts b/libs/ui/dataviz/src/lib/figure/figure.component.stories.ts index 0f701413c2..6e805a5eb6 100644 --- a/libs/ui/dataviz/src/lib/figure/figure.component.stories.ts +++ b/libs/ui/dataviz/src/lib/figure/figure.component.stories.ts @@ -9,6 +9,8 @@ import { FigureComponent } from './figure.component' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { UiDatavizModule } from '../ui-dataviz.module' import { importProvidersFrom } from '@angular/core' +import { TranslateModule } from '@ngx-translate/core' +import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n' export default { title: 'Dataviz/FigureComponent', @@ -18,7 +20,10 @@ export default { imports: [UiDatavizModule], }), applicationConfig({ - providers: [importProvidersFrom(BrowserAnimationsModule)], + providers: [ + importProvidersFrom(BrowserAnimationsModule), + importProvidersFrom(TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG)), + ], }), componentWrapperDecorator( (story) => ` diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.html b/libs/ui/elements/src/lib/api-card/api-card.component.html index b357a5216e..1068c6a7ac 100644 --- a/libs/ui/elements/src/lib/api-card/api-card.component.html +++ b/libs/ui/elements/src/lib/api-card/api-card.component.html @@ -28,7 +28,6 @@ 'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white': displayText }" - mat-raised-button [matTooltip]=" !currentlyActive ? ('record.metadata.api.form.openForm' | translate) diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts index 2da1df059b..0ae0e05a18 100644 --- a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts +++ b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts @@ -9,8 +9,7 @@ describe('ApiCardComponent', () => { let openRecordApiFormEmit beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ApiCardComponent], - imports: [TranslateModule.forRoot()], + imports: [ApiCardComponent, TranslateModule.forRoot()], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.stories.ts b/libs/ui/elements/src/lib/api-card/api-card.component.stories.ts index afcd18a5f5..61d1442b05 100644 --- a/libs/ui/elements/src/lib/api-card/api-card.component.stories.ts +++ b/libs/ui/elements/src/lib/api-card/api-card.component.stories.ts @@ -12,14 +12,12 @@ import { } from '@storybook/angular' import { ApiCardComponent } from './api-card.component' import { MatTooltipModule } from '@angular/material/tooltip' -import { CopyTextButtonComponent } from '@geonetwork-ui/ui/libs/copy-text-button' export default { title: 'Elements/ApiCardComponent', component: ApiCardComponent, decorators: [ moduleMetadata({ - declarations: [CopyTextButtonComponent], imports: [ UtilI18nModule, TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG), diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.ts b/libs/ui/elements/src/lib/api-card/api-card.component.ts index 90cdaae443..b8e7e53ce6 100644 --- a/libs/ui/elements/src/lib/api-card/api-card.component.ts +++ b/libs/ui/elements/src/lib/api-card/api-card.component.ts @@ -9,12 +9,31 @@ import { Output, SimpleChanges, } from '@angular/core' +import { CommonModule } from '@angular/common' +import { CopyTextButtonComponent } from '@geonetwork-ui/ui/inputs' +import { TranslateModule } from '@ngx-translate/core' +import { MatTooltipModule } from '@angular/material/tooltip' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { matMoreHoriz } from '@ng-icons/material-icons/baseline' @Component({ selector: 'gn-ui-api-card', templateUrl: './api-card.component.html', styleUrls: ['./api-card.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + CopyTextButtonComponent, + TranslateModule, + MatTooltipModule, + NgIcon, + ], + viewProviders: [ + provideIcons({ + matMoreHoriz, + }), + ], }) export class ApiCardComponent implements OnInit, OnChanges { @Input() link: DatasetServiceDistribution diff --git a/libs/ui/elements/src/lib/content-ghost/content-ghost.component.spec.ts b/libs/ui/elements/src/lib/content-ghost/content-ghost.component.spec.ts index ea3f4da05b..0d86654741 100644 --- a/libs/ui/elements/src/lib/content-ghost/content-ghost.component.spec.ts +++ b/libs/ui/elements/src/lib/content-ghost/content-ghost.component.spec.ts @@ -8,7 +8,7 @@ describe('ContentGhostComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ContentGhostComponent], + imports: [ContentGhostComponent], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts b/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts index 6421532701..c5375c773b 100644 --- a/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts +++ b/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts @@ -1,10 +1,13 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-content-ghost', templateUrl: './content-ghost.component.html', styleUrls: ['./content-ghost.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule], }) export class ContentGhostComponent { @Input() showContent: boolean diff --git a/libs/ui/elements/src/lib/download-item/download-item.component.spec.ts b/libs/ui/elements/src/lib/download-item/download-item.component.spec.ts index ab3d651181..cdb6ac203c 100644 --- a/libs/ui/elements/src/lib/download-item/download-item.component.spec.ts +++ b/libs/ui/elements/src/lib/download-item/download-item.component.spec.ts @@ -10,8 +10,7 @@ describe('DownloadsListItemComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DownloadItemComponent], - imports: [TranslateModule.forRoot()], + imports: [DownloadItemComponent, TranslateModule.forRoot()], }) .overrideComponent(DownloadItemComponent, { set: { changeDetection: ChangeDetectionStrategy.Default }, diff --git a/libs/ui/elements/src/lib/download-item/download-item.component.ts b/libs/ui/elements/src/lib/download-item/download-item.component.ts index 9fdac82648..64768ffb6b 100644 --- a/libs/ui/elements/src/lib/download-item/download-item.component.ts +++ b/libs/ui/elements/src/lib/download-item/download-item.component.ts @@ -6,12 +6,23 @@ import { Output, } from '@angular/core' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' +import { TranslateModule } from '@ngx-translate/core' +import { CommonModule } from '@angular/common' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline' @Component({ selector: 'gn-ui-download-item', templateUrl: './download-item.component.html', styleUrls: ['./download-item.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + imports: [CommonModule, TranslateModule, NgIcon], + standalone: true, + viewProviders: [ + provideIcons({ + matCloudDownloadOutline, + }), + ], }) export class DownloadItemComponent { @Input() link: DatasetOnlineResource diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts index 323c29eab9..d3e9da48d7 100644 --- a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts +++ b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts @@ -1,8 +1,6 @@ import { ChangeDetectionStrategy, - Component, DebugElement, - Input, NO_ERRORS_SCHEMA, } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' @@ -11,21 +9,8 @@ import { LinkClassifierService } from '@geonetwork-ui/util/shared' import { aSetOfLinksFixture } from '@geonetwork-ui/common/fixtures' import { TranslateModule } from '@ngx-translate/core' import { DownloadsListComponent } from './downloads-list.component' -import { - DatasetDownloadDistribution, - DatasetOnlineResource, -} from '@geonetwork-ui/common/domain/model/record' - -@Component({ - selector: 'gn-ui-download-item', - template: ``, -}) -class MockDownloadItemComponent { - @Input() link: DatasetOnlineResource - @Input() color: string - @Input() format: string - @Input() isFromWfs: boolean -} +import { DatasetDownloadDistribution } from '@geonetwork-ui/common/domain/model/record' +import { DownloadItemComponent } from '../download-item/download-item.component' describe('DownloadsListComponent', () => { let component: DownloadsListComponent @@ -34,13 +19,14 @@ describe('DownloadsListComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot()], - declarations: [DownloadsListComponent, MockDownloadItemComponent], + imports: [TranslateModule.forRoot(), DownloadsListComponent], schemas: [NO_ERRORS_SCHEMA], providers: [LinkClassifierService], }) .overrideComponent(DownloadsListComponent, { - set: { changeDetection: ChangeDetectionStrategy.Default }, + set: { + changeDetection: ChangeDetectionStrategy.Default, + }, }) .compileComponents() }) @@ -67,7 +53,7 @@ describe('DownloadsListComponent', () => { aSetOfLinksFixture().dataPdf(), ] fixture.detectChanges() - items = de.queryAll(By.directive(MockDownloadItemComponent)) + items = de.queryAll(By.directive(DownloadItemComponent)) }) it('contains three links', () => { expect(items.length).toBe(3) @@ -93,7 +79,7 @@ describe('DownloadsListComponent', () => { beforeEach(() => { component.links = [aSetOfLinksFixture().unknownFormat()] fixture.detectChanges() - items = de.queryAll(By.directive(MockDownloadItemComponent)) + items = de.queryAll(By.directive(DownloadItemComponent)) }) it('contains one link in "others" section', () => { expect(items.length).toBe(1) @@ -111,7 +97,7 @@ describe('DownloadsListComponent', () => { } as DatasetDownloadDistribution, ] fixture.detectChanges() - items = de.queryAll(By.directive(MockDownloadItemComponent)) + items = de.queryAll(By.directive(DownloadItemComponent)) }) it('contains one link and mime type is ignored', () => { expect(items.length).toBe(1) @@ -124,7 +110,7 @@ describe('DownloadsListComponent', () => { beforeEach(() => { component.links = [aSetOfLinksFixture().geodataShpWithMimeType()] fixture.detectChanges() - items = de.queryAll(By.directive(MockDownloadItemComponent)) + items = de.queryAll(By.directive(DownloadItemComponent)) }) it('contains color, isWfs & format', () => { expect(items.length).toBe(1) @@ -144,7 +130,7 @@ describe('DownloadsListComponent', () => { beforeEach(() => { component.links = [aSetOfLinksFixture().geodataWfsDownload()] fixture.detectChanges() - items = de.queryAll(By.directive(MockDownloadItemComponent)) + items = de.queryAll(By.directive(DownloadItemComponent)) }) it('sets isFromWfs to true', () => { expect(items[0].componentInstance.isFromWfs).toEqual(true) diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts index 5a5aae0c9e..ca9f61cfec 100644 --- a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts +++ b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts @@ -1,8 +1,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' -import { TranslateService } from '@ngx-translate/core' +import { TranslateModule, TranslateService } from '@ngx-translate/core' import { marker } from '@biesbjerg/ngx-translate-extract-marker' import { getBadgeColor, getFileFormat } from '@geonetwork-ui/util/shared' import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record' +import { CommonModule } from '@angular/common' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { DownloadItemComponent } from '../download-item/download-item.component' marker('datahub.search.filter.all') marker('datahub.search.filter.others') @@ -15,6 +18,13 @@ type FilterFormat = typeof FILTER_FORMATS[number] templateUrl: './downloads-list.component.html', styleUrls: ['./downloads-list.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + ButtonComponent, + DownloadItemComponent, + TranslateModule, + ], }) export class DownloadsListComponent { constructor(private translateService: TranslateService) {} diff --git a/libs/ui/elements/src/lib/error/error.component.spec.ts b/libs/ui/elements/src/lib/error/error.component.spec.ts index e0bf10b72b..1499ea5460 100644 --- a/libs/ui/elements/src/lib/error/error.component.spec.ts +++ b/libs/ui/elements/src/lib/error/error.component.spec.ts @@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { ErrorComponent, ErrorType } from './error.component' import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core' import { By } from '@angular/platform-browser' +import { TranslateModule } from '@ngx-translate/core' describe('ErrorComponent', () => { let component: ErrorComponent @@ -11,7 +12,7 @@ describe('ErrorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ErrorComponent], + imports: [ErrorComponent, TranslateModule.forRoot()], schemas: [NO_ERRORS_SCHEMA], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/error/error.component.ts b/libs/ui/elements/src/lib/error/error.component.ts index a7b79425b0..6b0492d0e1 100644 --- a/libs/ui/elements/src/lib/error/error.component.ts +++ b/libs/ui/elements/src/lib/error/error.component.ts @@ -1,4 +1,13 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { CommonModule } from '@angular/common' +import { + matFace, + matMoodBad, + matQuestionMark, +} from '@ng-icons/material-icons/baseline' +import { matComputerOutline } from '@ng-icons/material-icons/outline' +import { TranslateModule } from '@ngx-translate/core' export enum ErrorType { COULD_NOT_REACH_API, @@ -14,6 +23,16 @@ export enum ErrorType { templateUrl: './error.component.html', styleUrls: ['./error.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, NgIcon, TranslateModule], + viewProviders: [ + provideIcons({ + matFace, + matQuestionMark, + matMoodBad, + matComputerOutline, + }), + ], }) export class ErrorComponent { @Input() type!: ErrorType diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html index 8a5ad0c93d..3afe7e675f 100644 --- a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html +++ b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html @@ -4,9 +4,8 @@ >
{ beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ImageOverlayPreviewComponent], + imports: [ImageOverlayPreviewComponent], }) fixture = TestBed.createComponent(ImageOverlayPreviewComponent) component = fixture.componentInstance diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts index c7f24db928..dacf6ad520 100644 --- a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts +++ b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts @@ -1,10 +1,25 @@ import { Component, EventEmitter, Input, Output } from '@angular/core' import * as basicLightbox from 'basiclightbox' +import { ContentGhostComponent } from '../content-ghost/content-ghost.component' +import { ThumbnailComponent } from '../thumbnail/thumbnail.component' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { matZoomOutMap } from '@ng-icons/material-icons/baseline' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-image-overlay-preview', templateUrl: './image-overlay-preview.component.html', styleUrls: ['./image-overlay-preview.component.css'], + standalone: true, + imports: [ + CommonModule, + ContentGhostComponent, + ThumbnailComponent, + ButtonComponent, + NgIcon, + ], + viewProviders: [provideIcons({ matZoomOutMap })], }) export class ImageOverlayPreviewComponent { @Input() imageUrl: string diff --git a/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.spec.ts b/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.spec.ts index 975d690f34..6731bb9fb8 100644 --- a/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.spec.ts +++ b/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.spec.ts @@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { By } from '@angular/platform-browser' import { MetadataCatalogComponent } from './metadata-catalog.component' +import { TranslateModule } from '@ngx-translate/core' describe('MetadataCatalogComponent', () => { let component: MetadataCatalogComponent @@ -9,7 +10,7 @@ describe('MetadataCatalogComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [MetadataCatalogComponent], + imports: [MetadataCatalogComponent, TranslateModule.forRoot()], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.ts b/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.ts index b3e3ffdc34..6d8b2e6a81 100644 --- a/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.ts +++ b/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.ts @@ -1,10 +1,13 @@ -import { Component, ChangeDetectionStrategy, Input } from '@angular/core' +import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-metadata-catalog', templateUrl: './metadata-catalog.component.html', styleUrls: ['./metadata-catalog.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [TranslateModule], }) export class MetadataCatalogComponent { @Input() sourceLabel: string diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.spec.ts b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.spec.ts index 29b27ac1de..e81d468ac6 100644 --- a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.spec.ts +++ b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.spec.ts @@ -2,6 +2,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' import { By } from '@angular/platform-browser' import { MetadataContactComponent } from './metadata-contact.component' +import { TranslateModule } from '@ngx-translate/core' describe('MetadataContactComponent', () => { let component: MetadataContactComponent @@ -9,7 +10,7 @@ describe('MetadataContactComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [MetadataContactComponent], + imports: [MetadataContactComponent, TranslateModule.forRoot()], schemas: [NO_ERRORS_SCHEMA], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts index 38ace97c9a..fbfbf96564 100644 --- a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts +++ b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts @@ -10,12 +10,36 @@ import { Individual, Organization, } from '@geonetwork-ui/common/domain/model/record' +import { ThumbnailComponent } from '../thumbnail/thumbnail.component' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { + matMailOutline, + matOpenInNew, + matPersonOutline, +} from '@ng-icons/material-icons/baseline' +import { + matCallOutline, + matLocationOnOutline, +} from '@ng-icons/material-icons/outline' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-metadata-contact', templateUrl: './metadata-contact.component.html', styleUrls: ['./metadata-contact.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CommonModule, ThumbnailComponent, NgIcon, TranslateModule], + viewProviders: [ + provideIcons({ + matOpenInNew, + matCallOutline, + matMailOutline, + matPersonOutline, + matLocationOnOutline, + }), + ], }) export class MetadataContactComponent { @Input() metadata: Partial diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts index 0cc2edc61f..8f2cd4cab0 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts @@ -1,7 +1,8 @@ -import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing' +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing' import { Component, DebugElement } from '@angular/core' import { By } from '@angular/platform-browser' import { GnUiLinkifyDirective } from './linkify.directive' +import { CommonModule } from '@angular/common' const testingUrls = [ ['First link http://bla.org no slash', 'http://bla.org'], @@ -81,6 +82,8 @@ const testWithHTML = {
{{ text }}
`, + standalone: true, + imports: [CommonModule, GnUiLinkifyDirective], }) class TestComponent { text = '' @@ -94,7 +97,7 @@ describe('GnUiLinkifyDirective', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [GnUiLinkifyDirective, TestComponent], + imports: [GnUiLinkifyDirective, TestComponent], }) fixture = TestBed.createComponent(TestComponent) diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.stories.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.stories.ts index 2d55fd76ce..d6e4484bfd 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.stories.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.stories.ts @@ -5,7 +5,7 @@ export default { title: 'Elements/GnUiLinkifyDirective', decorators: [ moduleMetadata({ - declarations: [GnUiLinkifyDirective], + imports: [GnUiLinkifyDirective], }), ], } as Meta diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts index a25a826f62..355b1ce521 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts @@ -1,8 +1,9 @@ /* eslint-disable @angular-eslint/directive-selector */ -import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core' +import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core' @Directive({ selector: '[gnUiLinkify]', + standalone: true, }) export class GnUiLinkifyDirective implements OnInit { constructor(private el: ElementRef, private renderer: Renderer2) {} diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts index 655ce4f6ff..87f80cc0a8 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { UtilSharedModule } from '@geonetwork-ui/util/shared' import { TranslateModule } from '@ngx-translate/core' -import { ContentGhostComponent } from '../content-ghost/content-ghost.component' import { MetadataInfoComponent } from './metadata-info.component' import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures' import { TranslateTestingModule } from 'ngx-translate-testing' @@ -26,8 +25,8 @@ describe('MetadataInfoComponent', () => { }) .withDefaultLanguage('en') .withCompiler(new TranslateMessageFormatCompiler()), + MetadataInfoComponent, ], - declarations: [MetadataInfoComponent, ContentGhostComponent], }).compileComponents() }) diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.stories.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.stories.ts index 9c9a2032f3..9846fc6863 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.stories.ts +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.stories.ts @@ -11,7 +11,6 @@ import { } from '@storybook/angular' import { MetadataInfoComponent } from './metadata-info.component' import { UtilSharedModule } from '@geonetwork-ui/util/shared' -import { ContentGhostComponent } from '../content-ghost/content-ghost.component' import { datasetRecordsFixture } from '@geonetwork-ui/common/fixtures' import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record' @@ -20,7 +19,6 @@ export default { component: MetadataInfoComponent, decorators: [ moduleMetadata({ - declarations: [ContentGhostComponent], imports: [ UtilI18nModule, TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG), diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts index 55379fc5fe..21b363ad77 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts @@ -10,12 +10,49 @@ import { Keyword, } from '@geonetwork-ui/common/domain/model/record' import { getTemporalRangeUnion } from '@geonetwork-ui/util/shared' +import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component' +import { + ExpandablePanelComponent, + MaxLinesComponent, +} from '@geonetwork-ui/ui/layout' +import { TranslateModule } from '@ngx-translate/core' +import { + BadgeComponent, + CopyTextButtonComponent, +} from '@geonetwork-ui/ui/inputs' +import { ContentGhostComponent } from '../content-ghost/content-ghost.component' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { CommonModule } from '@angular/common' +import { matOpenInNew } from '@ng-icons/material-icons/baseline' +import { matMailOutline } from '@ng-icons/material-icons/outline' +import { ThumbnailComponent } from '../thumbnail/thumbnail.component' +import { GnUiLinkifyDirective } from './linkify.directive' @Component({ selector: 'gn-ui-metadata-info', templateUrl: './metadata-info.component.html', styleUrls: ['./metadata-info.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + TranslateModule, + MarkdownParserComponent, + ExpandablePanelComponent, + BadgeComponent, + ContentGhostComponent, + ThumbnailComponent, + MaxLinesComponent, + CopyTextButtonComponent, + NgIcon, + GnUiLinkifyDirective, + ], + viewProviders: [ + provideIcons({ + matOpenInNew, + matMailOutline, + }), + ], }) export class MetadataInfoComponent { @Input() metadata: Partial diff --git a/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.spec.ts b/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.spec.ts index 8e7b1e4036..3d069262fb 100644 --- a/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.spec.ts +++ b/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.spec.ts @@ -1,10 +1,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { UtilI18nModule } from '@geonetwork-ui/util/i18n' -import { UtilSharedModule } from '@geonetwork-ui/util/shared' import { TranslateModule } from '@ngx-translate/core' import { MetadataQualityItemComponent } from './metadata-quality-item.component' import { By } from '@angular/platform-browser' -import { CommonModule } from '@angular/common' +import { ChangeDetectionStrategy } from '@angular/core' describe('MetadataQualityInfoComponent', () => { let component: MetadataQualityItemComponent @@ -12,14 +11,16 @@ describe('MetadataQualityInfoComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [MetadataQualityItemComponent], imports: [ - UtilSharedModule, - CommonModule, + MetadataQualityItemComponent, UtilI18nModule, TranslateModule.forRoot(), ], - }).compileComponents() + }) + .overrideComponent(MetadataQualityItemComponent, { + set: { changeDetection: ChangeDetectionStrategy.Default }, + }) + .compileComponents() }) beforeEach(() => { @@ -36,8 +37,7 @@ describe('MetadataQualityInfoComponent', () => { component.value = true fixture.detectChanges() - const iconElement = fixture.nativeElement.querySelector('ng-icon') - expect(iconElement.name).toBe('matCheck') + expect(component.icon).toBe('matCheck') const textElement = fixture.debugElement.query(By.css('.text')) expect(textElement.nativeElement.innerHTML).toBe( @@ -50,8 +50,7 @@ describe('MetadataQualityInfoComponent', () => { component.value = false fixture.detectChanges() - const iconElement = fixture.nativeElement.querySelector('ng-icon') - expect(iconElement.name).toBe('matWarningAmber') + expect(component.icon).toBe('matWarningAmber') const textElement = fixture.debugElement.query(By.css('.text')) expect(textElement.nativeElement.innerHTML).toBe( @@ -64,8 +63,7 @@ describe('MetadataQualityInfoComponent', () => { component.value = true fixture.detectChanges() - const iconElement = fixture.nativeElement.querySelector('ng-icon') - expect(iconElement.name).toBe('matCheck') + expect(component.icon).toBe('matCheck') const textElement = fixture.debugElement.query(By.css('.text')) expect(textElement.nativeElement.innerHTML).toBe( @@ -78,8 +76,7 @@ describe('MetadataQualityInfoComponent', () => { component.value = false fixture.detectChanges() - const iconElement = fixture.nativeElement.querySelector('ng-icon') - expect(iconElement.name).toBe('matWarningAmber') + expect(component.icon).toBe('matWarningAmber') const textElement = fixture.debugElement.query(By.css('.text')) expect(textElement.nativeElement.innerHTML).toBe( diff --git a/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts b/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts index 95f1571abc..0cada97d7e 100644 --- a/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts +++ b/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts @@ -1,5 +1,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { marker } from '@biesbjerg/ngx-translate-extract-marker' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { TranslateModule } from '@ngx-translate/core' +import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline' marker('record.metadata.quality.title.success') marker('record.metadata.quality.title.failed') @@ -27,6 +30,9 @@ export interface MetadataQualityItem { selector: 'gn-ui-metadata-quality-item', templateUrl: './metadata-quality-item.component.html', changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgIcon, TranslateModule], + viewProviders: [provideIcons({ matCheck, matWarningAmber })], }) export class MetadataQualityItemComponent implements MetadataQualityItem { @Input() name: string diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts index 69d8dffd76..812d466ef0 100644 --- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts +++ b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts @@ -8,10 +8,7 @@ import { } from '@geonetwork-ui/util/i18n' import { TranslateModule } from '@ngx-translate/core' import { MetadataQualityItemComponent } from '../metadata-quality-item/metadata-quality-item.component' -import { - PopoverComponent, - ProgressBarComponent, -} from '@geonetwork-ui/ui/widgets' +import { PopoverComponent } from '@geonetwork-ui/ui/widgets' import { UtilSharedModule } from '@geonetwork-ui/util/shared' import { By } from '@angular/platform-browser' import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' @@ -35,12 +32,8 @@ describe('MetadataQualityComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - MetadataQualityComponent, - MetadataQualityItemComponent, - ProgressBarComponent, - ], imports: [ + MetadataQualityComponent, UtilSharedModule, CommonModule, UtilI18nModule, diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts index 5ebc30f32d..65ff37a4b8 100644 --- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts +++ b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts @@ -7,11 +7,7 @@ import { UtilI18nModule, } from '@geonetwork-ui/util/i18n' import { TranslateModule } from '@ngx-translate/core' -import { MetadataQualityItemComponent } from '../metadata-quality-item/metadata-quality-item.component' -import { - PopoverComponent, - ProgressBarComponent, -} from '@geonetwork-ui/ui/widgets' +import { PopoverComponent } from '@geonetwork-ui/ui/widgets' import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' export default { @@ -19,7 +15,6 @@ export default { component: MetadataQualityComponent, decorators: [ moduleMetadata({ - declarations: [ProgressBarComponent, MetadataQualityItemComponent], imports: [ CommonModule, UtilI18nModule, diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts index 6f604eb608..e73a807dc1 100644 --- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts +++ b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts @@ -5,14 +5,29 @@ import { OnChanges, SimpleChanges, } from '@angular/core' -import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component' +import { + MetadataQualityItem, + MetadataQualityItemComponent, +} from '../metadata-quality-item/metadata-quality-item.component' import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' +import { + PopoverComponent, + ProgressBarComponent, +} from '@geonetwork-ui/ui/widgets' +import { CommonModule } from '@angular/common' @Component({ selector: 'gn-ui-metadata-quality', templateUrl: './metadata-quality.component.html', styleUrls: ['./metadata-quality.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + PopoverComponent, + ProgressBarComponent, + MetadataQualityItemComponent, + ], }) export class MetadataQualityComponent implements OnChanges { @Input() metadata: Partial diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.spec.ts b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.spec.ts index 78479f6ec7..71735ad743 100644 --- a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.spec.ts +++ b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.spec.ts @@ -11,7 +11,7 @@ describe('PaginationButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [PaginationButtonsComponent], + imports: [PaginationButtonsComponent], }).compileComponents() fixture = TestBed.createComponent(PaginationButtonsComponent) diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts index 38f5f8b768..b69928c602 100644 --- a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts +++ b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts @@ -5,11 +5,23 @@ import { OnChanges, Output, } from '@angular/core' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { CommonModule } from '@angular/common' +import { iconoirNavArrowLeft, iconoirNavArrowRight } from '@ng-icons/iconoir' @Component({ selector: 'gn-ui-pagination-buttons', templateUrl: './pagination-buttons.component.html', styleUrls: ['./pagination-buttons.component.css'], + standalone: true, + imports: [CommonModule, ButtonComponent, NgIcon], + viewProviders: [ + provideIcons({ + iconoirNavArrowRight, + iconoirNavArrowLeft, + }), + ], }) export class PaginationButtonsComponent implements OnChanges { @Input() currentPage: number diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.html b/libs/ui/elements/src/lib/pagination/pagination.component.html index 775f02154a..9c9ac2a487 100644 --- a/libs/ui/elements/src/lib/pagination/pagination.component.html +++ b/libs/ui/elements/src/lib/pagination/pagination.component.html @@ -31,7 +31,6 @@ > { let component: PaginationComponent @@ -9,9 +11,7 @@ describe('PaginationComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [PaginationComponent], - schemas: [NO_ERRORS_SCHEMA], - imports: [], + imports: [PaginationComponent, TranslateModule.forRoot()], }) .overrideComponent(PaginationComponent, { set: { changeDetection: ChangeDetectionStrategy.Default }, @@ -52,15 +52,17 @@ describe('PaginationComponent', () => { }) }) - it('should navigation_next be disabled', () => { - const isDisabled = fixture.debugElement.query(By.css('#navigate_next')) - .nativeElement.disabled + it('should navigate_next be disabled', () => { + const isDisabled = fixture.debugElement.queryAll( + By.directive(ButtonComponent) + )[0].componentInstance.disabled expect(isDisabled).toBeTruthy() }) it('should navigate_previous be enabled', () => { - const isDisabled = fixture.debugElement.query(By.css('#navigate_previous')) - .nativeElement.disabled + const isDisabled = fixture.debugElement.queryAll( + By.directive(ButtonComponent) + )[1].componentInstance.disabled expect(isDisabled).toBeFalsy() }) }) diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.ts b/libs/ui/elements/src/lib/pagination/pagination.component.ts index d41bbbc333..67f5bd7546 100644 --- a/libs/ui/elements/src/lib/pagination/pagination.component.ts +++ b/libs/ui/elements/src/lib/pagination/pagination.component.ts @@ -7,12 +7,35 @@ import { Output, SimpleChanges, } from '@angular/core' +import { ButtonComponent } from '@geonetwork-ui/ui/inputs' +import { NgIcon, provideIcons } from '@ng-icons/core' +import { FormsModule } from '@angular/forms' +import { + matChevronLeft, + matChevronRight, +} from '@ng-icons/material-icons/baseline' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' @Component({ selector: 'gn-ui-pagination', templateUrl: './pagination.component.html', styleUrls: ['./pagination.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + ButtonComponent, + NgIcon, + FormsModule, + TranslateModule, + ], + viewProviders: [ + provideIcons({ + matChevronLeft, + matChevronRight, + }), + ], }) export class PaginationComponent implements OnChanges { @Input() currentPage = 1 diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.spec.ts b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.spec.ts index 9dca9ca78f..834f165e55 100644 --- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.spec.ts +++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.spec.ts @@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { RecordApiFormComponent } from './record-api-form.component' import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' import { firstValueFrom } from 'rxjs' -import { UiInputsModule } from '@geonetwork-ui/ui/inputs' import { TranslateModule } from '@ngx-translate/core' const mockDatasetServiceDistribution: DatasetServiceDistribution = { @@ -72,8 +71,7 @@ describe('RecordApiFormComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RecordApiFormComponent], - imports: [UiInputsModule, TranslateModule.forRoot()], + imports: [RecordApiFormComponent, TranslateModule.forRoot()], }).compileComponents() fixture = TestBed.createComponent(RecordApiFormComponent) diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts index 5d7d598c10..c2d80e233b 100644 --- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts +++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts @@ -6,6 +6,13 @@ import { } from '@geonetwork-ui/common/domain/model/record' import { mimeTypeToFormat } from '@geonetwork-ui/util/shared' import { BehaviorSubject, combineLatest, filter, map, switchMap } from 'rxjs' +import { + CopyTextButtonComponent, + DropdownSelectorComponent, + TextInputComponent, +} from '@geonetwork-ui/ui/inputs' +import { CommonModule } from '@angular/common' +import { TranslateModule } from '@ngx-translate/core' const DEFAULT_PARAMS = { OFFSET: '', @@ -23,6 +30,14 @@ interface OutputFormats { templateUrl: './record-api-form.component.html', styleUrls: ['./record-api-form.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + CommonModule, + TextInputComponent, + DropdownSelectorComponent, + CopyTextButtonComponent, + TranslateModule, + ], }) export class RecordApiFormComponent { @Input() set apiLink(value: DatasetServiceDistribution) { diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html index f8ae8b782d..b89c0fd134 100644 --- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html +++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html @@ -17,7 +17,6 @@