fix: Ensure media info is dispatched after view change (#1587)

tests/utils/embla/carousel-controller.test.ts

@@ -110,24 +110,35 @@ describe('CarouselController', () => {
   it('should select given slide', () => {
     const children = createTestSlideNodes();
     const parent = createParent({ children: children });
+
+    const forceSelectListener = vi.fn();
+    parent.addEventListener('frigate-card:carousel:force-select', forceSelectListener);
+
     const carousel = new CarouselController(createRoot(), parent);
 
     carousel.selectSlide(4);
 
     expect(getEmblaApi()?.scrollTo).toBeCalledWith(4, false);
+    expect(forceSelectListener).toBeCalledWith(
+      expect.objectContaining({
+        detail: { index: 4, element: children[4] },
+      }),
+    );
   });
 
-  it('should dispatch settle event', () => {
-    const children = createTestSlideNodes();
+  it('should not select non-existent slide', () => {
+    const children = createTestSlideNodes({ n: 10 });
     const parent = createParent({ children: children });
-    new CarouselController(createRoot(), parent);
 
-    const settleHandler = vi.fn();
-    parent.addEventListener('frigate-card:carousel:settle', settleHandler);
+    const forceSelectListener = vi.fn();
+    parent.addEventListener('frigate-card:carousel:force-select', forceSelectListener);
 
-    callEmblaHandler(getEmblaApi(), 'settle');
+    const carousel = new CarouselController(createRoot(), parent);
 
-    expect(settleHandler).toBeCalled();
+    carousel.selectSlide(11);
+
+    expect(getEmblaApi()?.scrollTo).toBeCalledWith(11, false);
+    expect(forceSelectListener).not.toBeCalled();
   });
 
   it('should dispatch select event', () => {

tests/utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info.test.ts

@@ -6,7 +6,6 @@ import {
 } from '../../../../../src/utils/media-info';
 import { createMediaLoadedInfo, createParent } from '../../../../test-utils';
 import {
-  callEmblaHandler,
   createEmblaApiInstance,
   createTestEmblaOptionHandler,
   createTestSlideNodes,
@@ -30,7 +29,6 @@ describe('AutoMediaLoadedInfo', () => {
     plugin.destroy();
 
     expect(emblaApi.off).toBeCalledWith('init', expect.anything());
-    expect(emblaApi.off).toBeCalledWith('select', expect.anything());
   });
 
   describe('should correctly propogate media load/unload depending on whether media is currently selected', () => {
@@ -82,11 +80,15 @@ describe('AutoMediaLoadedInfo', () => {
     dispatchExistingMediaLoadedInfoAsEvent(children[5], createMediaLoadedInfo());
 
     vi.mocked(emblaApi.selectedScrollSnap).mockReturnValue(4);
-    callEmblaHandler(emblaApi, 'select');
+    emblaApi
+      .containerNode()
+      .dispatchEvent(new Event('frigate-card:carousel:force-select'));
     expect(mediaLoadedHandler).not.toBeCalled();
 
     vi.mocked(emblaApi.selectedScrollSnap).mockReturnValue(5);
-    callEmblaHandler(emblaApi, 'select');
+    emblaApi
+      .containerNode()
+      .dispatchEvent(new Event('frigate-card:carousel:force-select'));
     expect(mediaLoadedHandler).toBeCalled();
   });
 });