@oanda/labs-instrument-live-rate-widget 1.0.1

package/src/gql/types/graphql.ts

@@ -0,0 +1,432 @@
+/* eslint-disable */
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never };
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: { input: string; output: string; }
+  String: { input: string; output: string; }
+  Boolean: { input: boolean; output: boolean; }
+  Int: { input: number; output: number; }
+  Float: { input: number; output: number; }
+};
+
+export type AssetClass = {
+  __typename?: 'AssetClass';
+  instruments: Array<Instrument>;
+  name: Scalars['String']['output'];
+};
+
+export enum AssetClassName {
+  Commodities = 'COMMODITIES',
+  Cryptocurrency = 'CRYPTOCURRENCY',
+  Currency = 'CURRENCY',
+  EquityShares = 'EQUITY_SHARES',
+  Indices = 'INDICES',
+  Rates = 'RATES'
+}
+
+export enum BookType {
+  Order = 'ORDER',
+  Position = 'POSITION'
+}
+
+export type CorrelationHeatmap = {
+  __typename?: 'CorrelationHeatmap';
+  baseInstrument: Instrument;
+  heatmap: Array<Heatmap>;
+};
+
+export type CorrelationMatrix = {
+  __typename?: 'CorrelationMatrix';
+  baseTimeUnit: CorrelationTimeUnit;
+  matrix: Array<Matrix>;
+};
+
+export enum CorrelationTimeUnit {
+  H1 = 'H1',
+  H4 = 'H4',
+  H24 = 'H24',
+  M1 = 'M1',
+  M3 = 'M3',
+  M6 = 'M6',
+  W1 = 'W1',
+  Y1 = 'Y1'
+}
+
+export enum CurrencyName {
+  Aud = 'AUD',
+  Cad = 'CAD',
+  Chf = 'CHF',
+  Eur = 'EUR',
+  Gbp = 'GBP',
+  Jpy = 'JPY',
+  Nzd = 'NZD',
+  Usd = 'USD'
+}
+
+export type CurrencyPower = {
+  __typename?: 'CurrencyPower';
+  /** UTC Timestamp */
+  point: Scalars['String']['output'];
+  price: Scalars['Float']['output'];
+};
+
+export type CurrencyPowerBalance = {
+  __typename?: 'CurrencyPowerBalance';
+  currency: CurrencyName;
+  power: Array<CurrencyPower>;
+  updatedAt: Scalars['String']['output'];
+};
+
+export enum CurrencyPowerBalanceTimeUnit {
+  CurrentDay = 'CURRENT_DAY',
+  H4 = 'H4',
+  H8 = 'H8',
+  H24 = 'H24',
+  M1 = 'M1',
+  M3 = 'M3',
+  PreviousDay = 'PREVIOUS_DAY',
+  W1 = 'W1'
+}
+
+export type CurrencyStrength = {
+  __typename?: 'CurrencyStrength';
+  currency: CurrencyName;
+  strengthRelation?: Maybe<Array<StrengthRelation>>;
+  updatedAt: Scalars['String']['output'];
+};
+
+export enum DataSource {
+  Ny4 = 'NY4',
+  Ty3 = 'TY3'
+}
+
+export enum Division {
+  Oap = 'OAP',
+  Oau = 'OAU',
+  Oc = 'OC',
+  Ocan = 'OCAN',
+  Oel = 'OEL',
+  Ogm = 'OGM',
+  Oj = 'OJ',
+  Opt = 'OPT',
+  Otms = 'OTMS'
+}
+
+export type Heatmap = {
+  __typename?: 'Heatmap';
+  instrument: Instrument;
+  timeCorrelation: Array<TimeCorrelation>;
+};
+
+export type Instrument = {
+  __typename?: 'Instrument';
+  displayName: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+};
+
+export type InstrumentCorrelation = {
+  __typename?: 'InstrumentCorrelation';
+  instrument: Instrument;
+  value?: Maybe<Scalars['Float']['output']>;
+};
+
+export type Matrix = {
+  __typename?: 'Matrix';
+  instrument: Instrument;
+  instrumentCorrelation: Array<InstrumentCorrelation>;
+};
+
+export type OrderPositionBucket = {
+  __typename?: 'OrderPositionBucket';
+  longCountPercent: Scalars['Float']['output'];
+  price: Scalars['Float']['output'];
+  shortCountPercent: Scalars['Float']['output'];
+};
+
+export type OrderPositionData = {
+  __typename?: 'OrderPositionData';
+  bucketWidth: Scalars['Float']['output'];
+  buckets: Array<Maybe<OrderPositionBucket>>;
+  dataSource?: Maybe<Scalars['String']['output']>;
+  instrument: Scalars['String']['output'];
+  price?: Maybe<Scalars['Float']['output']>;
+  region?: Maybe<Scalars['String']['output']>;
+  time: Scalars['String']['output'];
+  unixTime: Scalars['Int']['output'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+  correlationHeatmap: CorrelationHeatmap;
+  correlationMatrix: CorrelationMatrix;
+  currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+  currencyStrength?: Maybe<Array<CurrencyStrength>>;
+  isAllowedPartner?: Maybe<Scalars['Boolean']['output']>;
+  mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
+  orderPositionBooks: Array<Maybe<OrderPositionData>>;
+  sentiment?: Maybe<Array<SentimentInstrument>>;
+  sentimentList?: Maybe<Array<SentimentInstrument>>;
+  topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+  topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+  topicalInstrumentsTotalCount: Scalars['Int']['output'];
+  valueAtRiskAssetClasses?: Maybe<Array<AssetClass>>;
+  valueAtRiskChart?: Maybe<ValueAtRiskChart>;
+  volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+  volatilityChartAssetClasses?: Maybe<Array<AssetClass>>;
+};
+
+
+export type QueryAssetClassesArgs = {
+  division: Division;
+};
+
+
+export type QueryCorrelationHeatmapArgs = {
+  division: Division;
+  instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+  timeSpans?: InputMaybe<Array<InputMaybe<CorrelationTimeUnit>>>;
+};
+
+
+export type QueryCorrelationMatrixArgs = {
+  division: Division;
+  instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+
+
+export type QueryCurrencyPowerBalanceArgs = {
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+
+
+export type QueryIsAllowedPartnerArgs = {
+  url: Scalars['String']['input'];
+};
+
+
+export type QueryMapInstrumentNamesArgs = {
+  division?: InputMaybe<Division>;
+  instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+
+
+export type QueryOrderPositionBooksArgs = {
+  bookType: BookType;
+  dataSource?: InputMaybe<DataSource>;
+  instrument: Scalars['String']['input'];
+  recentHours?: InputMaybe<Scalars['Int']['input']>;
+  region?: InputMaybe<Region>;
+};
+
+
+export type QuerySentimentArgs = {
+  division?: InputMaybe<Division>;
+  name: Scalars['String']['input'];
+};
+
+
+export type QuerySentimentListArgs = {
+  division?: InputMaybe<Division>;
+  sort?: InputMaybe<Sort>;
+};
+
+
+export type QueryTopicalInstrumentsArgs = {
+  assetClass?: InputMaybe<AssetClassName>;
+  count?: InputMaybe<Scalars['Int']['input']>;
+  division?: InputMaybe<Division>;
+  offset?: InputMaybe<Scalars['Int']['input']>;
+  sort: TopicalSort;
+};
+
+
+export type QueryTopicalInstrumentsChartsArgs = {
+  division?: InputMaybe<Division>;
+  instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+};
+
+
+export type QueryTopicalInstrumentsTotalCountArgs = {
+  assetClass?: InputMaybe<AssetClassName>;
+  division?: InputMaybe<Division>;
+  sort: TopicalSort;
+};
+
+
+export type QueryValueAtRiskAssetClassesArgs = {
+  division?: InputMaybe<Division>;
+};
+
+
+export type QueryValueAtRiskChartArgs = {
+  bars: ValueAtRiskBars;
+  division?: InputMaybe<Division>;
+  duration: ValueAtRiskDuration;
+  instrument: Scalars['String']['input'];
+};
+
+
+export type QueryVolatilityChartArgs = {
+  division?: InputMaybe<Division>;
+  instrument: Scalars['String']['input'];
+  timeSpan: VolatilityChartTimeSpan;
+  timeUnit: VolatilityChartTimeUnit;
+};
+
+
+export type QueryVolatilityChartAssetClassesArgs = {
+  division?: InputMaybe<Division>;
+};
+
+export enum Region {
+  Amer = 'AMER',
+  Apac = 'APAC',
+  Emea = 'EMEA'
+}
+
+export type Sentiment = {
+  __typename?: 'Sentiment';
+  longPercent: Scalars['Float']['output'];
+  shortPercent: Scalars['Float']['output'];
+};
+
+export type SentimentInstrument = {
+  __typename?: 'SentimentInstrument';
+  displayName: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+  sentiment: Sentiment;
+  updatedAt: Scalars['String']['output'];
+};
+
+export enum Sort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH'
+}
+
+export type StrengthRelation = {
+  __typename?: 'StrengthRelation';
+  currency: CurrencyName;
+  percentage: Scalars['Float']['output'];
+};
+
+export type TimeCorrelation = {
+  __typename?: 'TimeCorrelation';
+  timeUnit: CorrelationTimeUnit;
+  value?: Maybe<Scalars['Float']['output']>;
+};
+
+export type TopicalInstrument = {
+  __typename?: 'TopicalInstrument';
+  assetClass?: Maybe<AssetClassName>;
+  displayName: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+  sentiment: Sentiment;
+  updatedAt: Scalars['String']['output'];
+};
+
+export type TopicalInstrumentChart = {
+  __typename?: 'TopicalInstrumentChart';
+  chart?: Maybe<Array<Scalars['Float']['output']>>;
+  name: Scalars['String']['output'];
+};
+
+export enum TopicalSort {
+  Bearish = 'BEARISH',
+  Bullish = 'BULLISH',
+  Hot = 'HOT',
+  Popular = 'POPULAR',
+  Volatile = 'VOLATILE'
+}
+
+export enum ValueAtRiskBars {
+  C100 = 'C100',
+  C200 = 'C200',
+  C300 = 'C300'
+}
+
+export type ValueAtRiskChart = {
+  __typename?: 'ValueAtRiskChart';
+  down: ValueAtRiskChartData;
+  up: ValueAtRiskChartData;
+};
+
+export type ValueAtRiskChartData = {
+  __typename?: 'ValueAtRiskChartData';
+  average: Scalars['Float']['output'];
+  max: Scalars['Float']['output'];
+  median: Scalars['Float']['output'];
+  points?: Maybe<Array<ValueAtRiskChartPoint>>;
+  threshold: Scalars['Float']['output'];
+};
+
+export type ValueAtRiskChartPoint = {
+  __typename?: 'ValueAtRiskChartPoint';
+  percent: Scalars['Float']['output'];
+  pips: Scalars['Float']['output'];
+};
+
+export enum ValueAtRiskDuration {
+  C1 = 'C1',
+  C2 = 'C2',
+  C3 = 'C3',
+  C4 = 'C4',
+  C5 = 'C5',
+  C10 = 'C10'
+}
+
+export type VolatilityChart = {
+  __typename?: 'VolatilityChart';
+  pips: Scalars['Float']['output'];
+  /** Time point - hour in format hh:mm, Date in UTC, Week in format 'Mo' */
+  point: Scalars['String']['output'];
+  updatedAt: Scalars['String']['output'];
+};
+
+export enum VolatilityChartTimeSpan {
+  /**  Valid for: H */
+  D5 = 'D5',
+  /**  Valid for: H */
+  D10 = 'D10',
+  /**  Valid for: D */
+  M1 = 'M1',
+  /**  Valid for: D */
+  M3 = 'M3',
+  /**  Valid for: W */
+  W5 = 'W5',
+  /**  Valid for: W */
+  W10 = 'W10'
+}
+
+export enum VolatilityChartTimeUnit {
+  D = 'D',
+  H = 'H',
+  W = 'W'
+}
+
+export type GetInstrumentsChartQueryVariables = Exact<{
+  instruments?: InputMaybe<Array<Scalars['String']['input']> | Scalars['String']['input']>;
+  division?: InputMaybe<Division>;
+}>;
+
+
+export type GetInstrumentsChartQuery = { __typename?: 'Query', topicalInstrumentsCharts?: Array<{ __typename?: 'TopicalInstrumentChart', name: string, chart?: Array<number> | null }> | null };
+
+export type ValidateInstrumentsQueryVariables = Exact<{
+  instruments: Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>;
+  division?: InputMaybe<Division>;
+}>;
+
+
+export type ValidateInstrumentsQuery = { __typename?: 'Query', mapInstrumentNames?: Array<{ __typename?: 'Instrument', name: string, displayName: string } | null> | null };
+
+
+export const GetInstrumentsChartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetInstrumentsChart"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"division"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"topicalInstrumentsCharts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"instruments"},"value":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}}},{"kind":"Argument","name":{"kind":"Name","value":"division"},"value":{"kind":"Variable","name":{"kind":"Name","value":"division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"chart"}}]}}]}}]} as unknown as DocumentNode<GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables>;
+export const ValidateInstrumentsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"validateInstruments"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"division"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mapInstrumentNames"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"instruments"},"value":{"kind":"Variable","name":{"kind":"Name","value":"instruments"}}},{"kind":"Argument","name":{"kind":"Name","value":"division"},"value":{"kind":"Variable","name":{"kind":"Name","value":"division"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}}]}}]}}]} as unknown as DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/src/gql/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/src/gql/validateInstruments.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const validateInstruments = gql`
+  query validateInstruments($instruments: [String]!, $division: Division) {
+    mapInstrumentNames(instruments: $instruments, division: $division) {
+      name
+      displayName
+    }
+  }
+`;

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './InstrumentLiveRateWidget/types';
+export * from './InstrumentLiveRateWidget/InstrumentLiveRateWidget';

package/src/translations/index.ts

@@ -0,0 +1,17 @@
+import { Locale, Translations } from '@oanda/mono-i18n';
+
+import en from './sources/en.json';
+import zhTW from './sources/zh_TW.json';
+import es from './sources/es.json';
+import th from './sources/th.json';
+
+import { defaultTranslations } from './translations';
+
+export type TranslationKey = keyof typeof defaultTranslations;
+
+export const translations: Translations = {
+  [Locale.en]: { translation: en },
+  [Locale.zhTW]: { translation: zhTW },
+  [Locale.es]: { translation: es },
+  [Locale.th]: { translation: th },
+};

package/src/translations/sources/en.json

@@ -0,0 +1,4 @@
+{
+  "data_unavailable": "Data unavailable",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries"
+}

package/src/translations/sources/es.json

@@ -0,0 +1,4 @@
+{
+  "data_unavailable": "No hay datos disponibles",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} de {{itemCount}} entradas"
+}

package/src/translations/sources/th.json

@@ -0,0 +1,4 @@
+{
+  "data_unavailable": "ข้อมูลไม่พร้อมใช้งาน",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} จาก {{itemCount}} รายการ"
+}

package/src/translations/sources/zh_TW.json

@@ -0,0 +1,4 @@
+{
+  "data_unavailable": "沒有數據",
+  "pagination_entries_range": "{{itemCount}}个挂单中的{{firstItemOnPage}}-{{lastItemOnPage}}"
+}

package/src/translations/translations.ts

@@ -0,0 +1,4 @@
+export const defaultTranslations = {
+  data_unavailable: 'Data unavailable',
+  pagination_entries_range: '{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries',
+};

package/test/LineChartWithData.test.tsx

@@ -0,0 +1,164 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { lightTheme } from '@oanda/labs-widget-common';
+import { LineChartWithData } from '../src/InstrumentLiveRateWidget/components/LineChartWithData';
+import { getInstrumentsChart } from '../src/gql/getInstrumentsChart';
+import { Division } from '../src/gql/types/graphql';
+
+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
+          isLoading={false}
+          division={Division.Oc}
+          record={record}
+          color={lightTheme.textOk}
+        />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('line-chart')).toBeInTheDocument();
+  });
+  it('should render line chart in green', async () => {
+    const { findByTestId, container } = render(
+      <MockedProvider mocks={chartPointsMocks}>
+        <LineChartWithData
+          isLoading={false}
+          division={Division.Oc}
+          record={record}
+          color={lightTheme.textOk}
+        />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('line-chart')).toBeInTheDocument();
+
+    expect(container.querySelector('path')).toHaveAttribute(
+      'stroke',
+      '#00884E',
+    );
+  });
+  it('should render line chart in red', async () => {
+    record.dailyPercentChange = '-1.56%';
+
+    const { findByTestId, container } = render(
+      <MockedProvider mocks={chartPointsMocks}>
+        <LineChartWithData
+          isLoading={false}
+          division={Division.Oc}
+          record={record}
+          color={lightTheme.textDanger}
+        />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('line-chart')).toBeInTheDocument();
+
+    expect(container.querySelector('path')).toHaveAttribute(
+      'stroke',
+      '#E41F37',
+    );
+  });
+  it('should render line chart in grey', async () => {
+    record.dailyPercentChange = '0%';
+
+    const { findByTestId, container } = render(
+      <MockedProvider mocks={chartPointsMocks}>
+        <LineChartWithData
+          isLoading={false}
+          division={Division.Oc}
+          record={record}
+          color={lightTheme.textDisabled}
+        />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('line-chart')).toBeInTheDocument();
+
+    expect(container.querySelector('path')).toHaveAttribute(
+      'stroke',
+      '#7B8085',
+    );
+  });
+  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
+          isLoading={false}
+          division={Division.Oc}
+          record={record}
+          color={lightTheme.textOk}
+        />
+      </MockedProvider>,
+    );
+
+    expect(await queryByTestId('line-chart')).not.toBeInTheDocument();
+    expect(await findByTestId('line-chart-empty-value')).toBeInTheDocument();
+  });
+});

package/test/Main.test.tsx

@@ -0,0 +1,27 @@
+/**
+ * @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/InstrumentLiveRateWidget/Main';
+import { Division } from '../src/gql/types/graphql';
+import { widgetMocks } from './mocks';
+
+describe('Main component', () => {
+  it('should render table component', async () => {
+    const { findByTestId } = render(
+      <MockedProvider mocks={widgetMocks}>
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main
+            division={Division.Oc}
+            instrument="EUR_USD"
+          />
+        </ThemeContext.Provider>
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('instrument-live-rate-wrapper')).toBeInTheDocument();
+  });
+});