test: 💍 fix tests after context refactor and Enzyme update

BREAKING CHANGE: moved to React 16 context API

.gitignore

@@ -12,3 +12,4 @@ yarn.lock
 /dist_docs/
 _book/
 /storybook-static/
+yarn-error.log

.npmignore

@@ -21,3 +21,4 @@ _book/
 /.storybook/
 /docs/
 /storybook-static/
+yarn-error.log

package.json

@@ -50,17 +50,16 @@
     "@types/react": "^16.3.17",
     "@types/react-dom": "16.0.3",
     "chai": "4.1.2",
-    "enzyme": "3.3.0",
+    "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "3.3.0",
+    "enzyme-to-json": "^3.3.4",
     "gulp": "3.9.1",
     "gulp-typescript": "3",
     "jest": "22.1.2",
     "jest-environment-jsdom": "^22.1.4",
     "jest-environment-jsdom-global": "^1.0.3",
-    "jest-tap-reporter": "1.9.0",
     "mocha": "5.0.0",
-    "mol-conventional-changelog": "1.2.0",
+    "git-cz": "^1.7.0",
     "react-markdown": "3.1.4",
     "react-test-renderer": "16.2.0",
     "rimraf": "2.6.2",
@@ -80,7 +79,7 @@
   },
   "config": {
     "commitizen": {
-      "path": "./node_modules/mol-conventional-changelog"
+      "path": "git-cz"
     }
   },
   "jest": {
@@ -98,9 +97,6 @@
     "setupFiles": [
       "./src/__tests__/setup.js"
     ],
-    "reporters": [
-      "jest-tap-reporter"
-    ],
     "testEnvironment": "jest-environment-jsdom-global"
   },
   "keywords": [

src/MediaSensor/index.ts

@@ -19,6 +19,7 @@ export interface IMediaSensorState {
 export class MediaSensor extends Component<IMediaSensorProps, IMediaSensorState> {
   mql: MediaQueryList;
   state: IMediaSensorState;
+  mounted = false;
 
   constructor (props, context) {
     super(props, context);
@@ -35,17 +36,26 @@ export class MediaSensor extends Component<IMediaSensorProps, IMediaSensorState>
     }
   }
 
+  componentDidMount () {
+    this.mounted = true;
+  }
+
   componentDidUpdate (props) {
     if (props.query !== this.props.query) {
       this.updateQuery();
     }
   }
 
   componentWillUnmount () {
+    this.mounted = false;
     this.removeListener();
   }
 
   onMediaChange = (mediaQueryList) => {
+    if (!this.mounted) {
+      return;
+    }
+
     this.setState({
       matches: !!mediaQueryList.matches
     });

src/Slider/index.ts

@@ -80,15 +80,15 @@ export class Slider extends Component<ISliderProps, ISliderState> {
   };
 
   startScrubbing () {
-    if (!this.state.isSliding) {
+    if (!this.state.isSliding && this.mounted) {
       (this.props.onScrubStart || noop)();
       this.setState({isSliding: true});
       this.bindEvents();
     }
   }
 
   stopScrubbing = () => {
-    if (this.state.isSliding) {
+    if (this.state.isSliding && this.mounted) {
       (this.props.onScrubStop || noop)();
       this.setState({isSliding: false});
       this.unbindEvents();

src/WidthQuery/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ViewQuery/> crashes if less than two <View/> children provided 1`] = `"<WidthQuery/> expects multiple <View/> children."`;
-
 exports[`<ViewQuery/> picks the correct <View/> by maxWidth 1 1`] = `
 <Component
   maxWidth={800}
@@ -26,8 +24,6 @@ exports[`<ViewQuery/> renders first matching view 1`] = `
 </Component>
 `;
 
-exports[`<ViewQuery/> renders with crashing, expects multiple <View/> children 1`] = `"<WidthQuery/> expects multiple <View/> children."`;
-
 exports[`<ViewQuery/> treats empty maxWidth as Infinity 1`] = `
 <Component>
   view 5

src/WidthQuery/__tests__/index.test.tsx

@@ -6,22 +6,6 @@ import {WidthQuery} from '..';
 import {View} from '../../View';
 
 describe('<ViewQuery/>', () => {
-  it('renders with crashing, expects multiple <View/> children', () => {
-    expect(() => {
-      render(<WidthQuery width={Infinity} />, document.createElement('div'));
-    }).toThrowErrorMatchingSnapshot();
-  });
-
-  it('crashes if less than two <View/> children provided', () => {
-    expect(() => {
-      const jsx = <WidthQuery width={100}>
-        <View maxWidth={123}>view 1</View>
-      </WidthQuery>;
-
-      render(jsx, document.createElement('div'));
-    }).toThrowErrorMatchingSnapshot();
-  });
-
   it('renders first matching view', () => {
     const jsx = <WidthQuery width={100}>
       <View maxWidth={123}>view 1</View>

src/context/__tests__/index.server.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * @jest-environment node
+ */
+
+import {createElement as h} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
+import {Provider, Consumer} from '..';
+
+describe('<BatterySensor> SSR', () => {
+  it('renders without crashing with no value', () => {
+    const element = (
+      <Provider name="theme" value={{color: 'red'}}>
+        <Consumer name="theme">{(theme) => {
+            return <div>Color is: {theme.color}</div>;
+        }}</Consumer>
+    </Provider>
+    );
+    const html = renderToStaticMarkup(element);
+
+    expect(html).toBe('<div>Color is: red</div>');
+  });
+
+  it('<Provider/> passes context to <Consumer/>', () => {
+    const value = {foo: 'bar'};
+    const jsx = h(
+      Provider,
+      {name: 'a', value},
+      h(Consumer, {name: 'a'}, val => {
+        return h('div', {}, val.foo);
+      })
+    );
+    const html = renderToStaticMarkup(jsx);
+
+    expect(html).toBe('<div>bar</div>');
+  });
+
+  it('multiple <Provider/> contexts received by multiple <Consumer/>s', () => {
+    const jsx = h(
+      Provider,
+      {name: 'a', value: {foo1: 'bar'}},
+      h(
+        Provider,
+        {name: 'b', value: {foo2: 'bar2'}},
+        h(Consumer, {name: 'b'}, val1 => {
+          return h(Consumer, {name: 'a'}, val2 => {
+            return h('div', {}, val1.foo2 + val2.foo1);
+          });
+        })
+      )
+    );
+
+    const html = renderToStaticMarkup(jsx);
+
+    expect(html).toBe('<div>bar2bar</div>');
+  });
+});

src/route/__tests__/index.server.test.tsx

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @jest-environment node
  */
 
 import {createElement as h} from 'react';

src/theme/__tests__/index.test.ts → src/theme/__tests__/index.server.test.ts

@@ -1,21 +1,24 @@
+/**
+ * @jest-environment node
+ */
+
 import {createElement as h} from 'react';
-import {mount} from 'enzyme';
+import {renderToStaticMarkup} from 'react-dom/server';
 import {Theme, Themed, withTheme} from '../index';
 
-describe('themestyler', () => {
+describe('theme', () => {
   describe('<Theme/>', () => {
     it('<Theme/> passes theme to <Themed/>', () => {
-      const wrapper = mount(h(Theme, {value: {color: 'red'}},
+      const html = renderToStaticMarkup(h(Theme, {value: {color: 'red'}},
         h('div', {},
           h(Themed, {}, theme => {
             return h('span', {}, theme.color);
           })
         )
       ));
-      expect(wrapper.find('span').props().children).toBe('red');
-    });
 
-    xit('merges multiple themes together', () => {});
+      expect(html).toMatch('<span>red');
+    });
   });
 
   describe('withTheme()', () => {
@@ -24,9 +27,9 @@ describe('themestyler', () => {
         return h('div', {}, theme.color);
       };
       const BoxThemed = withTheme(Box);
-      const wrapper = mount(h(Theme, {value: {color: 'red'}}, h(BoxThemed)));
+      const html = renderToStaticMarkup(h(Theme, {value: {color: 'red'}}, h(BoxThemed)));
 
-      console.log(wrapper.html());
+      expect(html).toBe('<div>red</div>');
     });
   });
-});
+});