Merge pull request #279 from akhelouat/fix-links-rendering

Fix links rendering

libs/feature/record/src/lib/data-downloads/data-downloads.component.spec.ts

@@ -297,6 +297,13 @@ describe('DataDownloadsComponent', () => {
             protocol: 'WWW:DOWNLOAD',
             url: 'https://www.ifremer.fr/surval_parametre_polygone.geojson',
           },
+          {
+            description: 'excel data',
+            name: 'data.xls',
+            format: 'Excel',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/data.excel',
+          },
         ])
         fixture.detectChanges()
       })
@@ -314,6 +321,13 @@ describe('DataDownloadsComponent', () => {
             protocol: 'WWW:DOWNLOAD',
             url: 'https://www.ifremer.fr/surval_parametre_point.csv',
           },
+          {
+            description: 'excel data',
+            name: 'data.xls',
+            format: 'Excel',
+            protocol: 'WWW:DOWNLOAD',
+            url: 'https://www.ifremer.fr/data.excel',
+          },
           {
             description: 'Lieu de surveillance (polygone)',
             name: 'surval_parametre_polygone.geojson',

libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts

@@ -1,37 +1,127 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DebugElement,
+  Input,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { LinkHelperService } from '@geonetwork-ui/util/shared'
+import { By } from '@angular/platform-browser'
+import {
+  LINK_FIXTURES,
+  LinkHelperService,
+  MetadataLinkValid,
+} from '@geonetwork-ui/util/shared'
 import { TranslateModule } from '@ngx-translate/core'
 
 import { DownloadsListComponent } from './downloads-list.component'
 
-const linkHelperServiceMock = {}
+const linkHelperServiceMock = {
+  isWfsLink: jest.fn(() => true),
+}
+
+@Component({
+  selector: 'gn-ui-download-item',
+  template: ``,
+})
+class MockDownloadItemComponent {
+  @Input() link: MetadataLinkValid
+  @Input() color: string
+}
+
 describe('DownloadsListComponent', () => {
   let component: DownloadsListComponent
   let fixture: ComponentFixture<DownloadsListComponent>
+  let de
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [DownloadsListComponent],
+      declarations: [DownloadsListComponent, MockDownloadItemComponent],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {
           provide: LinkHelperService,
           useValue: linkHelperServiceMock,
         },
       ],
-    }).compileComponents()
+    })
+      .overrideComponent(DownloadsListComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents()
   })
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DownloadsListComponent)
     component = fixture.componentInstance
     component.links = []
-    fixture.detectChanges()
+    de = fixture.debugElement
   })
 
   it('should create', () => {
+    fixture.detectChanges()
     expect(component).toBeTruthy()
   })
+
+  describe('when a list of downloads', () => {
+    let items: DebugElement[]
+
+    beforeEach(() => {
+      component.links = [
+        LINK_FIXTURES.dataCsv,
+        LINK_FIXTURES.dataPdf,
+        LINK_FIXTURES.dataPdf,
+      ]
+      fixture.detectChanges()
+      items = de.queryAll(By.directive(MockDownloadItemComponent))
+    })
+    it('contains one link', () => {
+      expect(items.length).toBe(3)
+    })
+  })
+  describe('when link format is unknown', () => {
+    let items: DebugElement[]
+
+    beforeEach(() => {
+      component.links = [LINK_FIXTURES.unknownFormat]
+      fixture.detectChanges()
+      items = de.queryAll(By.directive(MockDownloadItemComponent))
+    })
+    it('contains one link', () => {
+      expect(items.length).toBe(1)
+    })
+  })
+  describe('hydrates link with color and format', () => {
+    let items: DebugElement[]
+
+    beforeEach(() => {
+      component.links = [LINK_FIXTURES.geodataShpWithMimeType]
+      fixture.detectChanges()
+      items = de.queryAll(By.directive(MockDownloadItemComponent))
+    })
+    it('contains color, isWfs & format', () => {
+      expect(items.length).toBe(1)
+      expect(items[0].componentInstance.link).toEqual({
+        ...LINK_FIXTURES.geodataShpWithMimeType,
+        color: 'var(--color-gray-700)',
+        format: '',
+        isWfs: true,
+      })
+    })
+  })
+  describe('filtering', () => {
+    let items: DebugElement[]
+
+    beforeEach(() => {
+      component.links = [{ ...LINK_FIXTURES.dataCsv, format: 'csv' }]
+      component.activeFilterFormats = ['csv', 'json']
+      fixture.detectChanges()
+    })
+    it('csv link is displayed', () => {
+      expect(component.filteredLinks.length).toBe(1)
+      component.toggleFilterFormat('csv')
+      expect(component.filteredLinks.length).toBe(0)
+    })
+  })
 })

libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -53,9 +53,8 @@ export class DownloadsListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.processedLinks = this.formatLinks(this.links)
-    this.processedLinks = this.assignColor(this.processedLinks)
-    this.processedLinks = this.isGeneratedFromWfs(this.processedLinks)
+    this.processedLinks = this.assignColor(this.links)
+    this.processedLinks = this.formatWfs(this.processedLinks)
     this.filteredLinks = this.filterLinks(this.processedLinks)
 
     this.filterButtons = this.filterFormats.map((format) => {
@@ -66,15 +65,6 @@ export class DownloadsListComponent implements OnInit {
     })
   }
 
-  formatLinks(links) {
-    return links.map((link) => {
-      return {
-        ...link,
-        format: link.format.split(':').at(-1),
-      }
-    })
-  }
-
   filterLinks(links: MetadataLinkValid[]) {
     if (
       this.activeFilterFormats.length === 0 ||
@@ -107,13 +97,18 @@ export class DownloadsListComponent implements OnInit {
     })
   }
 
-  isGeneratedFromWfs(links: MetadataLinkValid[]) {
+  formatWfs(links: MetadataLinkValid[]) {
     return links.map((link) => {
-      if (!this.linkHelper.isWfsLink(link)) return link
-      return {
-        ...link,
-        isWfs: true,
+      if (this.linkHelper.isWfsLink(link)) {
+        const { format = '' } = link
+        const tokens = format.split(':')
+        link = {
+          ...link,
+          isWfs: true,
+          format: tokens[tokens.length - 1],
+        }
       }
+      return link
     })
   }
 }

libs/ui/elements/tsconfig.lib.json

@@ -7,7 +7,7 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": ["dom", "es2022"]
   },
   "exclude": [
     "src/test-setup.ts",

libs/util/shared/src/lib/fixtures/index.ts

@@ -1,4 +1,5 @@
 export * from './geojson.fixtures'
 export * from './ol-feature.fixture'
 export * from './record-link.fixtures'
+export * from './link.fixtures'
 export * from './records'

libs/util/shared/src/lib/links/link.fixtures.ts → libs/util/shared/src/lib/fixtures/link.fixtures.ts

@@ -156,4 +156,11 @@ export const LINK_FIXTURES = {
     label: 'landingpage link',
     url: 'https://landing.page',
   },
+  unknownFormat: {
+    protocol: 'WWW:DOWNLOAD-1.0-http--download',
+    format: undefined,
+    name: 'Vue HTML des métadonnées sur internet',
+    label: 'Vue HTML des métadonnées sur internet',
+    url: 'http://catalogue.geo-ide.developpement-durable.gouv.fr/catalogue/srv/fre/catalog.search#/metadata/fr-120066022-jdd-199fd14c-2abb-4c14-b0f8-6c8d92e7b480',
+  },
 }

libs/util/shared/src/lib/links/link-classifier.service.spec.ts

@@ -1,5 +1,5 @@
 import { LinkClassifierService, LinkUsage } from './link-classifier.service'
-import { LINK_FIXTURES } from './link.fixtures'
+import { LINK_FIXTURES } from '../fixtures/link.fixtures'
 
 describe('LinkClassifierService', () => {
   let service: LinkClassifierService

libs/util/shared/src/lib/links/link-helper.service.spec.ts

@@ -5,7 +5,7 @@ import { MetadataLink, MetadataRecord } from '../models'
 import { LinkClassifierService, LinkUsage } from './link-classifier.service'
 
 import { LinkHelperService } from './link-helper.service'
-import { LINK_FIXTURES } from './link.fixtures'
+import { LINK_FIXTURES } from '../fixtures/link.fixtures'
 
 let linkUsage: LinkUsage[]
 const linkClassifierMock = {

libs/util/shared/src/lib/links/link-utils.spec.ts

@@ -7,7 +7,7 @@ import {
   sortPriority,
   FORMATS,
 } from './link-utils'
-import { LINK_FIXTURES } from './link.fixtures'
+import { LINK_FIXTURES } from '../fixtures/link.fixtures'
 
 jest.mock('@camptocamp/ogc-client', () => ({
   WfsEndpoint: class {

libs/util/shared/src/lib/links/link-utils.ts

@@ -11,7 +11,13 @@ export const FORMATS = {
     mimeTypes: ['text/csv', 'application/csv'],
   },
   excel: {
-    extensions: ['xls', 'xlsx', 'ms-excel', 'openxmlformats-officedocument'],
+    extensions: [
+      'excel',
+      'xls',
+      'xlsx',
+      'ms-excel',
+      'openxmlformats-officedocument',
+    ],
     priority: 2,
     color: '#0f4395',
     mimeTypes: [
@@ -62,7 +68,7 @@ export const FORMATS = {
     extensions: ['pdf'],
     priority: 8,
     color: '#db544a',
-    mimeTypes: ['application/vnd.ms-excel'],
+    mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],