feat(web): add cover images to individual shares (#9988)

* feat(web): add cover images to individual shares * Update wording in share modal * Use translation function * Add and use new translations * Fix formatting * Update with suggestions * Update test language * Update test and language file per suggestions * Fix formatting * Remove unused translation
2024-06-14 18:16:48 -05:00
parent 78f600ebce
commit aea1c46bea
13 changed files with 214 additions and 30 deletions
@@ -0,0 +1,18 @@
+import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('AssetCover component', () => {
+  it('renders correctly', () => {
+    const component = render(AssetCover, {
+      alt: '123',
+      preload: true,
+      src: 'wee',
+      class: 'asdf',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.getAttribute('src')).toBe('wee');
+    expect(img.getAttribute('loading')).toBe('eager');
+    expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
+  });
+});
@@ -0,0 +1,17 @@
+import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('NoCover component', () => {
+  it('renders correctly', () => {
+    const component = render(NoCover, {
+      alt: '123',
+      preload: true,
+      class: 'asdf',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
+    expect(img.getAttribute('loading')).toBe('eager');
+    expect(img.src).toStrictEqual(expect.any(String));
+  });
+});
@@ -0,0 +1,60 @@
+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';
+
+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,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+  });
+
+  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,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('individual_share');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+    expect(img.getAttribute('src')).toBe('/asdf');
+    expect(getAssetThumbnailUrl).toHaveBeenCalledWith('someId');
+  });
+
+  it('renders an image when the shared link has no album or assets', () => {
+    const component = render(ShareCover, {
+      link: {
+        assets: [],
+      } as unknown as SharedLinkResponseDto,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('unnamed_share');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+  });
+});