useContext.jsx

import React from 'react';
import { expect } from 'chai';

import {
  describeIf,
  itIf,
} from '../../_helpers';

import {
  useContext,
  useState,
  createContext,
} from '../../_helpers/react-compat';

export default function describeUseContext({
  hasHooks,
  Wrap,
  isShallow,
}) {
  describeIf(hasHooks, 'hooks: useContext', () => {
    const initialTitle = 'initialTitle';
    const TitleContext = createContext(initialTitle);

    const UiComponent = () => {
      const title = useContext(TitleContext);
      return (
        <div>
          {title}
        </div>
      );
    };

    const customTitle = 'CustomTitle';

    const App = () => (
      <TitleContext.Provider value={customTitle}>
        <UiComponent />
      </TitleContext.Provider>
    );

    it('render ui component with initial context value', () => {
      const wrapper = Wrap(<UiComponent />);
      expect(wrapper.text()).to.equal(initialTitle);
    });

    // TODO: useContext: enable when shallow dive supports createContext
    itIf(!isShallow, 'render ui component with value from outer provider', () => {
      const wrapper = Wrap(<App />);
      const subWrapper = isShallow ? wrapper.dive().dive() : wrapper;
      expect(subWrapper.text()).to.equal(customTitle);
    });

    // TODO: useContext: enable when shallow dive supports createContext
    itIf(!isShallow, 'useContext: test render, get and set context value', () => {
      const initialState = 10;
      const context = createContext(null);

      const MyGrandChild = () => {
        const myContextVal = useContext(context);

        const increment = () => {
          myContextVal.setState(myContextVal.state + 1);
        };

        return (
          <div>
            <button type="button" onClick={increment}>increment</button>
            <span className="grandChildState">
              {myContextVal.state}
            </span>
          </div>
        );
      };

      const MyChild = () => (
        <div>
          <MyGrandChild />
        </div>
      );

      const Parent = () => {
        const [state, setState] = useState(initialState);

        return (
          <context.Provider value={{ state, setState }}>
            <div>
              <MyChild />
            </div>
          </context.Provider>
        );
      };

      const wrapper = Wrap(<Parent />);

      function getChild() {
        const child = wrapper.find(MyChild);
        return isShallow ? child.dive() : child;
      }
      function getGrandChild() {
        const grandchild = getChild().find(MyGrandChild);
        return isShallow ? grandchild.dive() : grandchild;
      }
      expect(getGrandChild().find('.grandChildState').debug()).to.equal(`<span className="grandChildState">
  ${String(initialState)}
</span>`);

      getGrandChild().find('button').props().onClick();
      wrapper.update();
      expect(getGrandChild().find('.grandChildState').debug()).to.equal(`<span className="grandChildState">
  ${String(initialState + 1)}
</span>`);
    });
  });
}