@oanda/labs-value-at-risk-widget 1.0.64 → 1.0.66

package/test/ChartWithData.test.tsx

@@ -1,27 +1,35 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
-import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
-import { getValueAtRiskChartErrorMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import {
+  Division,
+  ValueAtRiskBars,
+  ValueAtRiskDuration,
+} from '../src/gql/types/graphql';
 import { ChartWithData } from '../src/ValueAtRiskWidget/ChartWithData';
+import {
+  getValueAtRiskChartErrorMock,
+  getValueAtRiskChartMock,
+} from './mocks/responsesMocks';
 
 describe('ChartWithData component', () => {
   it('should render chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
-            division={Division.Oc}
-            instrument="CORN"
             bars={ValueAtRiskBars.C100}
+            division={Division.Oc}
             duration={ValueAtRiskDuration.C1}
+            instrument="CORN"
           />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(await findByTestId('value-at-risk-chart')).toBeInTheDocument();
@@ -30,15 +38,15 @@ describe('ChartWithData component', () => {
   it('should render mobile chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
-            division={Division.Oc}
-            instrument="CORN"
             bars={ValueAtRiskBars.C100}
+            division={Division.Oc}
             duration={ValueAtRiskDuration.C1}
+            instrument="CORN"
           />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(await findByTestId('value-at-risk-chart')).toBeInTheDocument();
@@ -47,15 +55,15 @@ describe('ChartWithData component', () => {
   it('should render error view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartErrorMock}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
-            division={Division.Oc}
-            instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
+            division={Division.Oc}
             duration={ValueAtRiskDuration.C1}
+            instrument="AUD_USD"
           />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(await findByTestId('chart-error')).toBeInTheDocument();

package/test/Tool.test.tsx

@@ -1,13 +1,14 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+
+import { Division } from '../src/gql/types/graphql';
 import { Tool } from '../src/ValueAtRiskWidget/Tool';
 import { assetClassesMock, getValueAtRiskChartMock } from './mocks';
-import { Division } from '../src/gql/types/graphql';
 
 const data = {
   valueAtRiskAssetClasses: assetClassesMock,
@@ -17,37 +18,50 @@ describe('Tool component', () => {
   it('should render tool view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Tool
-            data={data}
-            division={Division.Oc}
-          />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        <MockLayoutProvider>
+          <Tool data={data} division={Division.Oc} />
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(getByTestId('value-at-risk-tool-wrapper')).toBeInTheDocument();
   });
   it('should change asset class and instruments list on click', () => {
     const { container, getByTestId } = render(
-      <MockedProvider mocks={[...getValueAtRiskChartMock('AUD_USD'), ...getValueAtRiskChartMock('AUS200')]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Tool
-            data={data}
-            division={Division.Oc}
-          />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+      <MockedProvider
+        mocks={[
+          ...getValueAtRiskChartMock('AUD_USD'),
+          ...getValueAtRiskChartMock('AUS200'),
+        ]}
+      >
+        <MockLayoutProvider>
+          <Tool data={data} division={Division.Oc} />
+        </MockLayoutProvider>
+      </MockedProvider>
     );
     expect(getByTestId('value-at-risk-tool-wrapper')).toBeInTheDocument();
-    expect(container.querySelector('div[data-testid="select"] div')).toHaveTextContent('Currency');
-    expect(container.querySelector('div[data-testid="select"]:nth-child(2) div')).toHaveTextContent('AUD/USD');
+    expect(
+      container.querySelector('div[data-testid="select"] div')
+    ).toHaveTextContent('Currency');
+    expect(
+      container.querySelector('div[data-testid="select"]:nth-child(2) div')
+    ).toHaveTextContent('AUD/USD');
 
-    fireEvent.click(container.querySelector('div[data-testid="select"] div') as any);
+    fireEvent.click(
+      container.querySelector('div[data-testid="select"] div') as any
+    );
 
-    fireEvent.click(container.querySelector('ul[data-testid="select-options"] li:nth-child(2) button') as any);
+    fireEvent.click(
+      container.querySelector(
+        'ul[data-testid="select-options"] li:nth-child(2) button'
+      ) as any
+    );
 
-    expect(container.querySelector('div[data-testid="select"] div')).toHaveTextContent('Indices');
-    expect(container.querySelector('div[data-testid="select"]:nth-child(2) div')).toHaveTextContent('Australia 200');
+    expect(
+      container.querySelector('div[data-testid="select"] div')
+    ).toHaveTextContent('Indices');
+    expect(
+      container.querySelector('div[data-testid="select"]:nth-child(2) div')
+    ).toHaveTextContent('Australia 200');
   });
 });

package/test/ToolWithData.test.tsx

@@ -1,26 +1,37 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
-import { ToolWithData } from '../src/ValueAtRiskWidget/ToolWithData';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { Division } from '../src/gql/types/graphql';
-import { getValueAtRiskAssetClassesMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
+import { ToolWithData } from '../src/ValueAtRiskWidget/ToolWithData';
+import {
+  getValueAtRiskAssetClassesMock,
+  getValueAtRiskChartMock,
+} from './mocks/responsesMocks';
 
 describe('Main component', () => {
   it('should render tool view', async () => {
     const { findByTestId } = render(
-      <MockedProvider mocks={[...getValueAtRiskAssetClassesMock, ...getValueAtRiskChartMock()]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+      <MockedProvider
+        mocks={[
+          ...getValueAtRiskAssetClassesMock,
+          ...getValueAtRiskChartMock(),
+        ]}
+      >
+        <MockLayoutProvider isDark={false}>
           <ToolWithData division={Division.Oc} />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(await findByTestId('value-at-risk-wrapper')).toBeInTheDocument();
 
-    expect(await findByTestId('value-at-risk-tool-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('value-at-risk-tool-wrapper')
+    ).toBeInTheDocument();
   });
 });

package/test/Widget.test.tsx

@@ -1,27 +1,32 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
-import { getValueAtRiskChartMock } from './mocks';
-import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import {
+  Division,
+  ValueAtRiskBars,
+  ValueAtRiskDuration,
+} from '../src/gql/types/graphql';
 import { Widget } from '../src/ValueAtRiskWidget/Widget';
+import { getValueAtRiskChartMock } from './mocks';
 
 describe('Widget component', () => {
   it('should render widget view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Widget
-            division={Division.Oc}
-            instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
+            division={Division.Oc}
             duration={ValueAtRiskDuration.C1}
+            instrument="AUD_USD"
           />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(getByTestId('value-at-risk-widget-wrapper')).toBeInTheDocument();

package/test/getPercentValueByPips.test.ts

@@ -2,7 +2,11 @@ import { getPercentValueByPips } from '../src/ValueAtRiskWidget/components/Chart
 
 describe('getPercentValueByPips', () => {
   it('should return undefined when value is not in range', () => {
-    const values = [[-80, 10], [-20, 20], [20, 30]];
+    const values = [
+      [-80, 10],
+      [-20, 20],
+      [20, 30],
+    ];
 
     expect(getPercentValueByPips(-100, values)).toEqual(undefined);
     expect(getPercentValueByPips(20, values)).toEqual(undefined);
@@ -10,14 +14,22 @@ describe('getPercentValueByPips', () => {
   });
 
   it('should return correct value for positive values', () => {
-    const values = [[10, 4], [20, 6], [30, 8]];
+    const values = [
+      [10, 4],
+      [20, 6],
+      [30, 8],
+    ];
 
     expect(getPercentValueByPips(15, values)).toEqual(5);
     expect(getPercentValueByPips(20, values)).toEqual(6);
     expect(getPercentValueByPips(25, values)).toEqual(7);
   });
   it('should return correct value for negative values', () => {
-    const values = [[-30, 4], [-20, 6], [-10, 8]];
+    const values = [
+      [-30, 4],
+      [-20, 6],
+      [-10, 8],
+    ];
 
     expect(getPercentValueByPips(-25, values)).toEqual(5);
     expect(getPercentValueByPips(-20, values)).toEqual(6);

package/test/mocks/assetClassesMock.ts

@@ -111,6 +111,4 @@ const assetClassesMock = [
   },
 ];
 
-export {
-  assetClassesMock,
-};
+export { assetClassesMock };

package/test/mocks/responsesMocks.ts

@@ -1,6 +1,10 @@
 import { getValueAtRiskAssetClasses } from '../../src/gql/getValueAtRiskAssetClasses';
 import { getValueAtRiskChart } from '../../src/gql/getValueAtRiskChart';
-import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../../src/gql/types/graphql';
+import {
+  Division,
+  ValueAtRiskBars,
+  ValueAtRiskDuration,
+} from '../../src/gql/types/graphql';
 import { assetClassesMock } from './assetClassesMock';
 import { valueAtRiskChartMock } from './valueAtRiskChartMock';
 
@@ -56,6 +60,6 @@ const getValueAtRiskChartErrorMock = [
 
 export {
   getValueAtRiskAssetClassesMock,
-  getValueAtRiskChartMock,
   getValueAtRiskChartErrorMock,
+  getValueAtRiskChartMock,
 };

package/test/utils.test.ts

@@ -41,25 +41,32 @@ describe('sortAlphabetically', () => {
       {
         displayName: 'AUD/USD',
         name: 'AUD_USD',
-      }, {
+      },
+      {
         displayName: 'EUR/CZK',
         name: 'EUR_CZK',
-      }, {
+      },
+      {
         displayName: 'EUR/HKD',
         name: 'EUR_HKD',
-      }, {
+      },
+      {
         displayName: 'EUR/PLN',
         name: 'EUR_PLN',
-      }, {
+      },
+      {
         displayName: 'EUR/SGD',
         name: 'EUR_SGD',
-      }, {
+      },
+      {
         displayName: 'GBP/CHF',
         name: 'GBP_CHF',
-      }, {
+      },
+      {
         displayName: 'GBP/HKD',
         name: 'GBP_HKD',
-      }, {
+      },
+      {
         displayName: 'GBP/SGD',
         name: 'GBP_SGD',
       },