@oanda/labs-live-rates-table-widget 1.0.38 → 1.0.40

package/test/LineChartWithData.test.tsx

@@ -1,12 +1,13 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { LineChartWithData } from '../src/LiveRatesTableWidget/components/LineChartWithData';
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
 import { Division } from '../src/gql/types/graphql';
+import { LineChartWithData } from '../src/LiveRatesTableWidget/components/LineChartWithData';
 
 const chartPointsMocks = [
   {
@@ -71,8 +72,12 @@ describe('LineChartWithData component', () => {
   it('should render line chart', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
@@ -80,15 +85,19 @@ describe('LineChartWithData component', () => {
   it('should render line chart in green when daily price change is above 0%', async () => {
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#00D37E',
+      '#00D37E'
     );
   });
   it('should render line chart in red when daily price change is below 0%', async () => {
@@ -96,15 +105,19 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#FE005B',
+      '#FE005B'
     );
   });
   it('should render line chart in grey when daily price change equals 0%', async () => {
@@ -112,15 +125,19 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#9EA4AC',
+      '#9EA4AC'
     );
   });
   it('should render line chart in grey when daily price change equals undefined', async () => {
@@ -128,15 +145,19 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#9EA4AC',
+      '#9EA4AC'
     );
   });
   it('should render line chart in green when daily price change is above 0%, dark mode', async () => {
@@ -144,15 +165,20 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} isDarkMode />
-      </MockedProvider>,
+        <LineChartWithData
+          isDarkMode
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#008573',
+      '#008573'
     );
   });
   it('should render line chart in red when daily price change is below 0%, dark mode', async () => {
@@ -160,15 +186,20 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} isDarkMode />
-      </MockedProvider>,
+        <LineChartWithData
+          isDarkMode
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#DA6325',
+      '#DA6325'
     );
   });
   it('should render line chart in grey when daily price change equals 0%, dark mode', async () => {
@@ -176,15 +207,20 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} isDarkMode />
-      </MockedProvider>,
+        <LineChartWithData
+          isDarkMode
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#9EA4AC',
+      '#9EA4AC'
     );
   });
   it('should render line chart in grey when daily price change equals undefined, dark mode', async () => {
@@ -192,15 +228,20 @@ describe('LineChartWithData component', () => {
 
     const { findByTestId, container } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} isDarkMode />
-      </MockedProvider>,
+        <LineChartWithData
+          isDarkMode
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
     expect(await findByTestId('line-chart')).toBeInTheDocument();
 
     expect(container.querySelector('path')).toHaveAttribute(
       'stroke',
-      '#9EA4AC',
+      '#9EA4AC'
     );
   });
   it('should render empty value when number of points is below 10', async () => {
@@ -208,11 +249,15 @@ describe('LineChartWithData component', () => {
 
     const { queryByTestId, findByTestId } = render(
       <MockedProvider mocks={chartsPointsBelowTenMocks}>
-        <LineChartWithData isLoading={false} division={Division.Oc} record={record} />
-      </MockedProvider>,
+        <LineChartWithData
+          division={Division.Oc}
+          isLoading={false}
+          record={record}
+        />
+      </MockedProvider>
     );
 
-    expect(await queryByTestId('line-chart')).not.toBeInTheDocument();
+    expect(queryByTestId('line-chart')).not.toBeInTheDocument();
     expect(await findByTestId('line-chart-empty-value')).toBeInTheDocument();
   });
 });

package/test/Main.test.tsx

@@ -1,25 +1,28 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
-import { Main } from '../src/LiveRatesTableWidget/Main';
+import {
+  LiveRatesProvider,
+  MockLayoutProvider,
+} from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { Division } from '../src/gql/types/graphql';
+import { Main } from '../src/LiveRatesTableWidget/Main';
 import { widgetMocks } from './mocks';
 
 describe('Main component', () => {
   it('should render table component', async () => {
     const { findByTestId, findAllByTestId } = render(
       <MockedProvider mocks={widgetMocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
-          <Main
-            division={Division.Oc}
-            instruments={['EUR_USD', 'GBP_USD']}
-          />
-        </ThemeContext.Provider>
-      </MockedProvider>,
+        <LiveRatesProvider url="oanda.com">
+          <MockLayoutProvider>
+            <Main division={Division.Oc} instruments={['EUR_USD', 'GBP_USD']} />
+          </MockLayoutProvider>
+        </LiveRatesProvider>
+      </MockedProvider>
     );
 
     expect(await findByTestId('live-rates-table-wrapper')).toBeInTheDocument();

package/test/RowWithData.test.tsx

@@ -1,13 +1,15 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { RowWithData } from '../src/LiveRatesTableWidget/components/RowWithData';
-import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
 import { Division } from '../src/gql/types/graphql';
+import { RowWithData } from '../src/LiveRatesTableWidget/components/RowWithData';
+import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
 
 const chartPointsMocks = [
   {
@@ -55,19 +57,21 @@ describe('RowWithData component', () => {
   it('should render table row', async () => {
     const { getByTestId, getAllByTestId, findByTestId } = render(
       <MockedProvider mocks={chartPointsMocks}>
-        <table>
-          <tbody>
-            <RowWithData
-              loading={false}
-              division={Division.Oc}
-              record={record}
-              hasBackgroundColor
-              activeColumns={columns}
-              target={null}
-            />
-          </tbody>
-        </table>
-      </MockedProvider>,
+        <MockLayoutProvider>
+          <table>
+            <tbody>
+              <RowWithData
+                hasBackgroundColor
+                activeColumns={columns}
+                division={Division.Oc}
+                loading={false}
+                record={record}
+                target={null}
+              />
+            </tbody>
+          </table>
+        </MockLayoutProvider>
+      </MockedProvider>
     );
 
     expect(getByTestId('table-row')).toBeInTheDocument();

package/test/mocks.ts

@@ -75,6 +75,4 @@ const widgetMocks = [
   },
 ];
 
-export {
-  widgetMocks,
-};
+export { widgetMocks };