cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): minor album card issues (#7975)

Browse Source 
* fix(web): minor album card issues

* fix album grid gap
This commit is contained in:
Michel Heusschen
2024-03-15 17:03:54 +01:00
committed by GitHub
parent 0f79c4ff46
commit cfb14ca80b
7 changed files with 42 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/album-page/__tests__/album-card.spec.ts
+17 -20
View File
@@ -13,6 +13,7 @@ vi.mock('@immich/sdk', async (originalImport) => {
});
const sdkMock: MockedObject<typeof sdk> = sdk as MockedObject<typeof sdk>;
const onShowContextMenu = vi.fn();
describe('AlbumCard component', () => {
let sut: RenderResult<AlbumCard>;
@@ -90,34 +91,30 @@ describe('AlbumCard component', () => {
expect(albumDetailsElement).toHaveTextContent('0 items');
});
it('hides context menu when "onShowContextMenu" is undefined', () => {
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
sut = render(AlbumCard, { album });
const contextButtonParent = sut.queryByTestId('context-button-parent');
expect(contextButtonParent).not.toBeInTheDocument();
});
describe('with rendered component - no thumbnail', () => {
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
beforeEach(async () => {
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, onShowContextMenu });
const albumImgElement = sut.getByTestId('album-image');
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
});
it('dispatches custom "click" event with the album in context', async () => {
const onClickHandler = vi.fn();
sut.component.$on('click', onClickHandler);
const albumCardElement = sut.getByTestId('album-card');
await fireEvent.click(albumCardElement);
expect(onClickHandler).toHaveBeenCalledTimes(1);
expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: album }));
});
it('dispatches custom "click" event on context menu click with mouse coordinates', async () => {
const onClickHandler = vi.fn();
sut.component.$on('showalbumcontextmenu', onClickHandler);
const contextMenuButtonParent = sut.getByTestId('context-button-parent');
it('dispatches "onShowContextMenu" event on context menu click with mouse coordinates', async () => {
const contextMenuButton = sut.getByTestId('context-button-parent').children[0];
expect(contextMenuButton).toBeDefined();
// Mock getBoundingClientRect to return a bounding rectangle that will result in the expected position
contextMenuButtonParent.getBoundingClientRect = () => ({
contextMenuButton.getBoundingClientRect = () => ({
x: 123,
y: 456,
width: 0,
@@ -130,14 +127,14 @@ describe('AlbumCard component', () => {
});
await fireEvent(
contextMenuButtonParent,
contextMenuButton,
new MouseEvent('click', {
clientX: 123,
clientY: 456,
}),
);
expect(onClickHandler).toHaveBeenCalledTimes(1);
expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: { x: 123, y: 456 } }));
expect(onShowContextMenu).toHaveBeenCalledTimes(1);
expect(onShowContextMenu).toHaveBeenCalledWith(expect.objectContaining({ x: 123, y: 456 }));
});
});
});