[v4] Export TestProvider with defaults and fix typescript react issue

src/components/Banner/Banner.tsx

@@ -22,7 +22,7 @@ import ButtonGroup from '../ButtonGroup';
 import UnstyledLink from '../UnstyledLink';
 import Icon from '../Icon';
 
-import WithinContentContext from '../WithinContentContext';
+import {WithinContentContext} from '../../utilities/within-content-context';
 
 import styles from './Banner.scss';
 

src/components/Banner/tests/Banner.test.tsx

@@ -12,7 +12,7 @@ import {mountWithAppProvider} from 'test-utilities/legacy';
 import {BannerContext} from 'utilities/banner-context';
 import {Button, Icon, UnstyledLink, Heading} from 'components';
 import Banner from '..';
-import WithinContentContext from '../../WithinContentContext';
+import {WithinContentContext} from '../../../utilities/within-content-context';
 
 describe('<Banner />', () => {
   it('renders a title', () => {

src/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {classNames} from '../../utilities/css';
 
 import ButtonGroup from '../ButtonGroup';
-import WithinContentContext from '../WithinContentContext';
+import {WithinContentContext} from '../../utilities/within-content-context';
 import {DisableableAction, ComplexAction} from '../../types';
 import ActionList from '../ActionList';
 import Button, {buttonFrom} from '../Button';

src/components/Card/tests/Card.test.tsx

@@ -5,7 +5,7 @@ import {
   findByTestID,
 } from 'test-utilities/legacy';
 import {Card, Badge, Button, Popover, ActionList} from 'components';
-import WithinContentContext from '../../WithinContentContext';
+import {WithinContentContext} from '../../../utilities/within-content-context';
 import {Section} from '../components';
 
 describe('<Card />', () => {

src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {mount} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import ContextualSaveBar from '../ContextualSaveBar';
-import {FrameContext, createFrameContext} from '../../Frame';
+import {createFrameContext} from '../../Frame';
 
 describe('<ContextualSaveBar />', () => {
   const props = {
@@ -17,11 +17,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     });
 
-    mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <ContextualSaveBar {...props} />
-      </FrameContext.Provider>,
-    );
+    mountWithAppProvider(<ContextualSaveBar {...props} />, {
+      context: {frame: mockFrameContext},
+    });
     expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledWith({
       ...props,
     });
@@ -33,11 +31,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     });
 
-    const frame = mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <ContextualSaveBar {...props} />
-      </FrameContext.Provider>,
-    );
+    const frame = mountWithAppProvider(<ContextualSaveBar {...props} />, {
+      context: {frame: mockFrameContext},
+    });
     expect(mockFrameContext.removeContextualSaveBar).not.toHaveBeenCalled();
     frame.unmount();
     expect(mockFrameContext.removeContextualSaveBar).toHaveBeenCalled();
@@ -49,11 +45,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     });
 
-    const frame = mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <ContextualSaveBar {...props} />
-      </FrameContext.Provider>,
-    );
+    const frame = mountWithAppProvider(<ContextualSaveBar {...props} />, {
+      context: {frame: mockFrameContext},
+    });
     const newProps = {
       saveAction: {content: 'Save', onAction: noop, loading: true},
       discardAction: {content: 'Discard', onAction: noop},
@@ -74,11 +68,9 @@ describe('<ContextualSaveBar />', () => {
       removeContextualSaveBar: jest.fn(),
     });
 
-    const frame = mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <ContextualSaveBar {...props} />
-      </FrameContext.Provider>,
-    );
+    const frame = mountWithAppProvider(<ContextualSaveBar {...props} />, {
+      context: {frame: mockFrameContext},
+    });
 
     expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledTimes(1);
     const newProps = {...props};

src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx

@@ -102,18 +102,4 @@ describe('<FileUpload />', () => {
     fileUpload.setProps({children: <FileUpload />});
     expect(fileUpload.find(TextStyle).text()).toBe('or drop files to upload');
   });
-
-  it('does not use default action title and hint when props are changed', () => {
-    const actionTitle = 'Add file title';
-    const actionHint = 'or drop files to upload hint';
-    const fileUpload = mountWithAppProvider(
-      <DropZoneContext.Provider value={{size: 'large', type: 'file'}}>
-        <FileUpload actionTitle={actionTitle} actionHint={actionHint} />
-      </DropZoneContext.Provider>,
-    );
-
-    fileUpload.setProps({actionTitle, actionHint});
-
-    expect(fileUpload.props()).toStrictEqual({actionTitle, actionHint});
-  });
 });

src/components/Loading/tests/Loading.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Loading as AppBridgeLoading} from '@shopify/app-bridge/actions';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import {FrameContext, createFrameContext} from '../../Frame';
+import {createFrameContext} from '../../Frame';
 
 import Loading from '../Loading';
 
@@ -15,23 +15,17 @@ describe('<Loading />', () => {
       startLoading: jest.fn(),
     });
 
-    mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <Loading />
-      </FrameContext.Provider>,
-    );
+    mountWithAppProvider(<Loading />, {context: {frame: mockFrameContext}});
     expect(mockFrameContext.startLoading).toHaveBeenCalled();
   });
 
   it('stops loading on unmount', () => {
     const mockFrameContext = createFrameContext({
       stopLoading: jest.fn(),
     });
-    const frame = mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <Loading />
-      </FrameContext.Provider>,
-    );
+    const frame = mountWithAppProvider(<Loading />, {
+      context: {frame: mockFrameContext},
+    });
     expect(mockFrameContext.stopLoading).not.toHaveBeenCalled();
 
     frame.unmount();

src/components/Modal/Modal.tsx

@@ -5,7 +5,7 @@ import {write} from '@shopify/javascript-utilities/fastdom';
 import {focusFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
 import {Modal as AppBridgeModal} from '@shopify/app-bridge/actions';
-import WithinContentContext from '../WithinContentContext';
+import {WithinContentContext} from '../../utilities/within-content-context';
 import {wrapWithComponent} from '../../utilities/components';
 
 import {transformActions} from '../../utilities/app-bridge-transformers';

src/components/Modal/tests/Modal.test.tsx

@@ -6,7 +6,7 @@ import {Badge, Spinner, Portal, Scrollable} from 'components';
 import {Footer, Dialog} from '../components';
 import Modal from '../Modal';
 
-import WithinContentContext from '../../WithinContentContext';
+import {WithinContentContext} from '../../../utilities/within-content-context';
 
 jest.mock('../../../utilities/app-bridge-transformers', () => ({
   ...require.requireActual('../../../utilities/app-bridge-transformers'),

src/components/Navigation/Navigation.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Scrollable from '../Scrollable';
 
-import WithinContentContext from '../WithinContentContext';
+import {WithinContentContext} from '../../utilities/within-content-context';
 import NavigationContext from './context';
 import {Section, Item} from './components';
 import {SectionType} from './types';

src/components/Navigation/tests/Navigation.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import Navigation from '../Navigation';
 import NavigationContext from '../context';
-import WithinContentContext from '../../WithinContentContext';
+import {WithinContentContext} from '../../../utilities/within-content-context';
 
 describe('<Navigation />', () => {
   it('mounts', () => {

src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx

@@ -303,13 +303,9 @@ describe('<FilterControl />', () => {
         </ResourceListContext.Provider>,
       );
 
-      const expectedLocalizedLabel = filterControl.app.polaris.intl.translate(
-        'Polaris.ResourceList.DateSelector.FilterLabelForValue.past_week',
-      );
-
       const firstTag = filterControl.find(Tag).at(0);
       expect(firstTag.text()).toBe(
-        `${filter.label} ${filter.operatorText} ${expectedLocalizedLabel}`,
+        `${filter.label} ${filter.operatorText} in the last week`,
       );
     });
 
@@ -338,15 +334,8 @@ describe('<FilterControl />', () => {
         </ResourceListContext.Provider>,
       );
 
-      const expectedLocalizedLabel = filterControl.app.polaris.intl.translate(
-        'Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_after',
-        {
-          date: new Date(selectedDate.replace(/-/g, '/')).toLocaleDateString(),
-        },
-      );
-
       const firstTag = filterControl.find(Tag).at(0);
-      expect(firstTag.text()).toBe(`${filter.label} ${expectedLocalizedLabel}`);
+      expect(firstTag.text()).toBe(`${filter.label} after 9/16/2018`);
     });
 
     it('renders the provided localized applied filter string when filter is a FilterDateSelector with maximum date predicate (on or before)', () => {
@@ -373,15 +362,8 @@ describe('<FilterControl />', () => {
         </ResourceListContext.Provider>,
       );
 
-      const expectedLocalizedLabel = filterControl.app.polaris.intl.translate(
-        'Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_before',
-        {
-          date: new Date(selectedDate.replace(/-/g, '/')).toLocaleDateString(),
-        },
-      );
-
       const firstTag = filterControl.find(Tag).at(0);
-      expect(firstTag.text()).toBe(`${filter.label} ${expectedLocalizedLabel}`);
+      expect(firstTag.text()).toBe(`${filter.label} before 9/16/2018`);
     });
 
     it('renders applied filter value when filter is a FilterDateSelector with invalid date predicate', () => {
@@ -408,15 +390,8 @@ describe('<FilterControl />', () => {
         </ResourceListContext.Provider>,
       );
 
-      const expectedLocalizedLabel = filterControl.app.polaris.intl.translate(
-        'Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_before',
-        {
-          date: selectedDate,
-        },
-      );
-
       const firstTag = filterControl.find(Tag).at(0);
-      expect(firstTag.text()).toBe(`${filter.label} ${expectedLocalizedLabel}`);
+      expect(firstTag.text()).toBe(`${filter.label} before INVALID`);
     });
 
     it('renders the provided applied filter string when filter uses operators with filter label', () => {

src/components/Toast/tests/Toast.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Toast as AppBridgeToast} from '@shopify/app-bridge/actions';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import Toast from '../Toast';
-import {FrameContext, createFrameContext} from '../../Frame';
+import {createFrameContext} from '../../Frame';
 
 describe('<Toast />', () => {
   beforeEach(() => {
@@ -15,11 +15,9 @@ describe('<Toast />', () => {
     });
 
     const props = {content: 'Image uploaded', onDismiss: noop};
-    mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <Toast {...props} />
-      </FrameContext.Provider>,
-    );
+    mountWithAppProvider(<Toast {...props} />, {
+      context: {frame: mockFrameContext},
+    });
 
     expect(mockFrameContext.showToast).toHaveBeenCalledWith(
       expect.objectContaining({id: expect.any(String), ...props}),
@@ -32,9 +30,8 @@ describe('<Toast />', () => {
     });
 
     const frame = mountWithAppProvider(
-      <FrameContext.Provider value={mockFrameContext}>
-        <Toast content="Message sent" onDismiss={noop} />
-      </FrameContext.Provider>,
+      <Toast content="Message sent" onDismiss={noop} />,
+      {context: {frame: mockFrameContext}},
     );
 
     expect(mockFrameContext.hideToast).not.toHaveBeenCalled();

src/components/index.ts

@@ -272,6 +272,8 @@ export {default as TextField, Props as TextFieldProps} from './TextField';
 
 export {default as TextStyle, Props as TextStyleProps} from './TextStyle';
 
+export {default as ThemeProvider} from './ThemeProvider';
+
 export {default as Thumbnail, Props as ThumbnailProps} from './Thumbnail';
 
 export {default as Toast} from './Toast';
@@ -290,5 +292,3 @@ export {
   default as VisuallyHidden,
   Props as VisuallyHiddenProps,
 } from './VisuallyHidden';
-
-export {default as WithinContentContext} from './WithinContentContext';

src/index.ts

@@ -5,4 +5,11 @@ export * from './types';
 export * from './components';
 
 export {UnstyledLinkProps, LinkLikeComponent} from './utilities/link';
-export {createPolarisContext} from './utilities/create-polaris-context';
+export {
+  ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT,
+} from './utilities/scroll-lock-manager';
+export {
+  WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT,
+} from './utilities/within-content-context';
+
+export {PolarisTestProvider} from './test-utilities/PolarisTestProvider';