test: Split test utilities to improve test times (#2622)

tests/components-lib/media-height-controller.test.ts

@@ -1,6 +1,18 @@
-import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
 
-import { MediaHeightController } from '../../src/components-lib/media-height-controller';
+import {
+  MediaHeightController,
+  SET_HEIGHT_DEBOUNCE_SECONDS,
+} from '../../src/components-lib/media-height-controller';
 import {
   callMutationHandler,
   callResizeHandler,
@@ -8,11 +20,6 @@ import {
   ResizeObserverMock,
 } from '../test-utils';
 
-vi.mock('lodash-es', async () => ({
-  ...(await vi.importActual('lodash-es')),
-  debounce: vi.fn((fn) => fn),
-}));
-
 // @vitest-environment jsdom
 describe('MediaHeightController', () => {
   beforeAll(() => {
@@ -26,6 +33,11 @@ describe('MediaHeightController', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
   });
 
   describe('should set height', () => {
@@ -47,6 +59,8 @@ describe('MediaHeightController', () => {
 
       controller.setSelected(0);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe(`600px`);
     });
 
@@ -60,6 +74,8 @@ describe('MediaHeightController', () => {
 
       controller.setSelected(10);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('');
     });
 
@@ -86,6 +102,8 @@ describe('MediaHeightController', () => {
         },
       ]);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('800px');
     });
 
@@ -111,6 +129,8 @@ describe('MediaHeightController', () => {
         },
       ]);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('');
     });
 
@@ -137,6 +157,8 @@ describe('MediaHeightController', () => {
 
       controller.setSelected(1);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('200px');
     });
 
@@ -154,6 +176,8 @@ describe('MediaHeightController', () => {
       controller.setRoot(root);
       controller.setSelected(0);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('700px');
 
       child.getBoundingClientRect = vi.fn().mockReturnValue({
@@ -162,9 +186,30 @@ describe('MediaHeightController', () => {
 
       controller.recalculate();
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('900px');
     });
 
+    it('should not set height when the selected child has no height', () => {
+      const host = document.createElement('div');
+      const controller = new MediaHeightController(host, 'div');
+
+      const root = document.createElement('div');
+      const child = document.createElement('div');
+      child.getBoundingClientRect = vi.fn().mockReturnValue({
+        height: 0,
+      });
+      root.appendChild(child);
+
+      controller.setRoot(root);
+      controller.setSelected(0);
+
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
+      expect(host.style.maxHeight).toBe('');
+    });
+
     it('should allow height to shrink when selected child is shorter', () => {
       const host = document.createElement('div');
       const controller = new MediaHeightController(host, 'div');
@@ -184,10 +229,14 @@ describe('MediaHeightController', () => {
       controller.setRoot(root);
       controller.setSelected(0);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('750px');
 
       controller.setSelected(1);
 
+      vi.advanceTimersByTime(SET_HEIGHT_DEBOUNCE_SECONDS * 1000);
+
       expect(host.style.maxHeight).toBe('562px');
     });
   });