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

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]);
+      });
     });
   });
 });