@oanda/labs-live-rates-table-widget 1.0.39 → 1.0.41

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,12 +1,16 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { LiveRatesProvider, MockLayoutProvider } 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', () => {
@@ -15,13 +19,10 @@ describe('Main component', () => {
       <MockedProvider mocks={widgetMocks}>
         <LiveRatesProvider url="oanda.com">
           <MockLayoutProvider>
-            <Main
-              division={Division.Oc}
-              instruments={['EUR_USD', 'GBP_USD']}
-            />
+            <Main division={Division.Oc} instruments={['EUR_USD', 'GBP_USD']} />
           </MockLayoutProvider>
         </LiveRatesProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
     expect(await findByTestId('live-rates-table-wrapper')).toBeInTheDocument();

package/test/RowWithData.test.tsx

@@ -1,14 +1,15 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { MockLayoutProvider } from '@oanda/labs-widget-common';
-import { RowWithData } from '../src/LiveRatesTableWidget/components/RowWithData';
-import { ColumnsNames } from '../src/LiveRatesTableWidget/types';
+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 = [
   {
@@ -60,17 +61,17 @@ describe('RowWithData component', () => {
           <table>
             <tbody>
               <RowWithData
-                loading={false}
-                division={Division.Oc}
-                record={record}
                 hasBackgroundColor
                 activeColumns={columns}
+                division={Division.Oc}
+                loading={false}
+                record={record}
                 target={null}
               />
             </tbody>
           </table>
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
     expect(getByTestId('table-row')).toBeInTheDocument();

package/test/mocks.ts

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