test: Add browser tests for the media viewing gallery and viewer (#2661)

2026-08-07 16:08:56 -07:00
parent 567690831c
commit 673d8fe133
25 changed files with 1563 additions and 144 deletions
@@ -0,0 +1,128 @@
+import { describe, expect, it } from 'vitest';
+
+import type { FrigateEvent } from '../../../src/camera-manager/frigate/types';
+import type { PartialAdvancedCameraCardConfig } from '../../../src/config/types';
+import {
+  createTestFrigateEvent,
+  EVENT_TIME_NEWER,
+  EVENT_TIME_OLDER,
+  mountCardWithFrigate,
+} from '../../browser/fake-frigate';
+import type { MountedCard } from '../../browser/mounted-card';
+import {
+  clickThumbnail,
+  deepQuery,
+  getBlockNotificationText,
+  getMediaViewerMediaURLs,
+  getThumbnails,
+  waitForThumbnails,
+} from '../../browser/test-utils';
+
+const NO_MEDIA_TEXT = 'No media to display';
+
+const mountCard = async (
+  events: FrigateEvent[],
+  config?: PartialAdvancedCameraCardConfig,
+): Promise<MountedCard> =>
+  (await mountCardWithFrigate(events, { view: { default: 'clips' }, ...config })).card;
+
+describe('AdvancedCameraCardGallery', () => {
+  it('should show a thumbnail for every event the camera detected', async () => {
+    const card = await mountCard([
+      createTestFrigateEvent('older', EVENT_TIME_OLDER),
+      createTestFrigateEvent('newer', EVENT_TIME_NEWER),
+    ]);
+
+    await waitForThumbnails(card, 2);
+
+    expect(getThumbnails(card.card)).toHaveLength(2);
+  });
+
+  it('should show the picture Frigate has of each event', async () => {
+    const card = await mountCard([createTestFrigateEvent('newer', EVENT_TIME_NEWER)]);
+
+    await waitForThumbnails(card, 1);
+    const thumbnail = getThumbnails(card.card)[0];
+
+    // A thumbnail that never arrives is drawn as an icon and nothing else says
+    // so, so counting thumbnails says nothing about whether there is a picture
+    // in them. The card fetches one with the user's credentials and embeds what
+    // comes back, which is why the result is a data URL rather than the path
+    // asked for.
+    const image = await card.waitForRender(
+      () => deepQuery<HTMLImageElement>(thumbnail, 'img'),
+      'the thumbnail picture',
+    );
+
+    expect(image.src).toMatch(/^data:image\/png/);
+  });
+
+  it('should say there is nothing to view when the camera has no events', async () => {
+    const card = await mountCard([]);
+
+    // The element renders before its text, so waiting for the element alone can
+    // read it while it is still empty.
+    await card.waitForRender(
+      () => getBlockNotificationText(card.card).includes(NO_MEDIA_TEXT) || null,
+      `the "${NO_MEDIA_TEXT}" notification`,
+    );
+
+    expect(getThumbnails(card.card)).toHaveLength(0);
+  });
+
+  it('should open the clips gallery from the live view', async () => {
+    const card = await mountCard([createTestFrigateEvent('newer', EVENT_TIME_NEWER)], {
+      view: { default: 'live' },
+
+      // The clips button is hidden by default.
+      menu: { style: 'outside', buttons: { clips: { enabled: true } } },
+    });
+
+    await card.events.waitForFirst('advanced-camera-card:media:loaded');
+
+    await card.clickControl('Clips gallery');
+    await card.waitForSelector('advanced-camera-card-gallery');
+
+    await waitForThumbnails(card, 1);
+    expect(getThumbnails(card.card)).toHaveLength(1);
+  });
+
+  it('should open the viewer on the media that was clicked', async () => {
+    const card = await mountCard([
+      createTestFrigateEvent('older', EVENT_TIME_OLDER),
+      createTestFrigateEvent('newer', EVENT_TIME_NEWER),
+    ]);
+
+    await waitForThumbnails(card, 2);
+
+    // The newest event is shown first, so index 1 is the older of the two.
+    await clickThumbnail(card.card, 1);
+    await card.events.waitForFirst('advanced-camera-card:media:loaded');
+
+    await card.waitForSelector('advanced-camera-card-viewer-carousel');
+
+    expect(getMediaViewerMediaURLs(card.card)).toEqual([
+      expect.stringContaining('clip.webm?event=older'),
+    ]);
+  });
+
+  it('should show the media filter', async () => {
+    const card = await mountCard([createTestFrigateEvent('newer', EVENT_TIME_NEWER)]);
+
+    await card.waitForSelector('advanced-camera-card-media-filter');
+
+    expect(deepQuery(card.card, 'advanced-camera-card-media-filter')).not.toBeNull();
+  });
+
+  it('should not show the media filter when its mode is none', async () => {
+    const card = await mountCard([createTestFrigateEvent('newer', EVENT_TIME_NEWER)], {
+      media_gallery: { controls: { filter: { mode: 'none' } } },
+    });
+
+    await waitForThumbnails(card, 1);
+
+    // The gallery still renders, so a missing filter is not a missing gallery.
+    expect(deepQuery(card.card, 'advanced-camera-card-gallery')).not.toBeNull();
+    expect(deepQuery(card.card, 'advanced-camera-card-media-filter')).toBeNull();
+  });
+});