Merge pull request #523 from geonetwork/rework-email-contact-block-re…

…cord-view

feat: Make email in contact block "mailto"

libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html

@@ -10,12 +10,17 @@
       {{ shownContact.organisation }}
     </div>
   </div>
-  <p class="text-gray-700 text-sm">{{ shownContact.email }}</p>
+  <a
+    [href]="'mailto:' + shownContact.email"
+    class="text-gray-700 text-sm"
+    target="_blank"
+    >{{ shownContact.email }}</a
+  >
   <div *ngIf="shownContact.website" class="mb-2">
     <a
       [href]="shownContact.website"
       target="_blank"
-      class="text-primary text-sm cursor-pointer hover:underline transition-all"
+      class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
       >{{ shownContact.website }}
       <mat-icon class="!w-[12px] !h-[12px] !text-[12px] opacity-75"
         >open_in_new</mat-icon

libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.spec.ts

@@ -58,9 +58,9 @@ describe('MetadataContactComponent', () => {
     })
   })
   describe('content', () => {
-    let ps
+    let email
     beforeEach(() => {
-      ps = fixture.debugElement.queryAll(By.css('p'))
+      email = fixture.debugElement.query(By.css('a'))
     })
     it('displays the contact name', () => {
       const el = fixture.debugElement.query(
@@ -69,10 +69,10 @@ describe('MetadataContactComponent', () => {
       expect(el.innerHTML).toBe(' Worldcorp ')
     })
     it('displays the contact email', () => {
-      expect(ps[1].nativeElement.innerHTML).toBe('[email protected]')
+      expect(email.attributes.href).toBe('mailto:[email protected]')
     })
     it('displays a link to the contact website', () => {
-      const a = fixture.debugElement.query(By.css('a'))
+      const a = fixture.debugElement.query(By.css('.contact-website'))
       expect(a.attributes.href).toBe('https://john.world.co')
       expect(a.attributes.target).toBe('_blank')
     })