Add web test setup (#597)

* Extract logic from Albums page

- move "albums" page logic to `albums-bloc`
- add types to AlbumCard custom events

* Implement some album-bloc unit-tests

- add libraries for testing
- add album factory
- changes in albums-bloc API

* Add rest of albums-bloc test

Cleanup and remove console logs

* Refactor `isShowContextMenu` writable to derived

web/src/routes/albums/+page.svelte

@@ -6,93 +6,32 @@
 	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
 	import type { PageData } from './$types';
-	import { AlbumResponseDto, api } from '@api';
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
-	import {
-		notificationController,
-		NotificationType
-	} from '$lib/components/shared-components/notification/notification';
+	import { useAlbums } from './albums-bloc';
 
 	export let data: PageData;
 
-	let isShowContextMenu = false;
-	let contextMenuPosition = { x: 0, y: 0 };
-	let targetAlbum: AlbumResponseDto;
+	const {
+		albums,
+		isShowContextMenu,
+		contextMenuPosition,
+		createAlbum,
+		deleteSelectedContextAlbum,
+		loadAlbums,
+		showAlbumContextMenu,
+		closeAlbumContextMenu
+	} = useAlbums({ albums: data.albums });
 
-	onMount(async () => {
-		const getAllAlbumsRes = await api.albumApi.getAllAlbums();
-		data.albums = getAllAlbumsRes.data;
-
-		// Delete album that has no photos and is named 'Untitled'
-		for (const album of data.albums) {
-			if (album.albumName === 'Untitled' && album.assetCount === 0) {
-				setTimeout(async () => {
-					await autoDeleteAlbum(album);
-					data.albums = data.albums.filter((a) => a.id !== album.id);
-				}, 500);
-			}
-		}
-	});
-
-	const createAlbum = async () => {
-		try {
-			const { data: newAlbum } = await api.albumApi.createAlbum({
-				albumName: 'Untitled'
-			});
+	onMount(loadAlbums);
 
+	const handleCreateAlbum = async () => {
+		const newAlbum = await createAlbum();
+		if (newAlbum) {
 			goto('/albums/' + newAlbum.id);
-		} catch (e) {
-			console.error('Error [createAlbum] ', e);
-			notificationController.show({
-				message: 'Error creating album, check console for more details',
-				type: NotificationType.Error
-			});
 		}
 	};
-
-	const autoDeleteAlbum = async (album: AlbumResponseDto) => {
-		try {
-			await api.albumApi.deleteAlbum(album.id);
-			return true;
-		} catch (e) {
-			console.error('Error [autoDeleteAlbum] ', e);
-			return false;
-		}
-	};
-
-	const userDeleteMenu = async () => {
-		if (
-			window.confirm(
-				`Are you sure you want to delete album ${targetAlbum.albumName}? If the album is shared, other users will not be able to access it.`
-			)
-		) {
-			try {
-				await api.albumApi.deleteAlbum(targetAlbum.id);
-				data.albums = data.albums.filter((a) => a.id !== targetAlbum.id);
-			} catch (e) {
-				console.error('Error [userDeleteMenu] ', e);
-				notificationController.show({
-					message: 'Error deleting user, check console for more details',
-					type: NotificationType.Error
-				});
-			}
-		}
-
-		isShowContextMenu = false;
-	};
-
-	const showAlbumContextMenu = (event: CustomEvent, album: AlbumResponseDto) => {
-		targetAlbum = album;
-
-		contextMenuPosition = {
-			x: event.detail.x,
-			y: event.detail.y
-		};
-
-		isShowContextMenu = !isShowContextMenu;
-	};
 </script>
 
 <svelte:head>
@@ -116,7 +55,7 @@
 				</div>
 
 				<div>
-					<button on:click={createAlbum} class="immich-text-button text-sm">
+					<button on:click={handleCreateAlbum} class="immich-text-button text-sm">
 						<span>
 							<PlusBoxOutline size="18" />
 						</span>
@@ -131,17 +70,20 @@
 
 			<!-- Album Card -->
 			<div class="flex flex-wrap gap-8">
-				{#each data.albums as album}
+				{#each $albums as album}
 					{#key album.id}
 						<a sveltekit:prefetch href={`albums/${album.id}`}>
-							<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e, album)} />
+							<AlbumCard
+								{album}
+								on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
+							/>
 						</a>
 					{/key}
 				{/each}
 			</div>
 
 			<!-- Empty Message -->
-			{#if data.albums.length === 0}
+			{#if $albums.length === 0}
 				<div
 					class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
 				>
@@ -156,9 +98,9 @@
 	</section>
 
 	<!-- Context Menu -->
-	{#if isShowContextMenu}
-		<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowContextMenu = false)}>
-			<MenuOption on:click={userDeleteMenu}>
+	{#if $isShowContextMenu}
+		<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
+			<MenuOption on:click={deleteSelectedContextAlbum}>
 				<span class="flex place-items-center place-content-center gap-2">
 					<DeleteOutline size="18" />
 					<p>Delete album</p>