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

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', () => {

package/test/utils/processOrderPositionBooks.test.ts

@@ -3,125 +3,242 @@ import type { GetOrderPositionBooksQuery } from '../../src/gql/types/graphql';
 
 describe('processOrderPositionBooks', () => {
   const createMockOrderPositionBook = (time: string) => ({
-    bucketWidth: 0.0005,
-    price: 1.0,
     time,
-    buckets: [{ price: 1.0, sentiment: 0.2 }],
+    price: 1.0,
+    buckets: [
+      { price: 1.0, sentiment: 0.2 },
+      { price: 1.0005, sentiment: -0.3 },
+    ],
   });
 
-  it('should return empty array when orderPositionData is undefined', () => {
-    const candleMap = new Map();
-    expect(processOrderPositionBooks(undefined, candleMap)).toEqual([]);
+  it('should return empty arrays when orderPositionData is undefined', () => {
+    const result = processOrderPositionBooks(undefined, []);
+    expect(result).toEqual({
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    });
   });
 
-  it('should return empty array when orderPositionBooks is empty', () => {
+  it('should return empty arrays when orderPositionBooks is undefined', () => {
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [],
+      orderPositionBooks: {} as any,
     };
-    const candleMap = new Map();
-    expect(processOrderPositionBooks(mockData, candleMap)).toEqual([]);
+    const result = processOrderPositionBooks(mockData, []);
+    expect(result).toEqual({
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    });
   });
 
-  it('should filter out null books', () => {
+  it('should return empty arrays when books array is empty', () => {
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [null, createMockOrderPositionBook('2025-01-01')],
+      orderPositionBooks: {
+        books: [],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map();
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(1);
-    expect(result[0]).toEqual(['2025-01-01', null, 0]);
+    const result = processOrderPositionBooks(mockData, []);
+    expect(result).toEqual({
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    });
   });
 
-  it('should filter out books with no buckets', () => {
+  it('should return empty arrays when sentimentThresholdMin is missing', () => {
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [
-        {
-          bucketWidth: 0.0005,
-          price: 1.0,
-          time: '2025-01-01',
-          buckets: [],
-        },
-        createMockOrderPositionBook('2025-01-02'),
-      ],
+      orderPositionBooks: {
+        books: [createMockOrderPositionBook('2025-01-01T00:00:00Z')],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: null as any,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map();
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(1);
-    expect(result[0]).toEqual(['2025-01-02', null, 0]);
+    const result = processOrderPositionBooks(mockData, [
+      '2025-01-01T00:00:00Z',
+    ]);
+    expect(result.hasValidBooks).toBe(false);
   });
 
-  it('should use candle high price when available in map', () => {
+  it('should process valid order position books and match with dates', () => {
+    const dates = [
+      '2025-01-01T00:00:00Z',
+      '2025-01-01T01:00:00Z',
+      '2025-01-01T02:00:00Z',
+    ];
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [
-        createMockOrderPositionBook('2025-01-01'),
-        createMockOrderPositionBook('2025-01-02'),
-      ],
+      orderPositionBooks: {
+        books: [
+          createMockOrderPositionBook('2025-01-01T00:00:00Z'),
+          createMockOrderPositionBook('2025-01-01T01:00:00Z'),
+        ],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map([
-      ['2025-01-01', { high: 1.1234 }],
-      ['2025-01-02', { high: 1.5678 }],
-    ]);
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(2);
-    expect(result[0]).toEqual(['2025-01-01', 1.1234, 0]);
-    expect(result[1]).toEqual(['2025-01-02', 1.5678, 1]);
+    const result = processOrderPositionBooks(mockData, dates);
+    expect(result.hasValidBooks).toBe(true);
+    expect(result.bucketWidth).toBe(0.0005);
+    expect(result.sentimentThresholdMin).toBe(0.15);
+    expect(result.sentimentThresholdMax).toBe(0.55);
+    expect(result.bookPrices).toHaveLength(3);
+    expect(result.bookIndexes).toHaveLength(3);
+    expect(result.buckets).toHaveLength(3);
+    expect(result.bookPrices[0]).toBe(1.0);
+    expect(result.bookPrices[1]).toBe(1.0);
+    expect(result.bookPrices[2]).toBeNull();
+    expect(result.bookIndexes).toEqual([0, 1, 2]);
+    expect(result.buckets[0]).toHaveLength(2);
+    expect(result.buckets[1]).toHaveLength(2);
+    expect(result.buckets[2]).toEqual([]);
   });
 
-  it('should use null when candle is not in map', () => {
+  it('should handle dates that do not match any book', () => {
+    const dates = [
+      '2025-01-01T00:00:00Z',
+      '2025-01-01T01:00:00Z',
+      '2025-01-01T02:00:00Z',
+    ];
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [createMockOrderPositionBook('2025-01-01')],
+      orderPositionBooks: {
+        books: [createMockOrderPositionBook('2025-01-01T00:00:00Z')],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map();
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(1);
-    expect(result[0]).toEqual(['2025-01-01', null, 0]);
+    const result = processOrderPositionBooks(mockData, dates);
+    expect(result.bookPrices).toEqual([1.0, null, null]);
+    expect(result.buckets[0]).toHaveLength(2);
+    expect(result.buckets[1]).toEqual([]);
+    expect(result.buckets[2]).toEqual([]);
   });
 
-  it('should use null when candle high is undefined', () => {
+  it('should handle books with null price', () => {
+    const dates = ['2025-01-01T00:00:00Z'];
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [createMockOrderPositionBook('2025-01-01')],
+      orderPositionBooks: {
+        books: [
+          {
+            time: '2025-01-01T00:00:00Z',
+            price: null,
+            buckets: [{ price: 1.0, sentiment: 0.2 }],
+          },
+        ],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map([
-      ['2025-01-01', { low: 1.0 }], // no high property
+    const result = processOrderPositionBooks(mockData, dates);
+    expect(result.bookPrices[0]).toBeNull();
+    expect(result.buckets[0]).toHaveLength(1);
+  });
+
+  it('should correctly map buckets structure', () => {
+    const dates = ['2025-01-01T00:00:00Z'];
+    const mockData: GetOrderPositionBooksQuery = {
+      orderPositionBooks: {
+        books: [
+          {
+            time: '2025-01-01T00:00:00Z',
+            price: 1.0,
+            buckets: [
+              { price: 1.0, sentiment: 0.2 },
+              { price: 1.0005, sentiment: -0.3 },
+              { price: 1.001, sentiment: 0.5 },
+            ],
+          },
+        ],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
+    };
+    const result = processOrderPositionBooks(mockData, dates);
+    expect(result.buckets[0]).toEqual([
+      { price: 1.0, sentiment: 0.2 },
+      { price: 1.0005, sentiment: -0.3 },
+      { price: 1.001, sentiment: 0.5 },
     ]);
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(1);
-    expect(result[0]).toEqual(['2025-01-01', null, 0]);
   });
 
-  it('should correctly assign index to each book', () => {
+  it('should handle duplicate time values in books array (last one wins)', () => {
+    const dates = ['2025-01-01T00:00:00Z'];
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [
-        createMockOrderPositionBook('2025-01-01'),
-        createMockOrderPositionBook('2025-01-02'),
-        createMockOrderPositionBook('2025-01-03'),
-      ],
+      orderPositionBooks: {
+        books: [
+          {
+            time: '2025-01-01T00:00:00Z',
+            price: 1.0,
+            buckets: [{ price: 1.0, sentiment: 0.2 }],
+          },
+          {
+            time: '2025-01-01T00:00:00Z',
+            price: 1.5,
+            buckets: [{ price: 1.5, sentiment: 0.8 }],
+          },
+        ],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map();
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(3);
-    expect(result[0][2]).toBe(0);
-    expect(result[1][2]).toBe(1);
-    expect(result[2][2]).toBe(2);
+    const result = processOrderPositionBooks(mockData, dates);
+    // Last entry should win
+    expect(result.bookPrices[0]).toBe(1.5);
+    expect(result.buckets[0]).toEqual([{ price: 1.5, sentiment: 0.8 }]);
   });
 
-  it('should handle mixed cases with and without candles', () => {
+  it('should return empty arrays when dates array is empty', () => {
     const mockData: GetOrderPositionBooksQuery = {
-      orderPositionBooks: [
-        createMockOrderPositionBook('2025-01-01'),
-        createMockOrderPositionBook('2025-01-02'),
-        createMockOrderPositionBook('2025-01-03'),
-      ],
+      orderPositionBooks: {
+        books: [createMockOrderPositionBook('2025-01-01T00:00:00Z')],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
     };
-    const candleMap = new Map([
-      ['2025-01-01', { high: 1.1111 }],
-      // 2025-01-02 missing from map
-      ['2025-01-03', { high: 1.3333 }],
-    ]);
-    const result = processOrderPositionBooks(mockData, candleMap);
-    expect(result).toHaveLength(3);
-    expect(result[0]).toEqual(['2025-01-01', 1.1111, 0]);
-    expect(result[1]).toEqual(['2025-01-02', null, 1]);
-    expect(result[2]).toEqual(['2025-01-03', 1.3333, 2]);
+    const result = processOrderPositionBooks(mockData, []);
+    expect(result).toEqual({
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    });
+  });
+
+  it('should return empty arrays when dates is not an array', () => {
+    const mockData: GetOrderPositionBooksQuery = {
+      orderPositionBooks: {
+        books: [createMockOrderPositionBook('2025-01-01T00:00:00Z')],
+        bucketWidth: 0.0005,
+        sentimentThresholdMin: 0.15,
+        sentimentThresholdMax: 0.55,
+      },
+    };
+    // @ts-expect-error - Testing invalid input
+    const result = processOrderPositionBooks(mockData, null);
+    expect(result.hasValidBooks).toBe(false);
   });
 });