@oanda/labs-crowd-view-widget 1.0.54 → 1.0.55

package/test/components/Chart/utils/handleTooltipUpdate.test.ts

@@ -0,0 +1,140 @@
+import type { EChartsType } from 'echarts';
+
+import { handleTooltipUpdate } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/handleTooltipUpdate';
+
+describe('handleTooltipUpdate', () => {
+  let mockInstance: jest.Mocked<EChartsType>;
+  let zoomTimerRef: { current: NodeJS.Timeout | null };
+  let tooltipVisibleRef: { current: boolean };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+
+    mockInstance = {
+      setOption: jest.fn(),
+    } as unknown as jest.Mocked<EChartsType>;
+
+    zoomTimerRef = { current: null };
+    tooltipVisibleRef = { current: true };
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('when canHover is false', () => {
+    it('should not hide tooltip on touch devices', () => {
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, false);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+      expect(tooltipVisibleRef.current).toBe(true);
+    });
+  });
+
+  describe('when canHover is true', () => {
+    it('should hide tooltip immediately when visible', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: false,
+        },
+      });
+      expect(tooltipVisibleRef.current).toBe(false);
+    });
+
+    it('should not call setOption when tooltip is already hidden', () => {
+      tooltipVisibleRef.current = false;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should clear existing timeout before setting new one', () => {
+      const existingTimeout = setTimeout(() => {}, 1000);
+      zoomTimerRef.current = existingTimeout;
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(existingTimeout);
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should show tooltip after 100ms delay', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      // Tooltip should be hidden immediately
+      expect(tooltipVisibleRef.current).toBe(false);
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: false,
+        },
+      });
+
+      // Fast-forward time
+      jest.advanceTimersByTime(100);
+
+      // Tooltip should be shown again
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: true,
+        },
+      });
+      expect(tooltipVisibleRef.current).toBe(true);
+    });
+
+    it('should not show tooltip if it was already shown during timeout', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      // Manually set tooltip to visible before timeout
+      tooltipVisibleRef.current = true;
+
+      jest.advanceTimersByTime(100);
+
+      // Should not call setOption to show tooltip since it's already visible
+      const { calls } = mockInstance.setOption.mock;
+      expect(calls.length).toBe(1); // Only the hide call
+      expect(calls[0][0]).toEqual({
+        tooltip: {
+          show: false,
+        },
+      });
+    });
+
+    it('should reset timeout on subsequent calls', () => {
+      tooltipVisibleRef.current = true;
+
+      // First call
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+      const firstTimeout = zoomTimerRef.current;
+
+      // Second call before timeout
+      jest.advanceTimersByTime(50);
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+      const secondTimeout = zoomTimerRef.current;
+
+      // Timeouts should be different
+      expect(firstTimeout).not.toBe(secondTimeout);
+
+      // Fast-forward 100ms from second call (150ms total)
+      jest.advanceTimersByTime(100);
+
+      // Should only show tooltip once (from second call)
+      const showCalls = mockInstance.setOption.mock.calls.filter(
+        (call) =>
+          (call[0] as { tooltip?: { show: boolean } }).tooltip?.show === true
+      );
+      expect(showCalls.length).toBe(1);
+    });
+  });
+});

package/test/components/Legend.test.tsx

@@ -21,7 +21,7 @@ describe('Crowd View Widget', () => {
         );
 
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
       });
 
       it('passes isDark prop to LegendBar components in light mode', () => {
@@ -31,7 +31,7 @@ describe('Crowd View Widget', () => {
           </MockLayoutProvider>
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
         // Check that segments use light mode colors (either long or short)
         const styles = segments.map((segment) => segment.getAttribute('style'));
         const hasLightColors = styles.some(
@@ -49,7 +49,7 @@ describe('Crowd View Widget', () => {
           </MockLayoutProvider>
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
         // Check that segments use dark mode colors (either long or short)
         const styles = segments.map((segment) => segment.getAttribute('style'));
         const hasDarkColors = styles.some(

package/test/components/LegendBar.test.tsx

@@ -11,58 +11,60 @@ import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 describe('Crowd View Widget', () => {
   describe('components', () => {
     describe('<LegendBar />', () => {
-      it('renders exactly 1 segment', () => {
+      it('renders exactly 2 segments', () => {
         const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(1);
+        expect(segments.length).toBe(2);
       });
 
       it('uses light mode colors when isDark is false for long type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="long" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.light.long[0]);
         expect(style).toContain(COLOR_MAP.light.long[1]);
       });
 
       it('uses dark mode colors when isDark is true for long type', () => {
-        const { getByTestId } = render(<LegendBar isDark={true} type="long" />);
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const { getAllByTestId } = render(
+          <LegendBar isDark={true} type="long" />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.dark.long[0]);
         expect(style).toContain(COLOR_MAP.dark.long[1]);
       });
 
       it('uses light mode short colors when isDark is false', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.light.short[0]);
         expect(style).toContain(COLOR_MAP.light.short[1]);
       });
 
       it('uses dark mode short colors when isDark is true', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={true} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.dark.short[0]);
         expect(style).toContain(COLOR_MAP.dark.short[1]);
       });
 
       it('renders gradient with correct direction for long type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="long" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         // Long type should use long[1] as start and long[0] as end
         expect(style).toMatch(/linear-gradient\(90deg/);
         expect(style).toContain(COLOR_MAP.light.long[1]);
@@ -70,11 +72,11 @@ describe('Crowd View Widget', () => {
       });
 
       it('renders gradient with correct direction for short type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         // Short type should use short[0] as start and short[1] as end
         expect(style).toMatch(/linear-gradient\(90deg/);
         expect(style).toContain(COLOR_MAP.light.short[0]);