[ThemeProvider] Use the new context api

[AndrewMusgrave]

WHY are these changes introduced?

Part of #1377

WHAT is this pull request doing?

• Using the new context API for theme provider
• Updating related utilities
• Update tests to use the new context
• Enzyme was running into issues with shallow renders and Consumer / render prop so tests were switch over to mountWithAppProvider

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {
  Page,
  AppProvider,
  ThemeProvider,
  TopBar,
  Frame,
  Card,
  ActionList,
  Button,
  ChoiceList,
} from '../src';

interface State {}

enum ThemeChoice {
  AppProviderThemed,
  ThemeProviderThemed,
  AppAndThemeProviderThemed,
  AppProviderThemedSubscription,
  ThemeProviderThemedSubscription,
}

export default class Playground extends React.Component<never, State> {
  state = {
    backgroundOne: '#00848E',
    backgroundTwo: '#BADA55',
    selected: [ThemeChoice.AppProviderThemed],
  };

  handleChange = (selected) => {
    this.setState({selected});
  };

  render() {
    const {backgroundOne, backgroundTwo, selected} = this.state;

    const topBarMarkup = (
      <TopBar
        showNavigationToggle
        userMenu={
          <TopBar.UserMenu
            open={false}
            actions={[
              {
                items: [
                  {content: 'Your profile', icon: 'profile'},
                  {content: 'Log out', icon: 'logOut'},
                ],
              },
              {
                items: [
                  {content: 'Shopify help center'},
                  {content: 'Community forums'},
                ],
              },
            ]}
            name="Ellen Ochoa"
            detail="Ochoa Crafts"
            initials="EO"
            onToggle={() => {}}
          />
        }
        searchField={
          <TopBar.SearchField
            onChange={() => {}}
            value=""
            placeholder="Search"
          />
        }
      />
    );

    const themeApp = {
      colors: {
        topBar: {
          background: '#108043',
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeTheme = {
      colors: {
        topBar: {
          background: '#BADA55',
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeSubscriptionOne = {
      colors: {
        topBar: {
          background: backgroundOne,
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeSubscriptionTwo = {
      colors: {
        topBar: {
          background: backgroundTwo,
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const choiceList = (
      <ChoiceList
        title="Choose how to theme"
        choices={[
          {
            label: 'App provider themed',
            value: ThemeChoice.AppProviderThemed,
          },
          {
            label: 'Theme provider themed',
            value: ThemeChoice.ThemeProviderThemed,
          },
          {
            label: 'App provider and theme provider themed',
            value: ThemeChoice.AppAndThemeProviderThemed,
            helpText: 'Theme provider theme overrides app provider theme',
          },
          {
            label: 'App provider themed with subscription',
            value: ThemeChoice.AppProviderThemedSubscription,
            renderChildren: (isSelected) => {
              return (
                isSelected && (
                  <Button
                    onClick={() => {
                      this.setState(({backgroundOne}) => ({
                        backgroundOne:
                          backgroundOne === '#50248F' ? '#00848E' : '#50248F',
                      }));
                    }}
                  >
                    Toggle theme
                  </Button>
                )
              );
            },
          },
          {
            label: 'Theme provider themed with subscription',
            value: ThemeChoice.ThemeProviderThemedSubscription,
            renderChildren: (isSelected) => {
              return (
                isSelected && (
                  <Button
                    onClick={() => {
                      this.setState(({backgroundTwo}) => ({
                        backgroundTwo:
                          backgroundTwo === '#50248F' ? '#BADA55' : '#50248F',
                      }));
                    }}
                  >
                    Toggle theme
                  </Button>
                )
              );
            },
          },
        ]}
        selected={selected}
        onChange={this.handleChange}
      />
    );

    const appProviderThemed = selected[0] === ThemeChoice.AppProviderThemed && (
      <AppProvider theme={themeApp}>
        <Frame topBar={topBarMarkup}>
          <Page title="Playground">{choiceList}</Page>
        </Frame>
      </AppProvider>
    );

    const themeProviderThemed = selected[0] ===
      ThemeChoice.ThemeProviderThemed && (
      <AppProvider>
        <ThemeProvider theme={themeTheme}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    const appAndThemeProviderThemed = selected[0] ===
      ThemeChoice.AppAndThemeProviderThemed && (
      <AppProvider theme={themeApp}>
        <ThemeProvider theme={themeTheme}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    const appProviderThemedSubscription = selected[0] ===
      ThemeChoice.AppProviderThemedSubscription && (
      <AppProvider theme={themeSubscriptionOne}>
        <Frame topBar={topBarMarkup}>
          <Page title="Playground">{choiceList}</Page>
        </Frame>
      </AppProvider>
    );

    const themeProviderThemedSubscription = selected[0] ===
      ThemeChoice.ThemeProviderThemedSubscription && (
      <AppProvider>
        <ThemeProvider theme={themeSubscriptionTwo}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    return (
      <React.Fragment>
        {appProviderThemed}
        {themeProviderThemed}
        {appAndThemeProviderThemed}
        {appProviderThemedSubscription}
        {themeProviderThemedSubscription}
      </React.Fragment>
    );
  }
}

[AndrewMusgrave]

CreateThemeContext and CreateAppProviderContext don't have as much overlap anymore

[AndrewMusgrave]

Simulate was causing this test and the two below to stall and run indefinitely so I choose to use trigger instead

[AndrewMusgrave]

DateSelector does render a select 😄

[AndrewMusgrave]

These were purely visual tests, testing the inner state of the component

[AndrewMusgrave]

This never had coverage and was causing codecov to dip below 90

[dleroux]

You think it would be worth adding tests to ensure the polaris prop gets passed to the wrapped component?

[AndrewMusgrave]

this is to suppress the error message being throw

[dleroux]

I like how this is so much more clear 🎉

[dleroux]

👍 sorry for the delay on this