@oanda/labs-crowd-view-widget 1.0.53 → 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/Chart/utils/processSentiments.test.ts

@@ -1,4 +1,4 @@
-import { processSentiments } from '../../../../src/CrowdViewWidget/components/Chart/utils/processSentiments';
+import { processSentiments } from '../../../../src/CrowdViewWidget/components/Chart/dataUtils/processSentiments';
 import type { GetSentimentsQuery } from '../../../../src/gql/types/graphql';
 
 describe('processSentiments', () => {

package/test/components/Legend.test.tsx

@@ -2,6 +2,7 @@
  * @jest-environment jsdom
  */
 
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { render } from '@testing-library/react';
 import React from 'react';
 
@@ -13,30 +14,24 @@ describe('Crowd View Widget', () => {
   describe('components', () => {
     describe('<Legend />', () => {
       it('renders two LegendBar components', () => {
-        const { getAllByText } = render(
-          <Legend
-            bookType={BookType.Position}
-            isDark={false}
-            longValues={[0.15, 0.55]}
-            shortValues={[0.15, 0.55]}
-          />
+        const { getAllByTestId } = render(
+          <MockLayoutProvider isDark={false}>
+            <Legend bookType={BookType.Position} />
+          </MockLayoutProvider>
         );
 
-        expect(getAllByText(/long/)).toHaveLength(1);
-        expect(getAllByText(/short/)).toHaveLength(1);
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(4);
       });
 
       it('passes isDark prop to LegendBar components in light mode', () => {
         const { getAllByTestId } = render(
-          <Legend
-            bookType={BookType.Position}
-            isDark={false}
-            longValues={[0.15, 0.55]}
-            shortValues={[0.15, 0.55]}
-          />
+          <MockLayoutProvider isDark={false}>
+            <Legend bookType={BookType.Position} />
+          </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,15 +44,12 @@ describe('Crowd View Widget', () => {
 
       it('passes isDark prop to LegendBar components in dark mode', () => {
         const { getAllByTestId } = render(
-          <Legend
-            bookType={BookType.Position}
-            isDark={true}
-            longValues={[0.15, 0.55]}
-            shortValues={[0.15, 0.55]}
-          />
+          <MockLayoutProvider isDark={true}>
+            <Legend bookType={BookType.Position} />
+          </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,95 +11,77 @@ import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 describe('Crowd View Widget', () => {
   describe('components', () => {
     describe('<LegendBar />', () => {
-      const mockValues = [0.15, 0.55];
-
-      it('renders LegendBar with min and max values', () => {
-        const { getByText } = render(
-          <LegendBar
-            isDark={false}
-            label="long"
-            type="long"
-            values={mockValues}
-          />
-        );
-
-        expect(getByText('long')).toBeInTheDocument();
-        expect(getByText('0.15%')).toBeInTheDocument();
-        expect(getByText('≤ 0.55%')).toBeInTheDocument();
-      });
-
-      it('renders exactly 1 segment', () => {
+      it('renders exactly 2 segments', () => {
         const { getAllByTestId } = render(
-          <LegendBar
-            isDark={false}
-            label="short"
-            type="short"
-            values={mockValues}
-          />
+          <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', () => {
-        const { getByTestId } = render(
-          <LegendBar
-            isDark={false}
-            label="long"
-            type="long"
-            values={mockValues}
-          />
+      it('uses light mode colors when isDark is false for long type', () => {
+        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', () => {
-        const { getByTestId } = render(
-          <LegendBar
-            isDark={true}
-            label="long"
-            type="long"
-            values={mockValues}
-          />
+      it('uses dark mode colors when isDark is true for long type', () => {
+        const { getAllByTestId } = render(
+          <LegendBar isDark={true} 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.dark.long[0]);
         expect(style).toContain(COLOR_MAP.dark.long[1]);
       });
 
       it('uses light mode short colors when isDark is false', () => {
-        const { getByTestId } = render(
-          <LegendBar
-            isDark={false}
-            label="short"
-            type="short"
-            values={mockValues}
-          />
+        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(
-          <LegendBar
-            isDark={true}
-            label="short"
-            type="short"
-            values={mockValues}
-          />
+        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 { getAllByTestId } = render(
+          <LegendBar isDark={false} type="long" />
+        );
+        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]);
+        expect(style).toContain(COLOR_MAP.light.long[0]);
+      });
+
+      it('renders gradient with correct direction for short type', () => {
+        const { getAllByTestId } = render(
+          <LegendBar isDark={false} type="short" />
+        );
+        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]);
+        expect(style).toContain(COLOR_MAP.light.short[1]);
+      });
     });
   });
 });

package/test/utils/instrumentUtils.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { getInstrumentConfigForDivision } from '../../src/CrowdViewWidget/utils/instrumentUtils';
+import { getInstrumentConfigForDivision } from '../../src/CrowdViewWidget/components/Chart/dataUtils/getInstrumentConfigForDivision';
 import { Division } from '../../src/gql/types/graphql';
 
 describe('instrumentUtils', () => {