chore(web): bump immich/ui for tooltips (#24632)

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/lib/components/TestWrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { TooltipProvider } from '@immich/ui';
+  import type { Component } from 'svelte';
+
+  type Props = {
+    component: Component<T>;
+    componentProps: T;
+  };
+
+  const { component: Test, componentProps }: Props = $props();
+</script>
+
+<TooltipProvider>
+  <Test {...componentProps} />
+</TooltipProvider>

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -1,4 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
+import { renderWithTooltips } from '$tests/helpers';
 import { albumFactory } from '@test-data/factories/album-factory';
 import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
@@ -88,7 +89,7 @@ describe('AlbumCard component', () => {
     const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
 
     beforeEach(async () => {
-      sut = render(AlbumCard, { album, onShowContextMenu });
+      sut = renderWithTooltips(AlbumCard, { album, onShowContextMenu });
 
       const albumImgElement = sut.getByTestId('album-image');
       await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));

web/src/lib/components/asset-viewer/actions/delete-action.spec.ts

@@ -1,7 +1,7 @@
+import { renderWithTooltips } from '$tests/helpers';
 import type { AssetResponseDto } from '@immich/sdk';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
 import DeleteAction from './delete-action.svelte';
 
 let asset: AssetResponseDto;
@@ -13,8 +13,12 @@ describe('DeleteAction component', () => {
     });
 
     it('displays a button to move the asset to the trash bin', () => {
-      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn(), preAction: vi.fn() });
-      expect(getByTitle('delete')).toBeInTheDocument();
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('delete')).toBeInTheDocument();
       expect(queryByTitle('deletePermanently')).toBeNull();
     });
   });
@@ -25,8 +29,12 @@ describe('DeleteAction component', () => {
     });
 
     it('displays a button to permanently delete the asset', () => {
-      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn(), preAction: vi.fn() });
-      expect(getByTitle('permanently_delete')).toBeInTheDocument();
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('permanently_delete')).toBeInTheDocument();
       expect(queryByTitle('delete')).toBeNull();
     });
   });

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -1,9 +1,9 @@
 import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
+import { renderWithTooltips } from '$tests/helpers';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
 import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
 
 describe('AssetViewerNavBar component', () => {
@@ -16,12 +16,13 @@ describe('AssetViewerNavBar component', () => {
     showShareButton: false,
     preAction: () => {},
     onZoomImage: () => {},
-    onCopyImage: () => {},
     onAction: () => {},
     onRunJob: () => {},
     onPlaySlideshow: () => {},
     onShowDetail: () => {},
     onClose: () => {},
+    playOriginalVideo: false,
+    setPlayOriginalVideo: () => Promise.resolve(),
   };
 
   beforeAll(() => {
@@ -51,8 +52,8 @@ describe('AssetViewerNavBar component', () => {
     preferencesStore.set(prefs);
 
     const asset = assetFactory.build({ isTrashed: false });
-    const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });
-    expect(getByTitle('go_back')).toBeInTheDocument();
+    const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
+    expect(getByLabelText('go_back')).toBeInTheDocument();
   });
 
   describe('if the current user owns the asset', () => {
@@ -65,8 +66,8 @@ describe('AssetViewerNavBar component', () => {
       const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
       preferencesStore.set(prefs);
 
-      const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });
-      expect(getByTitle('delete')).toBeInTheDocument();
+      const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
+      expect(getByLabelText('delete')).toBeInTheDocument();
     });
   });
 });

web/src/lib/components/faces-page/manage-people-visibility.spec.ts

@@ -1,119 +0,0 @@
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
-import type { PersonResponseDto } from '@immich/sdk';
-import { personFactory } from '@test-data/factories/person-factory';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-
-describe('ManagePeopleVisibility Component', () => {
-  let personVisible: PersonResponseDto;
-  let personHidden: PersonResponseDto;
-  let personWithoutName: PersonResponseDto;
-
-  beforeAll(() => {
-    // Prevents errors from `img.decode()` in ImageThumbnail
-    Object.defineProperty(HTMLImageElement.prototype, 'decode', {
-      value: vi.fn(),
-    });
-  });
-
-  beforeEach(() => {
-    vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
-    personVisible = personFactory.build({ isHidden: false });
-    personHidden = personFactory.build({ isHidden: true });
-    personWithoutName = personFactory.build({ isHidden: false, name: undefined });
-    sdkMock.updatePeople.mockResolvedValue([]);
-  });
-
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-
-  it('does not update people when no changes are made', () => {
-    const { getByText } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    const saveButton = getByText('done');
-    saveButton.click();
-    expect(sdkMock.updatePeople).not.toHaveBeenCalled();
-  });
-
-  // svelte animations require a real browser
-  it.skip('hides unnamed people on first button press', () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: [{ id: personWithoutName.id, isHidden: true }],
-      },
-    });
-  });
-
-  // svelte animations require a real browser
-  it.skip('hides all people on second button press', async () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    await tick();
-    getByTitle('hide_all_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: expect.arrayContaining([
-          { id: personVisible.id, isHidden: true },
-          { id: personWithoutName.id, isHidden: true },
-        ]),
-      },
-    });
-  });
-
-  // svelte animations require a real browser
-  it.skip('shows all people on third button press', async () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    await tick();
-    getByTitle('hide_all_people').click();
-    await tick();
-    getByTitle('show_all_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: [{ id: personHidden.id, isHidden: false }],
-      },
-    });
-  });
-});

web/src/lib/components/shared-components/__test__/combobox.spec.ts

@@ -1,30 +0,0 @@
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
-import Combobox from '$lib/components/shared-components/combobox.svelte';
-import { render, screen } from '@testing-library/svelte';
-
-describe('Combobox component', () => {
-  beforeAll(() => {
-    vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
-    vi.stubGlobal('visualViewport', getVisualViewportMock());
-  });
-
-  it('shows selected option', () => {
-    render(Combobox, {
-      label: 'test',
-      selectedOption: { label: 'option-1', value: 'option-1' },
-    });
-
-    expect(screen.getByRole('combobox')).toHaveValue('option-1');
-  });
-
-  it('clears the selected option when set to undefined', async () => {
-    const { rerender } = render(Combobox, {
-      label: 'test',
-      selectedOption: { label: 'option-1', value: 'option-1' },
-    });
-
-    await rerender({ selectedOption: undefined });
-    expect(screen.getByRole('combobox')).toHaveValue('');
-  });
-});