@oanda/labs-crowd-view-widget 1.0.47 → 1.0.48

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

@@ -48,20 +48,37 @@ describe('chartUtils', () => {
   });
 
   describe('getRectColor', () => {
-    it('uses long color scale for positive sentiment', () => {
-      const color = getRectColor(BOOKS_THRESHOLDS.MAX);
+    it('uses long color scale for positive sentiment in light mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       // At max threshold, should be at or near target color
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.long[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.long[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
 
-    it('uses short color scale for negative sentiment', () => {
-      const color = getRectColor(-BOOKS_THRESHOLDS.MAX);
+    it('uses short color scale for negative sentiment in light mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.short[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.short[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses long color scale for positive sentiment in dark mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      // At max threshold, should be at or near target color
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.long[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses short color scale for negative sentiment in dark mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.short[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
   });

package/test/components/Legend.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Legend } from '../../src/CrowdViewWidget/components';
+import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 import { BookType } from '../../src/gql/types/graphql';
 
 describe('Crowd View Widget', () => {
@@ -15,6 +16,7 @@ describe('Crowd View Widget', () => {
         const { getAllByText } = render(
           <Legend
             bookType={BookType.Position}
+            isDark={false}
             longValues={[0.15, 0.55]}
             shortValues={[0.15, 0.55]}
           />
@@ -23,6 +25,48 @@ describe('Crowd View Widget', () => {
         expect(getAllByText(/long/)).toHaveLength(1);
         expect(getAllByText(/short/)).toHaveLength(1);
       });
+
+      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]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use light mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasLightColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.light.long[0]) ||
+            style?.includes(COLOR_MAP.light.short[0])
+        );
+        expect(hasLightColors).toBe(true);
+      });
+
+      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]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use dark mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasDarkColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.dark.long[0]) ||
+            style?.includes(COLOR_MAP.dark.short[0])
+        );
+        expect(hasDarkColors).toBe(true);
+      });
     });
   });
 });

package/test/components/LegendBar.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { LegendBar } from '../../src/CrowdViewWidget/components';
+import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 
 describe('Crowd View Widget', () => {
   describe('components', () => {
@@ -14,7 +15,12 @@ describe('Crowd View Widget', () => {
 
       it('renders LegendBar with min and max values', () => {
         const { getByText } = render(
-          <LegendBar label="long" type="long" values={mockValues} />
+          <LegendBar
+            isDark={false}
+            label="long"
+            type="long"
+            values={mockValues}
+          />
         );
 
         expect(getByText('long')).toBeInTheDocument();
@@ -24,11 +30,76 @@ describe('Crowd View Widget', () => {
 
       it('renders exactly 1 segment', () => {
         const { getAllByTestId } = render(
-          <LegendBar label="short" type="short" values={mockValues} />
+          <LegendBar
+            isDark={false}
+            label="short"
+            type="short"
+            values={mockValues}
+          />
         );
         const segments = getAllByTestId('legend-bar-segment');
         expect(segments.length).toBe(1);
       });
+
+      it('uses light mode colors when isDark is false', () => {
+        const { getByTestId } = render(
+          <LegendBar
+            isDark={false}
+            label="long"
+            type="long"
+            values={mockValues}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.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}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.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 segment = getByTestId('legend-bar-segment');
+        const style = segment.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 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]);
+      });
     });
   });
 });