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

package/test/CardWithData.test.tsx

@@ -1,74 +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 { CardWithData } from '../src/LiveRatesTableWidget/components/CardWithData';
-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('CardWithData 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 card', () => {
-    const { getByTestId, getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <CardWithData
-            activeColumns={columns}
-            division={Division.Oc}
-            index={0}
-            record={record}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getByTestId('card')).toBeInTheDocument();
-    expect(getByTestId('card-header')).toBeInTheDocument();
-    expect(getAllByTestId('card-row').length).toEqual(4);
-  });
-});

package/test/Cards.test.tsx

@@ -1,130 +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 { Cards } from '../src/LiveRatesTableWidget/components';
-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,
-            ],
-          },
-        ],
-      },
-    },
-  },
-  {
-    request: {
-      query: getInstrumentsChart,
-      variables: {
-        instruments: ['EUR_JPY'],
-        division: 'OC',
-      },
-    },
-    result: {
-      data: {
-        topicalInstrumentsCharts: [
-          {
-            name: 'EUR_JPY',
-            displayName: 'EUR_JPY',
-            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('Cards component', () => {
-  const records = [
-    {
-      instrument: 'EUR_USD',
-      displayName: 'EUR_USD',
-      buy: 1.04508,
-      sell: 1.04523,
-      spread: 1.2,
-      dailyPercentChange: '+3,23%',
-    },
-    {
-      instrument: 'EUR_JPY',
-      displayName: 'EUR_JPY',
-      buy: 1.04553,
-      sell: 1.045353,
-      spread: 1.3,
-      dailyPercentChange: '+4,23%',
-    },
-  ];
-  const columns = [
-    ColumnsNames.SELL,
-    ColumnsNames.BUY,
-    ColumnsNames.DAILY_CHANGE,
-    ColumnsNames.CHART,
-    ColumnsNames.SPREAD,
-  ];
-  it('should render card', () => {
-    const { getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <Cards
-            columns={columns}
-            division={Division.Oc}
-            emptyCardsCount={2}
-            isError={false}
-            isLoading={false}
-            records={records}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getAllByTestId('card').length).toEqual(2);
-    expect(getAllByTestId('card-header').length).toEqual(2);
-    expect(getAllByTestId('card-row').length).toEqual(8);
-  });
-  it('should render error', () => {
-    const { getAllByTestId } = render(
-      <MockedProvider mocks={chartPointsMocks}>
-        <MockLayoutProvider>
-          <Cards
-            isError
-            columns={columns}
-            division={Division.Oc}
-            emptyCardsCount={2}
-            isLoading={false}
-            records={records}
-            target={null}
-          />
-        </MockLayoutProvider>
-      </MockedProvider>
-    );
-    expect(getAllByTestId('card').length).toEqual(1);
-    expect(getAllByTestId('chart-error').length).toEqual(1);
-  });
-});

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);
-  });
-});