refactor: Refactor media loading manager for improved robustness (#2464)

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

@@ -1,7 +1,6 @@
 import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel';
 import { MockedObject, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CarouselController } from '../../../src/utils/embla/carousel-controller';
-import AutoMediaLoadedInfo from '../../../src/utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info';
 import {
   MutationObserverMock,
   callMutationHandler,
@@ -111,41 +110,23 @@ describe('CarouselController', () => {
     const children = createTestSlideNodes();
     const parent = createParent({ children: children });
 
-    const forceSelectListener = vi.fn();
-    parent.addEventListener(
-      'advanced-camera-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 not select non-existent slide', () => {
     const children = createTestSlideNodes({ n: 10 });
     const parent = createParent({ children: children });
 
-    const forceSelectListener = vi.fn();
-    parent.addEventListener(
-      'advanced-camera-card:carousel:force-select',
-      forceSelectListener,
-    );
-
     const carousel = new CarouselController(createRoot(), parent);
 
     carousel.selectSlide(11);
 
-    // Should not call scrollTo or fire event because index is out of bounds
+    // Should not call scrollTo because index is out of bounds.
     expect(getEmblaApi()?.scrollTo).not.toBeCalled();
-    expect(forceSelectListener).not.toBeCalled();
   });
 
   it('should dispatch select event', () => {
@@ -191,7 +172,6 @@ describe('CarouselController', () => {
     const children = createTestSlideNodes({ n: 1 });
     const root = createRoot();
     const parent = createParent({ children: children });
-    const plugins = [AutoMediaLoadedInfo()];
 
     new CarouselController(root, parent, {
       direction: 'vertical',
@@ -200,7 +180,6 @@ describe('CarouselController', () => {
       dragFree: true,
       loop: true,
       dragEnabled: false,
-      plugins: plugins,
       textDirection: 'rtl',
     });
 
@@ -219,7 +198,7 @@ describe('CarouselController', () => {
         watchDrag: false,
         direction: 'rtl',
       },
-      plugins,
+      [],
     );
   });
 

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

@@ -1,94 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import AutoMediaLoadedInfo from '../../../../../src/utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info';
-import {
-  dispatchExistingMediaLoadedInfoAsEvent,
-  dispatchMediaUnloadedEvent,
-} from '../../../../../src/utils/media-info';
-import { createMediaLoadedInfo, createParent } from '../../../../test-utils';
-import {
-  createEmblaApiInstance,
-  createTestEmblaOptionHandler,
-  createTestSlideNodes,
-} from '../../test-utils';
-
-// @vitest-environment jsdom
-describe('AutoMediaLoadedInfo', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should construct', () => {
-    const plugin = AutoMediaLoadedInfo();
-    expect(plugin.name).toBe('autoMediaLoadedInfo');
-  });
-
-  it('should destroy', () => {
-    const plugin = AutoMediaLoadedInfo();
-    const emblaApi = createEmblaApiInstance();
-    plugin.init(emblaApi, createTestEmblaOptionHandler());
-    plugin.destroy();
-
-    expect(emblaApi.off).toBeCalledWith('init', expect.anything());
-  });
-
-  describe('should correctly propogate media load/unload depending on whether media is currently selected', () => {
-    it.each([
-      ['loaded' as const, true],
-      ['unloaded' as const, true],
-      ['loaded' as const, false],
-      ['unloaded' as const, false],
-    ])('%s', (type: string, selected: boolean) => {
-      const plugin = AutoMediaLoadedInfo();
-      const children = createTestSlideNodes();
-      const parent = createParent({ children: children });
-
-      const emblaApi = createEmblaApiInstance({
-        containerNode: parent,
-        slideNodes: children,
-        selectedScrollSnap: selected ? 5 : 4,
-      });
-      plugin.init(emblaApi, createTestEmblaOptionHandler());
-
-      const mediaLoadedHandler = vi.fn();
-      parent.addEventListener('advanced-camera-card:media:' + type, mediaLoadedHandler);
-      if (type === 'loaded') {
-        dispatchExistingMediaLoadedInfoAsEvent(children[5], createMediaLoadedInfo());
-      } else if (type === 'unloaded') {
-        dispatchMediaUnloadedEvent(children[5]);
-      }
-
-      if (selected) {
-        expect(mediaLoadedHandler).toBeCalled();
-      } else {
-        expect(mediaLoadedHandler).not.toBeCalled();
-      }
-    });
-  });
-
-  it('selecting a slide should dispatch a previously saved media loaded info if present', () => {
-    const plugin = AutoMediaLoadedInfo();
-    const children = createTestSlideNodes();
-    const parent = createParent({ children: children });
-    const emblaApi = createEmblaApiInstance({
-      containerNode: parent,
-      slideNodes: children,
-    });
-    plugin.init(emblaApi, createTestEmblaOptionHandler());
-
-    const mediaLoadedHandler = vi.fn();
-    parent.addEventListener('advanced-camera-card:media:loaded', mediaLoadedHandler);
-    dispatchExistingMediaLoadedInfoAsEvent(children[5], createMediaLoadedInfo());
-
-    vi.mocked(emblaApi.selectedScrollSnap).mockReturnValue(4);
-    emblaApi
-      .containerNode()
-      .dispatchEvent(new Event('advanced-camera-card:carousel:force-select'));
-    expect(mediaLoadedHandler).not.toBeCalled();
-
-    vi.mocked(emblaApi.selectedScrollSnap).mockReturnValue(5);
-    emblaApi
-      .containerNode()
-      .dispatchEvent(new Event('advanced-camera-card:carousel:force-select'));
-    expect(mediaLoadedHandler).toBeCalled();
-  });
-});

tests/utils/embla/test-utils.ts

@@ -1,25 +1,8 @@
 import { EmblaCarouselType, EmblaEventType } from 'embla-carousel';
 import { EngineType } from 'embla-carousel/components/Engine';
-import { LooseOptionsType } from 'embla-carousel/components/Options';
-import { OptionsHandlerType } from 'embla-carousel/components/OptionsHandler';
-import { merge } from 'lodash-es';
 import { vi } from 'vitest';
 import { mock } from 'vitest-mock-extended';
 
-export const createTestEmblaOptionHandler = (): OptionsHandlerType => ({
-  mergeOptions: <TypeA extends LooseOptionsType, TypeB extends LooseOptionsType>(
-    optionsA: TypeA,
-    optionsB?: TypeB,
-  ): TypeA => {
-    return merge({}, optionsA, optionsB);
-  },
-  optionsAtMedia: <Type extends LooseOptionsType>(options: Type): Type => {
-    return options;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  optionsMediaQueries: (_optionsList: LooseOptionsType[]): MediaQueryList[] => [],
-});
-
 export const callEmblaHandler = (
   emblaApi: EmblaCarouselType | null,
   eventName: EmblaEventType,