@oanda/labs-currency-power-balance-widget 1.0.112 → 1.0.113

package/test/Main.test.tsx

@@ -1,13 +1,14 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { MockLayoutProvider, Size } from '@oanda/labs-widget-common';
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { Main } from '../src/CurrencyPowerBalanceWidget/Main';
-import { mockResponse } from './responsesMocks';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
+import { mockResponse } from './responsesMocks';
 
 describe('Main component', () => {
   it('should render tool desktop view', async () => {
@@ -16,10 +17,12 @@ describe('Main component', () => {
         <MockLayoutProvider>
           <Main />
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
-    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('currency-power-balance-wrapper')
+    ).toBeInTheDocument();
     expect(getByTestId('time-unit-switch')).toBeInTheDocument();
     expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });
@@ -27,12 +30,17 @@ describe('Main component', () => {
     const { findByTestId, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={mockResponse}>
         <MockLayoutProvider>
-          <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} currencies={['USD', 'EUR']} />
+          <Main
+            currencies={['USD', 'EUR']}
+            timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay}
+          />
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
-    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('currency-power-balance-wrapper')
+    ).toBeInTheDocument();
     expect(getByTestId('time-unit-label')).toBeInTheDocument();
     expect(queryByTestId('time-unit-switch')).not.toBeInTheDocument();
   });
@@ -42,10 +50,12 @@ describe('Main component', () => {
         <MockLayoutProvider>
           <Main currencies={['USD', 'EUR']} />
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
-    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('currency-power-balance-wrapper')
+    ).toBeInTheDocument();
     expect(getByTestId('time-unit-switch')).toBeInTheDocument();
     expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });
@@ -55,10 +65,12 @@ describe('Main component', () => {
         <MockLayoutProvider>
           <Main timeUnit={CurrencyPowerBalanceTimeUnit.CurrentDay} />
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
-    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('currency-power-balance-wrapper')
+    ).toBeInTheDocument();
     expect(getByTestId('time-unit-switch')).toBeInTheDocument();
     expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });
@@ -68,10 +80,12 @@ describe('Main component', () => {
         <MockLayoutProvider size={Size.MOBILE}>
           <Main />
         </MockLayoutProvider>
-      </MockedProvider>,
+      </MockedProvider>
     );
 
-    expect(await findByTestId('currency-power-balance-wrapper')).toBeInTheDocument();
+    expect(
+      await findByTestId('currency-power-balance-wrapper')
+    ).toBeInTheDocument();
     expect(getByTestId('time-unit-select')).toBeInTheDocument();
     expect(queryByTestId('time-unit-label')).not.toBeInTheDocument();
   });

package/test/chartFormatters.test.ts

@@ -3,7 +3,9 @@
  */
 
 import {
-  intervalFormatter, xAxisLabelFormatter, tooltipFormatter,
+  intervalFormatter,
+  tooltipFormatter,
+  xAxisLabelFormatter,
 } from '../src/CurrencyPowerBalanceWidget/components/Chart/options/formatters';
 import { CurrencyPowerBalanceTimeUnit } from '../src/gql/types/graphql';
 
@@ -18,53 +20,111 @@ describe('intervalFormatter', () => {
 
 describe('tooltipFormatter', () => {
   it('should sort & format tooltip content', () => {
-    const values = [{
-      marker: '<span>Marker 1</span>',
-      seriesName: 'Name 1',
-      value: ['2023-10-27T14:00:00Z', '-30.91'],
-    }, {
-      marker: '<span>Marker 2</span>',
-      seriesName: 'Name 2',
-      value: ['2023-10-27T14:00:00Z', '-20.23'],
-    }];
+    const values = [
+      {
+        marker: '<span>Marker 1</span>',
+        seriesName: 'Name 1',
+        value: ['2023-10-27T14:00:00Z', '-30.91'],
+      },
+      {
+        marker: '<span>Marker 2</span>',
+        seriesName: 'Name 2',
+        value: ['2023-10-27T14:00:00Z', '-20.23'],
+      },
+    ];
 
     const element = document.createElement('div');
     element.innerHTML = tooltipFormatter(values);
 
-    expect(element.querySelector('span')).toContainHTML('<span style="margin-bottom:5px;">10/27/2023, 14:00 UTC</span>');
-    expect(element.querySelectorAll('span')[1]).toContainHTML('<span>Marker 2</span>');
-    expect(element.querySelectorAll('span')[3]).toContainHTML('<span>-20.23</span>');
-    expect(element.querySelectorAll('span')[4]).toContainHTML('<span>Marker 1</span>');
-    expect(element.querySelectorAll('span')[6]).toContainHTML('<span>-30.91</span>');
+    expect(element.querySelector('span')).toContainHTML(
+      '<span style="margin-bottom:5px;">10/27/2023, 14:00 UTC</span>'
+    );
+    expect(element.querySelectorAll('span')[1]).toContainHTML(
+      '<span>Marker 2</span>'
+    );
+    expect(element.querySelectorAll('span')[3]).toContainHTML(
+      '<span>-20.23</span>'
+    );
+    expect(element.querySelectorAll('span')[4]).toContainHTML(
+      '<span>Marker 1</span>'
+    );
+    expect(element.querySelectorAll('span')[6]).toContainHTML(
+      '<span>-30.91</span>'
+    );
   });
 });
 
 describe('xAxisLabelFormatter', () => {
   it('should format x axis label to date for 1 week time unit', () => {
-    expect(xAxisLabelFormatter('2023-10-22T10:00:00Z', CurrencyPowerBalanceTimeUnit.W1)).toEqual('10/22');
+    expect(
+      xAxisLabelFormatter(
+        '2023-10-22T10:00:00Z',
+        CurrencyPowerBalanceTimeUnit.W1
+      )
+    ).toEqual('10/22');
   });
   it('should format x axis label to date for 1 month time unit', () => {
-    expect(xAxisLabelFormatter('2023-10-20T10:00:00Z', CurrencyPowerBalanceTimeUnit.M1)).toEqual('10/20');
+    expect(
+      xAxisLabelFormatter(
+        '2023-10-20T10:00:00Z',
+        CurrencyPowerBalanceTimeUnit.M1
+      )
+    ).toEqual('10/20');
   });
   it('should format x axis label to date for 3 months time unit', () => {
-    expect(xAxisLabelFormatter('2023-10-10T10:00:00Z', CurrencyPowerBalanceTimeUnit.M3)).toEqual('10/10');
+    expect(
+      xAxisLabelFormatter(
+        '2023-10-10T10:00:00Z',
+        CurrencyPowerBalanceTimeUnit.M3
+      )
+    ).toEqual('10/10');
   });
   it('should format x axis label to date for midnight', () => {
-    expect(xAxisLabelFormatter('2023-09-20T00:00:00Z', CurrencyPowerBalanceTimeUnit.CurrentDay)).toEqual('9/20');
+    expect(
+      xAxisLabelFormatter(
+        '2023-09-20T00:00:00Z',
+        CurrencyPowerBalanceTimeUnit.CurrentDay
+      )
+    ).toEqual('9/20');
   });
   it('should format x axis label to time for current day', () => {
-    expect(xAxisLabelFormatter('2023-09-20T01:00:00Z', CurrencyPowerBalanceTimeUnit.CurrentDay)).toEqual('01:00');
+    expect(
+      xAxisLabelFormatter(
+        '2023-09-20T01:00:00Z',
+        CurrencyPowerBalanceTimeUnit.CurrentDay
+      )
+    ).toEqual('01:00');
   });
   it('should format x axis label to time for previous day', () => {
-    expect(xAxisLabelFormatter('2023-12-18T05:00:00Z', CurrencyPowerBalanceTimeUnit.PreviousDay)).toEqual('05:00');
+    expect(
+      xAxisLabelFormatter(
+        '2023-12-18T05:00:00Z',
+        CurrencyPowerBalanceTimeUnit.PreviousDay
+      )
+    ).toEqual('05:00');
   });
   it('should format x axis label to time for 24 hours', () => {
-    expect(xAxisLabelFormatter('2023-06-01T12:20:00Z', CurrencyPowerBalanceTimeUnit.H24)).toEqual('12:20');
+    expect(
+      xAxisLabelFormatter(
+        '2023-06-01T12:20:00Z',
+        CurrencyPowerBalanceTimeUnit.H24
+      )
+    ).toEqual('12:20');
   });
   it('should format x axis label to time for 8 hours', () => {
-    expect(xAxisLabelFormatter('2023-08-23T14:00:00Z', CurrencyPowerBalanceTimeUnit.H8)).toEqual('14:00');
+    expect(
+      xAxisLabelFormatter(
+        '2023-08-23T14:00:00Z',
+        CurrencyPowerBalanceTimeUnit.H8
+      )
+    ).toEqual('14:00');
   });
   it('should format x axis label to time for 4 hours', () => {
-    expect(xAxisLabelFormatter('2024-01-05T05:45:00Z', CurrencyPowerBalanceTimeUnit.H4)).toEqual('05:45');
+    expect(
+      xAxisLabelFormatter(
+        '2024-01-05T05:45:00Z',
+        CurrencyPowerBalanceTimeUnit.H4
+      )
+    ).toEqual('05:45');
   });
 });