@oanda/labs-live-rates-table-widget 1.0.49 → 1.0.50

package/test/LineChartWithData.test.tsx

@@ -1,263 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { MockedProvider } from '@apollo/client/testing';
-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 = [
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_USD'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_USD',
-            displayName: 'EUR_USD',
-            chart: [
-              1.0544, 1.05704, 1.05716, 1.05596, 1.05556, 1.05556, 1.05238,
-              1.05292, 1.05443, 1.0544, 1.05704, 1.05716, 1.05596, 1.05556,
-              1.05556,
-            ],
-          },
-        ],
-      },
-    },
-  },
-];
-
-const chartsPointsBelowTenMocks = [
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['CAD_JPY'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'CAD_JPY',
-            displayName: 'CAD_JPY',
-            chart: [0.8601, 0.85996, 0.85962, 0.86022, 0.8592],
-          },
-        ],
-      },
-    },
-  },
-];
-
-describe('LineChartWithData component', () => {
-  const record = {
-    instrument: 'EUR_USD',
-    displayName: 'EUR_USD',
-    buy: 1.04508,
-    sell: 1.04523,
-    spread: 1.2,
-    dailyPercentChange: '+3,23%',
-  };
-
-  it('should render line chart', async () => {
-    const { findByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-  });
-  it('should render line chart in green when daily price change is above 0%', async () => {
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#00D37E'
-    );
-  });
-  it('should render line chart in red when daily price change is below 0%', async () => {
-    record.dailyPercentChange = '-1.56%';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#FE005B'
-    );
-  });
-  it('should render line chart in grey when daily price change equals 0%', async () => {
-    record.dailyPercentChange = '0%';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#9EA4AC'
-    );
-  });
-  it('should render line chart in grey when daily price change equals undefined', async () => {
-    record.dailyPercentChange = 'undefined';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#9EA4AC'
-    );
-  });
-  it('should render line chart in green when daily price change is above 0%, dark mode', async () => {
-    record.dailyPercentChange = '+3,23%';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          isDarkMode
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#008573'
-    );
-  });
-  it('should render line chart in red when daily price change is below 0%, dark mode', async () => {
-    record.dailyPercentChange = '-1.56%';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          isDarkMode
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#DA6325'
-    );
-  });
-  it('should render line chart in grey when daily price change equals 0%, dark mode', async () => {
-    record.dailyPercentChange = '0%';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          isDarkMode
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#9EA4AC'
-    );
-  });
-  it('should render line chart in grey when daily price change equals undefined, dark mode', async () => {
-    record.dailyPercentChange = 'undefined';
-
-    const { findByTestId, container } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <LineChartWithData
-          isDarkMode
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-
-    expect(container.querySelector('path')).toHaveAttribute(
-      'stroke',
-      '#9EA4AC'
-    );
-  });
-  it('should render empty value when number of points is below 10', async () => {
-    record.instrument = 'CAD_JPY';
-
-    const { queryByTestId, findByTestId } = render(
-      <MockedProvider mocks={chartsPointsBelowTenMocks}>
-        <LineChartWithData
-          division={Division.Oc}
-          isLoading={false}
-          record={record}
-        />
-      </MockedProvider>
-    );
-
-    expect(queryByTestId('line-chart')).not.toBeInTheDocument();
-    expect(await findByTestId('line-chart-empty-value')).toBeInTheDocument();
-  });
-});

package/test/RowWithData.test.tsx

@@ -1,81 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { MockedProvider } from '@apollo/client/testing';
-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 = [
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_USD'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_USD',
-            displayName: 'EUR_USD',
-            chart: [
-              1.0544, 1.05704, 1.05716, 1.05596, 1.05556, 1.05556, 1.05238,
-              1.05292, 1.05443, 1.0544, 1.05704, 1.05716, 1.05596, 1.05556,
-              1.05556,
-            ],
-          },
-        ],
-      },
-    },
-  },
-];
-
-describe('RowWithData component', () => {
-  const record = {
-    instrument: 'EUR_USD',
-    displayName: 'EUR_USD',
-    buy: 1.04508,
-    sell: 1.04523,
-    spread: 1.2,
-    dailyPercentChange: '+3,23%',
-  };
-  const columns = [
-    ColumnsNames.SELL,
-    ColumnsNames.BUY,
-    ColumnsNames.DAILY_CHANGE,
-    ColumnsNames.CHART,
-    ColumnsNames.SPREAD,
-  ];
-  it('should render table row', async () => {
-    const { getByTestId, getAllByTestId, findByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <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();
-    expect(await findByTestId('line-chart')).toBeInTheDocument();
-    expect(getAllByTestId('table-cell').length).toEqual(5);
-  });
-});