helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

feat: photo-viewer; use <img> instead of blob urls, simplify/refactor, avoid window.events (#9883)

Browse source 
* Photoviewer

* make copyImage/zoomToggle optional

* Add e2e test

* lint

* Accept bo0tzz suggestion

Co-authored-by: bo0tzz <git@bo0tzz.me>

* Bad merge and review comments

* unused import

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis 2024-06-07 14:22:46 -04:00 • committed by GitHub
parent def5f59242
commit 4b49d3a85d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 200 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

83
web/src/lib/components/asset-viewer/photo-viewer.spec.ts
View file

@ -1,83 +0,0 @@
import * as utils from '$lib/utils';
import type { AssetResponseDto } from '@immich/sdk';
import { assetFactory } from '@test-data/factories/asset-factory';
import '@testing-library/jest-dom';
import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
import type { Mock, MockInstance } from 'vitest';
import PhotoViewer from './photo-viewer.svelte';
vi.mock('$lib/utils', async (originalImport) => {
const meta = await originalImport<typeof import('$lib/utils')>();
return {
...meta,
downloadRequest: vi.fn(),
};
});
describe('PhotoViewer component', () => {
let downloadRequestMock: MockInstance;
let createObjectURLMock: Mock<[obj: Blob], string>;
let asset: AssetResponseDto;
beforeAll(() => {
downloadRequestMock = vi.spyOn(utils, 'downloadRequest').mockResolvedValue({
data: new Blob(),
status: 200,
});
createObjectURLMock = vi.fn();
window.URL.createObjectURL = createObjectURLMock;
asset = assetFactory.build({ originalPath: 'image.png' });
});
afterAll(() => {
vi.resetAllMocks();
});
it('initially shows a loading spinner', () => {
render(PhotoViewer, { asset });
expect(screen.getByRole('status')).toBeInTheDocument();
});
it('loads and shows a photo', async () => {
createObjectURLMock.mockReturnValueOnce('url-one');
render(PhotoViewer, { asset });
expect(downloadRequestMock).toBeCalledWith(
expect.objectContaining({
url: `/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.checksum}`,
}),
);
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
expect(screen.getByRole('img')).toHaveAttribute('src', 'url-one');
});
it('loads high resolution photo when zoomed', async () => {
createObjectURLMock.mockReturnValueOnce('url-one');
render(PhotoViewer, { asset });
createObjectURLMock.mockReturnValueOnce('url-two');
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
await fireEvent(window, new CustomEvent('zoomImage'));
await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', 'url-two'));
expect(downloadRequestMock).toBeCalledWith(
expect.objectContaining({
url: `/api/assets/${asset.id}/original?c=${asset.checksum}`,
}),
);
});
it('reloads photo when checksum changes', async () => {
const { component } = render(PhotoViewer, { asset });
createObjectURLMock.mockReturnValueOnce('url-two');
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
component.$set({ asset: { ...asset, checksum: 'new-checksum' } });
await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', 'url-two'));
expect(downloadRequestMock).toBeCalledWith(
expect.objectContaining({
url: `/api/assets/${asset.id}/thumbnail?size=preview&c=new-checksum`,
}),
);
});
});