Fix Notification components possible memory leaks (#650)

Dispose subscriptions and timeouts when
the components are removed from the DOM

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

@@ -0,0 +1,39 @@
+import { jest, describe, it } from '@jest/globals';
+import { render, cleanup, RenderResult } from '@testing-library/svelte';
+import { NotificationType } from '../notification';
+import NotificationCard from '../notification-card.svelte';
+import '@testing-library/jest-dom';
+
+describe('NotificationCard component', () => {
+	let sut: RenderResult<NotificationCard>;
+
+	it('disposes timeout if already removed from the DOM', () => {
+		jest.spyOn(window, 'clearTimeout');
+
+		sut = render(NotificationCard, {
+			notificationInfo: {
+				id: 1234,
+				message: 'Notification message',
+				timeout: 1000,
+				type: NotificationType.Info
+			}
+		});
+
+		cleanup();
+		expect(window.clearTimeout).toHaveBeenCalledTimes(1);
+	});
+
+	it('shows message and title', () => {
+		sut = render(NotificationCard, {
+			notificationInfo: {
+				id: 1234,
+				message: 'Notification message',
+				timeout: 1000,
+				type: NotificationType.Info
+			}
+		});
+
+		expect(sut.getByTestId('title')).toHaveTextContent('Info');
+		expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
+	});
+});

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

@@ -0,0 +1,44 @@
+import { jest, describe, it } from '@jest/globals';
+import { render, RenderResult, waitFor } from '@testing-library/svelte';
+import { notificationController, NotificationType } from '../notification';
+import { get } from 'svelte/store';
+import NotificationList from '../notification-list.svelte';
+import '@testing-library/jest-dom';
+
+function _getNotificationListElement(
+	sut: RenderResult<NotificationList>
+): HTMLAnchorElement | null {
+	return sut.container.querySelector('#notification-list');
+}
+
+describe('NotificationList component', () => {
+	const sut: RenderResult<NotificationList> = render(NotificationList);
+
+	beforeAll(() => {
+		jest.useFakeTimers();
+	});
+
+	afterAll(() => {
+		jest.useRealTimers();
+	});
+
+	it('shows a notification when added and closes it automatically after the delay timeout', async () => {
+		expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
+
+		notificationController.show({
+			message: 'Notification',
+			type: NotificationType.Info,
+			timeout: 3000
+		});
+
+		await waitFor(() => expect(_getNotificationListElement(sut)).toBeInTheDocument());
+
+		expect(_getNotificationListElement(sut)?.children).toHaveLength(1);
+
+		jest.advanceTimersByTime(3000);
+		// due to some weirdness in svelte (or testing-library) need to check if it has been removed from the store to make sure it works.
+		expect(get(notificationController.notificationList)).toHaveLength(0);
+
+		await waitFor(() => expect(_getNotificationListElement(sut)).not.toBeInTheDocument());
+	});
+});