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

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

@@ -1,12 +1,12 @@
-import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import {
   formatXAxisLabel,
   getLabelData,
   getRectColor,
-  getTimeSpanForGranularity,
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
-} from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
+} from '../../../../src/CrowdViewWidget/components/Chart/chartUtils';
+import { getTimeSpanForGranularity } from '../../../../src/CrowdViewWidget/components/Chart/dataUtils/getTimeSpanForGranularity';
+import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import { COLOR_MAP } from '../../../../src/CrowdViewWidget/constants';
 import {
   BookType,
@@ -231,7 +231,7 @@ describe('chartUtils', () => {
       expect(html).toContain('69.50');
     });
 
-    it('returns undefined when no candlestick param is provided', () => {
+    it('returns empty string when no candlestick param is provided', () => {
       const params: TooltipParam[] = [
         {
           seriesId: 'heatmap' as const,
@@ -249,10 +249,10 @@ describe('chartUtils', () => {
         bookType: BookType.Order,
         labelCallback,
       });
-      expect(html).toBeUndefined();
+      expect(html).toBe('');
     });
 
-    it('returns undefined when params is empty', () => {
+    it('returns empty string when params is empty', () => {
       const html = getTooltipFormatter({
         params: [],
         buckets: [],
@@ -261,7 +261,7 @@ describe('chartUtils', () => {
         bookType: BookType.Order,
         labelCallback,
       });
-      expect(html).toBeUndefined();
+      expect(html).toBe('');
     });
   });
 });

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

@@ -1,6 +1,6 @@
 import { colorPalette } from '@oanda/labs-widget-common';
 
-import { getChartStyles } from '../../../../src/CrowdViewWidget/components/Chart/utils/getChartStyles';
+import { getChartStyles } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getChartStyles';
 
 describe('getChartStyles', () => {
   it('returns correct styles for dark mode', () => {
@@ -10,9 +10,9 @@ describe('getChartStyles', () => {
     expect(styles.sentimentShortColor).toBe(colorPalette.darkYellow90);
     expect(styles.candleLongColor).toBe(colorPalette.bottleGreenDark);
     expect(styles.candleShortColor).toBe(colorPalette.orange);
-    expect(styles.sentimentAreaOpacity).toBe(0.5);
+    expect(styles.sentimentOutlineColor).toBe(colorPalette.black);
+    expect(styles.sentimentOutlineWidth).toBe(3);
     expect(styles.tooltipLinesColor).toBe(colorPalette.orange);
-    expect(styles.sentimentLabelColor).toBe(colorPalette.white);
   });
 
   it('returns correct styles for light mode', () => {
@@ -22,9 +22,9 @@ describe('getChartStyles', () => {
     expect(styles.sentimentShortColor).toBe(colorPalette.lightYellow90);
     expect(styles.candleLongColor).toBe(colorPalette.bottleGreenLight);
     expect(styles.candleShortColor).toBe(colorPalette.raspberryLight);
-    expect(styles.sentimentAreaOpacity).toBe(0.2);
+    expect(styles.sentimentOutlineColor).toBe(colorPalette.white);
+    expect(styles.sentimentOutlineWidth).toBe(2);
     expect(styles.tooltipLinesColor).toBe(colorPalette.bottleGreenLight);
-    expect(styles.sentimentLabelColor).toBe(colorPalette.black);
   });
 
   it('returns all required style properties', () => {
@@ -36,9 +36,9 @@ describe('getChartStyles', () => {
       'sentimentShortColor',
       'candleLongColor',
       'candleShortColor',
-      'sentimentAreaOpacity',
+      'sentimentOutlineColor',
+      'sentimentOutlineWidth',
       'tooltipLinesColor',
-      'sentimentLabelColor',
     ];
 
     requiredProperties.forEach((prop) => {
@@ -53,12 +53,12 @@ describe('getChartStyles', () => {
     });
   });
 
-  it('returns different opacity values for dark and light modes', () => {
+  it('returns different outline width values for dark and light modes', () => {
     const darkStyles = getChartStyles(true);
     const lightStyles = getChartStyles(false);
 
-    expect(darkStyles.sentimentAreaOpacity).toBeGreaterThan(
-      lightStyles.sentimentAreaOpacity
+    expect(darkStyles.sentimentOutlineWidth).toBeGreaterThan(
+      lightStyles.sentimentOutlineWidth
     );
   });
 });

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,27 +14,21 @@ 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(2);
       });
 
       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);
@@ -49,12 +44,9 @@ 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);

package/test/components/LegendBar.test.tsx

@@ -11,44 +11,17 @@ 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', () => {
         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);
       });
 
-      it('uses light mode colors when isDark is false', () => {
+      it('uses light mode colors when isDark is false for long type', () => {
         const { getByTestId } = render(
-          <LegendBar
-            isDark={false}
-            label="long"
-            type="long"
-            values={mockValues}
-          />
+          <LegendBar isDark={false} type="long" />
         );
         const segment = getByTestId('legend-bar-segment');
         const style = segment.getAttribute('style');
@@ -56,15 +29,8 @@ describe('Crowd View Widget', () => {
         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 { getByTestId } = render(<LegendBar isDark={true} type="long" />);
         const segment = getByTestId('legend-bar-segment');
         const style = segment.getAttribute('style');
         expect(style).toContain(COLOR_MAP.dark.long[0]);
@@ -73,12 +39,7 @@ describe('Crowd View Widget', () => {
 
       it('uses light mode short colors when isDark is false', () => {
         const { getByTestId } = render(
-          <LegendBar
-            isDark={false}
-            label="short"
-            type="short"
-            values={mockValues}
-          />
+          <LegendBar isDark={false} type="short" />
         );
         const segment = getByTestId('legend-bar-segment');
         const style = segment.getAttribute('style');
@@ -88,18 +49,37 @@ describe('Crowd View Widget', () => {
 
       it('uses dark mode short colors when isDark is true', () => {
         const { getByTestId } = render(
-          <LegendBar
-            isDark={true}
-            label="short"
-            type="short"
-            values={mockValues}
-          />
+          <LegendBar isDark={true} type="short" />
         );
         const segment = getByTestId('legend-bar-segment');
         const style = segment.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(
+          <LegendBar isDark={false} type="long" />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.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 { getByTestId } = render(
+          <LegendBar isDark={false} type="short" />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.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', () => {