Add tests with dynamic context

Author: pablopalacios

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -667,23 +667,23 @@ describe('shallow', () => {
         });
       });
 
-      describe('shallow() on Provider and Consumer through .contextType', () => {
-
-        const { Provider } = React.createContext('howdy!');
+      describeIf(is('>= 16.3'), 'shallow() on Provider and Consumer through .contextType', () => {
+        const { Provider } = createContext('howdy!');
 
         class OuterComponent extends React.Component {
           render() {
+            const { value } = this.props;
             return (
-              <Provider value="foo"><InnerComponent /></Provider>
+              <Provider value={value}><InnerComponent /></Provider>
             );
           }
         }
 
         class WrappingComponent extends React.Component {
           render() {
-            const { children } = this.props;
+            const { children, value } = this.props;
             return (
-              <Provider value="foo">{ children }</Provider>
+              <Provider value={value}>{ children }</Provider>
             );
           }
         }
@@ -696,16 +696,45 @@ describe('shallow', () => {
 
         InnerComponent.contextType = Provider;
 
-        it('works on a Provider', () => {
-          const wrapper = shallow(<OuterComponent />);
-          const provides = wrapper.find(Provider).dive();
-          const provider = provides.find(InnerComponent).shallow();
-          expect(provider.text()).to.equal('foo');
+        describe('rendering the Provider directly', () => {
+          it('renders initial context value', () => {
+            const wrapper = shallow(<OuterComponent value="foo" />);
+            const provides = wrapper.find(Provider).shallow();
+            const provider = provides.find(InnerComponent).dive();
+
+            expect(provider.text()).to.equal('foo');
+          });
+
+          it('renders updated context value', () => {
+            const wrapper = shallow(<OuterComponent value="foo" />);
+            wrapper.setProps({ value: 'bar' });
+            const provides = wrapper.find(Provider).shallow();
+            const provider = provides.find(InnerComponent).dive();
+
+            expect(provider.text()).to.equal('bar');
+          });
         });
 
-        it('works with wrappingComponent', () => {
-          const wrapper = shallow(<InnerComponent />, { wrappingComponent: WrappingComponent });
-          expect(wrapper.text()).to.equal('foo');
+        describe('rendering the Provider through wrappingComponent', () => {
+          it('renders initial context value', () => {
+            const wrapper = shallow(<InnerComponent />, {
+              wrappingComponent: WrappingComponent,
+              wrappingComponentProps: { value: 'foo' },
+            });
+
+            expect(wrapper.text()).to.equal('foo');
+          });
+
+          it('renders updated context value', () => {
+            const wrapper = shallow(<InnerComponent />, {
+              wrappingComponent: WrappingComponent,
+              wrappingComponentProps: { value: 'foo' },
+            });
+            const wrappingComponent = wrapper.getWrappingComponent();
+            wrappingComponent.setProps({ value: 'bar' });
+            wrapper.update();
+            expect(wrapper.text()).to.equal('bar');
+          });
         });
       });
     });