feat(web): render component in notifications (#10990)

web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts

@@ -1,3 +1,4 @@
+import NotificationComponentTest from '$lib/components/shared-components/notification/__tests__/notification-component-test.svelte';
 import '@testing-library/jest-dom';
 import { cleanup, render, type RenderResult } from '@testing-library/svelte';
 import { NotificationType } from '../notification';
@@ -37,4 +38,24 @@ describe('NotificationCard component', () => {
     expect(sut.getByTestId('title')).toHaveTextContent('info');
     expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
   });
+
+  it('shows title and renders component', () => {
+    sut = render(NotificationCard, {
+      notification: {
+        id: 1234,
+        type: NotificationType.Info,
+        timeout: 1,
+        action: { type: 'discard' },
+        component: {
+          type: NotificationComponentTest,
+          props: {
+            href: 'link',
+          },
+        },
+      },
+    });
+
+    expect(sut.getByTestId('title')).toHaveTextContent('info');
+    expect(sut.getByTestId('message').innerHTML).toEqual('Notification <b>message</b> with <a href="link">link</a>');
+  });
 });

web/src/lib/components/shared-components/notification/__tests__/notification-component-test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let href: string;
+</script>
+
+Notification <b>message</b> with <a {href}>link</a>