From 30aa2c9b82a2817170cf275b24ad8b3021107bf1 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Sun, 11 Aug 2024 21:43:07 +0200
Subject: [PATCH] fix(web): use fallback image if shared asset isn't resized
 (#11704)

* fix(web): use fallback image if shared asset isn't resized

* remove test-data index file
---
 .../album-page/__tests__/album-card.spec.ts   |  2 +-
 .../album-page/__tests__/album-cover.spec.ts  |  2 +-
 .../covers/__tests__/share-cover.spec.ts      | 36 +++++++++----------
 .../covers/share-cover.svelte                 |  2 +-
 web/src/test-data/index.ts                    |  1 -
 5 files changed, 21 insertions(+), 22 deletions(-)
 delete mode 100644 web/src/test-data/index.ts

diff --git a/web/src/lib/components/album-page/__tests__/album-card.spec.ts b/web/src/lib/components/album-page/__tests__/album-card.spec.ts
index 6ffa273a4d..79136bca02 100644
--- a/web/src/lib/components/album-page/__tests__/album-card.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/album-card.spec.ts
@@ -1,5 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { albumFactory } from '@test-data';
+import { albumFactory } from '@test-data/factories/album-factory';
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
diff --git a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
index 4f5fb7e571..1688283116 100644
--- a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
@@ -1,6 +1,6 @@
 import AlbumCover from '$lib/components/album-page/album-cover.svelte';
 import { getAssetThumbnailUrl } from '$lib/utils';
-import { albumFactory } from '@test-data';
+import { albumFactory } from '@test-data/factories/album-factory';
 import { render } from '@testing-library/svelte';
 
 vi.mock('$lib/utils');
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
index 774c433562..c14b618dce 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
@@ -1,19 +1,16 @@
 import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
 import { getAssetThumbnailUrl } from '$lib/utils';
-import type { SharedLinkResponseDto } from '@immich/sdk';
-import { albumFactory } from '@test-data';
-import { render } from '@testing-library/svelte';
+import { albumFactory } from '@test-data/factories/album-factory';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
+import { render, screen } from '@testing-library/svelte';
 
 vi.mock('$lib/utils');
 
 describe('ShareCover component', () => {
   it('renders an image when the shared link is an album', () => {
     const component = render(ShareCover, {
-      link: {
-        album: albumFactory.build({
-          albumName: '123',
-        }),
-      } as SharedLinkResponseDto,
+      link: sharedLinkFactory.build({ album: albumFactory.build({ albumName: '123' }) }),
       preload: false,
       class: 'text',
     });
@@ -26,13 +23,7 @@ describe('ShareCover component', () => {
   it('renders an image when the shared link is an individual share', () => {
     vi.mocked(getAssetThumbnailUrl).mockReturnValue('/asdf');
     const component = render(ShareCover, {
-      link: {
-        assets: [
-          {
-            id: 'someId',
-          },
-        ],
-      } as SharedLinkResponseDto,
+      link: sharedLinkFactory.build({ assets: [assetFactory.build({ id: 'someId' })] }),
       preload: false,
       class: 'text',
     });
@@ -46,9 +37,7 @@ describe('ShareCover component', () => {
 
   it('renders an image when the shared link has no album or assets', () => {
     const component = render(ShareCover, {
-      link: {
-        assets: [],
-      } as unknown as SharedLinkResponseDto,
+      link: sharedLinkFactory.build(),
       preload: false,
       class: 'text',
     });
@@ -57,4 +46,15 @@ describe('ShareCover component', () => {
     expect(img.getAttribute('loading')).toBe('lazy');
     expect(img.className).toBe('z-0 rounded-xl object-cover text');
   });
+
+  it('renders fallback image when asset is not resized', () => {
+    const link = sharedLinkFactory.build({ assets: [assetFactory.build({ resized: false })] });
+    render(ShareCover, {
+      link: link,
+      preload: false,
+    });
+
+    const img = screen.getByTestId<HTMLImageElement>('album-image');
+    expect(img.alt).toBe('unnamed_share');
+  });
 });
diff --git a/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
index 63d50d60e6..12d383476f 100644
--- a/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
@@ -15,7 +15,7 @@
 <div class="relative aspect-square shrink-0">
   {#if link?.album}
     <AlbumCover album={link.album} class={className} {preload} />
-  {:else if link.assets[0]}
+  {:else if link.assets[0]?.resized}
     <AssetCover
       alt={$t('individual_share')}
       class={className}
diff --git a/web/src/test-data/index.ts b/web/src/test-data/index.ts
deleted file mode 100644
index 8d847b87be..0000000000
--- a/web/src/test-data/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './factories/album-factory';