@oanda/labs-sentiment-widget 1.0.172 → 1.0.173

package/src/SentimentWidget/Widget.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import {
   Sentiment,
@@ -7,7 +7,7 @@ import {
   Loader,
   LoaderSize,
   Truncate,
-  ThemeContext,
+  useLayoutProvider,
   Size,
   LastUpdated,
 } from '@oanda/labs-widget-common';
@@ -33,7 +33,7 @@ const Widget = ({
     },
     fetchPolicy: 'cache-and-network',
   });
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { lang } = useLocale();
 

package/src/SentimentWidget/components/SortSwitch/SortSwitch.tsx

@@ -1,14 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import {
-  LongArrowUp, LongArrowDown, ThemeContext,
+  LongArrowUp, LongArrowDown, useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { SelectedArrow, SortSwitchProps } from './types';
 
 const SortSwitch = ({
   onClickButtonDown, onClickButtonUp, selected, disabled,
 }: SortSwitchProps) => {
-  const { isDark } = useContext(ThemeContext);
+  const { isDark } = useLayoutProvider();
 
   return (
     <div

package/test/SortSwitch.test.tsx

@@ -3,16 +3,19 @@
  */
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { SortSwitch, SelectedArrow } from '../src/SentimentWidget/components/SortSwitch';
 
 describe('SortSwitch component', () => {
   it('should render switch component', () => {
     const { getByTestId } = render(
-      <SortSwitch
-        selected={SelectedArrow.UP}
-        onClickButtonDown={() => {}}
-        onClickButtonUp={() => {}}
-      />,
+      <MockLayoutProvider>
+        <SortSwitch
+          selected={SelectedArrow.UP}
+          onClickButtonDown={() => {}}
+          onClickButtonUp={() => {}}
+        />
+      </MockLayoutProvider>,
     );
 
     expect(getByTestId('sort-switch')).toBeInTheDocument();
@@ -24,11 +27,13 @@ describe('SortSwitch component', () => {
     const onClickDownSpy = jest.fn();
 
     const { getByTestId } = render(
-      <SortSwitch
-        selected={SelectedArrow.UP}
-        onClickButtonDown={() => onClickDownSpy()}
-        onClickButtonUp={() => onClickUpSpy()}
-      />,
+      <MockLayoutProvider>
+        <SortSwitch
+          selected={SelectedArrow.UP}
+          onClickButtonDown={() => onClickDownSpy()}
+          onClickButtonUp={() => onClickUpSpy()}
+        />
+      </MockLayoutProvider>,
     );
 
     fireEvent.click(getByTestId('sort-switch-button-up'));
@@ -43,11 +48,13 @@ describe('SortSwitch component', () => {
     const onClickDownSpy = jest.fn();
 
     const { getByTestId } = render(
-      <SortSwitch
-        selected={SelectedArrow.DOWN}
-        onClickButtonDown={() => onClickDownSpy()}
-        onClickButtonUp={() => onClickUpSpy()}
-      />,
+      <MockLayoutProvider>
+        <SortSwitch
+          selected={SelectedArrow.DOWN}
+          onClickButtonDown={() => onClickDownSpy()}
+          onClickButtonUp={() => onClickUpSpy()}
+        />
+      </MockLayoutProvider>,
     );
 
     fireEvent.click(getByTestId('sort-switch-button-up'));
@@ -62,12 +69,14 @@ describe('SortSwitch component', () => {
     const onClickDownSpy = jest.fn();
 
     const { getByTestId } = render(
-      <SortSwitch
-        disabled
-        selected={SelectedArrow.DOWN}
-        onClickButtonDown={() => onClickDownSpy()}
-        onClickButtonUp={() => onClickUpSpy()}
-      />,
+      <MockLayoutProvider>
+        <SortSwitch
+          disabled
+          selected={SelectedArrow.DOWN}
+          onClickButtonDown={() => onClickDownSpy()}
+          onClickButtonUp={() => onClickUpSpy()}
+        />
+      </MockLayoutProvider>,
     );
 
     fireEvent.click(getByTestId('sort-switch-button-up'));

package/test/Tool.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Tool } from '../src/SentimentWidget/Tool';
 import { getSentimentList } from '../src/gql/getSentimentList';
 import { Division } from '../src/gql/types/graphql';
@@ -68,9 +68,9 @@ describe('Tool component', () => {
   it('should render tool component', async () => {
     const { findByTestId, findAllByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool division={Division.Oc} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -80,9 +80,9 @@ describe('Tool component', () => {
   it('should render error', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={errorMocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool division={Division.Oc} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 

package/test/Widget.test.tsx

@@ -4,7 +4,7 @@
 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 { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Widget } from '../src/SentimentWidget/Widget';
 import { getInstrumentSentiment } from '../src/gql/getInstrumentSentiment';
 import { Division } from '../src/gql/types/graphql';
@@ -63,9 +63,9 @@ describe('Widget component', () => {
   it('should render widget component', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Widget division={Division.Oc} instrument="EUR/USD" />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -75,9 +75,9 @@ describe('Widget component', () => {
   it('should render error when both sentiment values are 0', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={zeroPercentMocks}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Widget division={Division.Oc} instrument="GBP/USD" />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );