Add unit test cases for component view mode changes and auto-hide sus…

…pension
bitmovin · Sep 5, 2024 · e0a35a7 · e0a35a7
1 parent 7a39259
commit e0a35a7
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 9 deletions.
diff --git a/spec/components/settingspanel.spec.ts b/spec/components/settingspanel.spec.ts
@@ -1,25 +1,40 @@
+import type { PlayerAPI } from 'bitmovin-player';
+
+import type { Component, ComponentConfig, ViewModeChangedEventArgs } from '../../src/ts/components/component';
+import { ViewMode } from '../../src/ts/components/component';
 import { SettingsPanel } from '../../src/ts/components/settingspanel';
-import { MockHelper } from '../helper/MockHelper';
 import { SettingsPanelPage } from '../../src/ts/components/settingspanelpage';
+import { EventDispatcher } from '../../src/ts/eventdispatcher';
+import type { UIInstanceManager } from '../../src/ts/uimanager';
+import { MockHelper } from '../helper/MockHelper';
+import getPlayerMock = MockHelper.getPlayerMock;
+import getUiInstanceManagerMock = MockHelper.getUiInstanceManagerMock;
+import { Label } from '../../src/ts/components/label';
+import { SelectBox } from '../../src/ts/components/selectbox';
+import { SettingsPanelItem } from '../../src/ts/components/settingspanelitem';
+import { VolumeSlider } from '../../src/ts/components/volumeslider';
 
 let settingsPanel: SettingsPanel;
 
 describe('SettingsPanel', () => {
   describe('page navigation', () => {
+    let playerMock: PlayerAPI;
     let rootPage: SettingsPanelPage;
     let firstPage: SettingsPanelPage;
     let secondPage: SettingsPanelPage;
+    let uiInstanceManagerMock: UIInstanceManager;
 
     beforeEach(() => {
+      playerMock = getPlayerMock();
       rootPage = new SettingsPanelPage({});
       firstPage = new SettingsPanelPage({});
       secondPage = new SettingsPanelPage({});
-
-      settingsPanel = new SettingsPanel({
-        components: [rootPage, firstPage, secondPage],
+      settingsPanel = new SettingsPanel({ components: [rootPage, firstPage, secondPage] });
+      uiInstanceManagerMock = getUiInstanceManagerMock();
+      Object.defineProperty(uiInstanceManagerMock, 'onComponentViewModeChanged', {
+        value: new EventDispatcher<Component<ComponentConfig>, ViewModeChangedEventArgs>(),
       });
-      const uiInstanceManagerMock = MockHelper.getUiInstanceManagerMock();
-      settingsPanel.configure(MockHelper.getPlayerMock(), uiInstanceManagerMock);
+      settingsPanel.configure(playerMock, uiInstanceManagerMock);
     });
 
     describe('popSettingsPanelPage', () => {
@@ -164,5 +179,58 @@ describe('SettingsPanel', () => {
         expect(spy).toHaveBeenCalled();
       });
     });
+
+    describe('configure', () => {
+      it('should subscribe to the onComponentViewModeChanged event', () => {
+        const subscribeSpy = jest.spyOn(uiInstanceManagerMock.onComponentViewModeChanged, 'subscribe');
+
+        settingsPanel.configure(playerMock, uiInstanceManagerMock);
+
+        expect(subscribeSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('onComponentViewModeChanged', () => {
+      it('should suspend the hide timeout when a component enters the persistent view mode', () => {
+        const suspendTimeoutSpy = jest.spyOn(settingsPanel['hideTimeout'], 'suspend');
+
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Persistent });
+
+        expect(suspendTimeoutSpy).toHaveBeenCalled();
+      });
+
+      it('should resume the hide timeout when the last component left the persistent view mode', () => {
+        const resumeTimeoutSpy = jest.spyOn(settingsPanel['hideTimeout'], 'resume');
+
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Persistent });
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Persistent });
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Persistent });
+
+        expect(resumeTimeoutSpy).not.toHaveBeenCalled();
+
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Temporary });
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Temporary });
+
+        expect(resumeTimeoutSpy).not.toHaveBeenCalled();
+
+        uiInstanceManagerMock.onComponentViewModeChanged.dispatch(undefined, { mode: ViewMode.Temporary });
+
+        expect(resumeTimeoutSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('hideHoveredSelectBoxes', () => {
+      it('should close the dropdown on the select box', () => {
+        const selectBox = new SelectBox();
+        const closeDropdownSpy = jest.spyOn(selectBox, 'closeDropdown');
+
+        settingsPanel.getActivePage().addComponent(new SettingsPanelItem(new Label(), selectBox));
+        settingsPanel.getActivePage().addComponent(new SettingsPanelItem(new Label(), new VolumeSlider()));
+
+        settingsPanel['hideHoveredSelectBoxes']();
+
+        expect(closeDropdownSpy).toHaveBeenCalled();
+      });
+    });
   });
 });
diff --git a/spec/components/uicontainer.spec.ts b/spec/components/uicontainer.spec.ts
@@ -1,7 +1,8 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
 import { UIContainer } from '../../src/ts/components/uicontainer';
-import { UIInstanceManager } from '../../src/ts/uimanager';
 import { PlayerUtils } from '../../src/ts/playerutils';
+import type { UIInstanceManager } from '../../src/ts/uimanager';
+import type { TestingPlayerAPI } from '../helper/MockHelper';
+import { MockHelper } from '../helper/MockHelper';
 
 let playerMock: TestingPlayerAPI;
 let uiInstanceManagerMock: UIInstanceManager;
@@ -16,7 +17,7 @@ describe('UIContainer', () => {
   describe('release', () => {
     beforeEach(() => {
       uiContainer = new UIContainer({
-        hideDelay: -1, // With an hideDelay of -1 the uiHideTimeout and userInteractionEvents never will be initialized
+        hideDelay: 3000,
         components: [],
       });
     });
@@ -52,4 +53,44 @@ describe('UIContainer', () => {
       });
     });
   });
+
+  describe('configure', () => {
+    it('should subscribe to the onComponentViewModeChanged event', () => {
+      uiContainer = new UIContainer({ hideDelay: 3000, components: [] });
+      uiContainer.configure(playerMock, uiInstanceManagerMock);
+
+      expect(uiInstanceManagerMock.onComponentViewModeChanged.subscribe).toHaveBeenCalled();
+    });
+  });
+
+  describe('suspendHideTimeout', () => {
+    it('should suspend the hide timeout', () => {
+      uiContainer = new UIContainer({ hideDelay: 3000, components: [] });
+      uiContainer.configure(playerMock, uiInstanceManagerMock);
+
+      const suspendSpy = jest.spyOn(uiContainer['uiHideTimeout'], 'suspend');
+
+      uiContainer['suspendHideTimeout']();
+
+      expect(suspendSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('resumeHideTimeout', () => {
+    test.each`
+      hidingPrevented | shouldReset
+      ${true}         | ${false}
+      ${false}        | ${true}
+    `('should resume and reset=$shouldReset the hide timeout', ({ hidingPrevented, shouldReset }) => {
+      uiContainer = new UIContainer({ hideDelay: 3000, components: [] });
+      uiContainer.configure(playerMock, uiInstanceManagerMock);
+
+      const resume = jest.spyOn(uiContainer['uiHideTimeout'], 'resume');
+
+      uiContainer['hidingPrevented'] = () => hidingPrevented;
+      uiContainer['resumeHideTimeout']();
+
+      expect(resume).toHaveBeenCalledWith(shouldReset);
+    });
+  });
 });