overlayscrollbars-react v0.5.0

packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { describe, test, afterEach, expect, vitest } from 'vitest';
+import { describe, test, afterEach, expect, vitest, vi } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OverlayScrollbars } from 'overlayscrollbars';
@@ -7,6 +7,15 @@ import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
 import type { RefObject } from 'react';
 import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 
+vi.useFakeTimers({
+  toFake: [
+    'requestAnimationFrame',
+    'cancelAnimationFrame',
+    'requestIdleCallback',
+    'cancelIdleCallback',
+  ],
+});
+
 describe('OverlayScrollbarsComponent', () => {
   afterEach(() => cleanup());
 
@@ -118,6 +127,44 @@ describe('OverlayScrollbarsComponent', () => {
     });
   });
 
+  describe('deferred initialization', () => {
+    test('basic defer', () => {
+      const { container } = render(<OverlayScrollbarsComponent defer />);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeUndefined();
+
+      vi.advanceTimersByTime(2000);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeDefined();
+    });
+
+    test('options defer', () => {
+      const { container } = render(<OverlayScrollbarsComponent defer={{ timeout: 0 }} />);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeUndefined();
+
+      vi.advanceTimersByTime(2000);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeDefined();
+    });
+
+    test('defer with unsupported Idle', () => {
+      const original = window.requestIdleCallback;
+      // @ts-ignore
+      window.requestIdleCallback = undefined;
+
+      const { container } = render(<OverlayScrollbarsComponent defer />);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeUndefined();
+
+      vi.advanceTimersByTime(2000);
+
+      expect(OverlayScrollbars(container.firstElementChild! as HTMLElement)).toBeDefined();
+
+      window.requestIdleCallback = original;
+    });
+  });
+
   test('ref', () => {
     const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
     const { container } = render(<OverlayScrollbarsComponent ref={ref} />);

packages/overlayscrollbars-react/test/useOverlayScrollbars.test.tsx

@@ -2,8 +2,8 @@ import { useRef } from 'react';
 import { describe, test, afterEach, expect } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { OverlayScrollbars } from 'overlayscrollbars';
 import { useOverlayScrollbars } from '~/overlayscrollbars-react';
-import type { OverlayScrollbars } from 'overlayscrollbars';
 
 describe('useOverlayScrollbars', () => {
   afterEach(() => cleanup());
@@ -13,25 +13,22 @@ describe('useOverlayScrollbars', () => {
       const instanceRef = useRef<OverlayScrollbars | null>(null);
       const [initialize, instance] = useOverlayScrollbars();
       return (
-        <>
-          <button
-            onClick={(event) => {
-              const osInstance = initialize(event.target as HTMLElement);
-              if (instanceRef.current) {
-                expect(instanceRef.current).toBe(osInstance);
-                expect(instanceRef.current).toBe(instance());
-              }
-              instanceRef.current = osInstance;
+        <button
+          onClick={(event) => {
+            initialize(event.target as HTMLElement);
+            if (instanceRef.current) {
               expect(instanceRef.current).toBe(instance());
-            }}
-          >
-            initialize
-          </button>
-        </>
+            }
+            instanceRef.current = instance();
+            expect(instanceRef.current).toBe(instance());
+          }}
+        >
+          initialize
+        </button>
       );
     };
 
-    render(<Test />);
+    const { unmount } = render(<Test />);
 
     const initializeBtn = screen.getByRole('button');
     userEvent.click(initializeBtn);
@@ -41,5 +38,11 @@ describe('useOverlayScrollbars', () => {
     userEvent.click(initializeBtn);
 
     expect(snapshot).toBe(initializeBtn.innerHTML);
+
+    expect(OverlayScrollbars(initializeBtn)).toBeDefined();
+
+    unmount();
+
+    expect(OverlayScrollbars(initializeBtn)).toBeUndefined();
   });
 });