notification, display default icon if given icon is unknown (#487)

Author: zebuline

public/mobile-app/src/lib/NotificationIcon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import dsfrIconList from '@gouvfr/dsfr/.config/icon.json'
+  import { onMount } from 'svelte'
+
+  interface Props {
+    defaultIcon: string
+    icon?: string
+  }
+  let { defaultIcon, icon = '' }: Props = $props()
+  let checkedIcon: string = $state('')
+
+  onMount(async () => {
+    checkedIcon = dsfrIconList.filter((i) => i.name === icon.replace('fr-icon-', ''))
+      .length
+      ? icon
+      : defaultIcon
+  })
+</script>
+
+<span class="notification__icon {checkedIcon}" aria-hidden="true"></span>
+
+<style>
+  .notification__icon {
+    line-height: 2rem;
+    color: var(--blue-france-sun-113-625);
+    &::before {
+      --icon-size: 1.25rem;
+    }
+  }
+</style>

public/mobile-app/src/lib/NotificationIcon.svelte.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, test } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { render } from '@testing-library/svelte'
+import NotificationIcon from '$lib/NotificationIcon.svelte'
+
+describe('/NotificationIcon.svelte', () => {
+  test('icon is absent, should display default icon', async () => {
+    // When
+    const { container } = render(NotificationIcon, {
+      defaultIcon: 'default-icon',
+    })
+
+    // Then
+    const icon = container.querySelector('.notification__icon')
+    expect(icon).toHaveClass('default-icon')
+  })
+  test('icon is undefined, should display default icon', async () => {
+    // When
+    const { container } = render(NotificationIcon, {
+      icon: undefined,
+      defaultIcon: 'default-icon',
+    })
+
+    // Then
+    const icon = container.querySelector('.notification__icon')
+    expect(icon).toHaveClass('default-icon')
+  })
+  test('icon is empty, should display default icon', async () => {
+    // When
+    const { container } = render(NotificationIcon, {
+      icon: '',
+      defaultIcon: 'default-icon',
+    })
+
+    // Then
+    const icon = container.querySelector('.notification__icon')
+    expect(icon).toHaveClass('default-icon')
+  })
+  test('icon is unknown, should display default icon', async () => {
+    // When
+    const { container } = render(NotificationIcon, {
+      icon: 'unknown',
+      defaultIcon: 'default-icon',
+    })
+
+    // Then
+    const icon = container.querySelector('.notification__icon')
+    expect(icon).toHaveClass('default-icon')
+  })
+  test('icon is known, should display icon', async () => {
+    // When
+    const { container } = render(NotificationIcon, {
+      icon: 'fr-icon-mail-star-line',
+      defaultIcon: 'default-icon',
+    })
+
+    // Then
+    const icon = container.querySelector('.notification__icon')
+    expect(icon).toHaveClass('fr-icon-mail-star-line')
+    expect(icon).not.toHaveClass('default-icon')
+  })
+})

public/mobile-app/src/routes/notifications/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
+  import NotificationIcon from '$lib/NotificationIcon.svelte'
   import type { AppNotification } from '$lib/notifications'
   import {
     notificationEventsSocket,
@@ -87,10 +88,10 @@
           aria-hidden="true"
           ><i>•</i></span
         >
-        <span
-          class="notification__icon {notification.content_icon ? notification.content_icon: 'fr-icon-information-line'}"
-          aria-hidden="true"
-        ></span>
+        <NotificationIcon
+          icon={notification.content_icon}
+          defaultIcon="fr-icon-information-line"
+        />
       </div>
       <div class="fr-tile__body">
         <div class="fr-tile__content">
@@ -160,13 +161,6 @@
             display: none;
           }
         }
-        .notification__icon {
-          line-height: 2rem;
-          color: var(--blue-france-sun-113-625);
-          &::before {
-            --icon-size: 1.25rem;
-          }
-        }
       }
       .fr-tile__content {
         padding-bottom: 0;

public/mobile-app/src/routes/notifications/page.svelte.test.ts

@@ -105,16 +105,10 @@ describe('/+page.svelte', () => {
         'notification-f62c66b2-7bd5-4696-8383-2d40c08a1'
       )
       expect(notification1).not.toHaveClass('read')
-      const icon1 = notification1.querySelector('.notification__icon')
-      expect(icon1).not.toHaveClass('some-icon')
-      expect(icon1).toHaveClass('fr-icon-information-line')
       const notification2 = screen.getByTestId(
         'notification-2689c3b3-e95c-4d73-b37d-55f430688af9'
       )
       expect(notification2).toHaveClass('read')
-      const icon2 = notification2.querySelector('.notification__icon')
-      expect(icon2).toHaveClass('some-icon')
-      expect(icon2).not.toHaveClass('fr-icon-information-line')
     })
   })