Update dependencies, improve test coverage (#67)

kriasoft · Oct 14, 2016 · bb0edbd · bb0edbd
1 parent 1e70aff
commit bb0edbd
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 49 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,7 @@
 sudo: false
 language: node_js
 node_js:
+  - '6'
   - '5'
   - '4'
 script:

diff --git a/package.json b/package.json
@@ -29,43 +29,52 @@
   "babel": {
     "presets": [
       "react",
-      "es2015",
-      "stage-0"
+      "latest"
     ],
     "plugins": [
       "transform-runtime"
     ]
   },
   "eslintConfig": {
     "parser": "babel-eslint",
-    "extends": "airbnb"
+    "extends": "airbnb",
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "import/no-extraneous-dependencies": "off",
+      "no-continue": "off",
+      "no-plusplus": "off",
+      "react/jsx-filename-extension": "off"
+    }
   },
   "dependencies": {
-    "babel-runtime": "^6.6.1",
-    "hoist-non-react-statics": "^1.0.5",
-    "loader-utils": "^0.2.14"
+    "babel-runtime": "^6.11.6",
+    "hoist-non-react-statics": "^1.2.0",
+    "loader-utils": "^0.2.16"
   },
   "devDependencies": {
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.0.2",
-    "babel-plugin-transform-runtime": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.17.0",
+    "babel-eslint": "^7.0.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-register": "^6.16.3",
     "chai": "^3.5.0",
-    "coveralls": "^2.11.9",
-    "eslint": "^2.7.0",
-    "eslint-config-airbnb": "7.0.0",
-    "eslint-plugin-jsx-a11y": "^0.6.2",
-    "eslint-plugin-react": "^4.3.0",
-    "istanbul": "^1.0.0-alpha.2",
-    "jsdom": "^8.3.1",
-    "mocha": "^2.4.5",
-    "react": "^15.0.1",
-    "rimraf": "^2.5.2",
-    "sinon": "^2.0.0-pre"
+    "coveralls": "^2.11.14",
+    "eslint": "^3.7.1",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.4.1",
+    "istanbul": "^1.1.0-alpha.1",
+    "jsdom": "^9.6.0",
+    "mocha": "^3.1.2",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "rimraf": "^2.5.4",
+    "sinon": "^2.0.0-pre.3"
   },
   "scripts": {
     "lint": "eslint src test",

diff --git a/src/withStyles.js b/src/withStyles.js
@@ -10,20 +10,13 @@
 import React, { Component, PropTypes } from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 
-function getDisplayName(ComposedComponent) {
-  return ComposedComponent.displayName || ComposedComponent.name || 'Component';
-}
+const contextTypes = {
+  insertCss: PropTypes.func,
+};
 
 function withStyles(...styles) {
   return function wrapWithStyles(ComposedComponent) {
     class WithStyles extends Component {
-      static contextTypes = {
-        insertCss: PropTypes.func.isRequired,
-      };
-
-      static displayName = `WithStyles(${getDisplayName(ComposedComponent)})`;
-      static ComposedComponent = ComposedComponent;
-
       componentWillMount() {
         this.removeCss = this.context.insertCss.apply(undefined, styles);
       }
@@ -37,6 +30,12 @@ function withStyles(...styles) {
       }
     }
 
+    const displayName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
+
+    WithStyles.displayName = `WithStyles(${displayName})`;
+    WithStyles.contextTypes = contextTypes;
+    WithStyles.ComposedComponent = ComposedComponent;
+
     return hoistStatics(WithStyles, ComposedComponent);
   };
 }

diff --git a/test/.eslintrc b/test/.eslintrc
@@ -1,7 +1,8 @@
 {
   "rules": {
-    "no-unused-expressions": 0,
-    "react/no-multi-comp": 0,
-    "react/prefer-es6-class": 0
+    "no-unused-expressions": "off",
+    "react/no-multi-comp": "off",
+    "react/prefer-es6-class": "off",
+    "react/prefer-stateless-function": "off"
   }
 }
diff --git a/test/insertCssSpec.js → test/insertCss.spec.js b/test/insertCssSpec.js → test/insertCss.spec.js
@@ -13,7 +13,8 @@ import { expect } from 'chai';
 import insertCss from '../src/insertCss';
 
 global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
-global.window = document.parentWindow;
+global.window = document.defaultView;
+global.navigator = global.window.navigator;
 
 describe('insertCss(styles, options)', () => {
   it('Should insert and remove <style> element', () => {

diff --git a/test/withStylesSpec.js → test/withStyles.spec.js b/test/withStylesSpec.js → test/withStyles.spec.js
@@ -7,20 +7,58 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-/* eslint-disable react/prefer-stateless-function */
-
+import jsdom from 'jsdom';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
-import React, { createClass, Component } from 'react';
+import sinon from 'sinon';
+import React, { createClass, Component, Children, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 import withStyles from '../src/withStyles';
 
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;
+
+describe('withStyles(...styles)(WrappedComponent)', () => {
+  it('Should call insetCss and removeCss functions provided by context', (done) => {
+    class Provider extends Component {
+      getChildContext() {
+        return { insertCss: this.props.insertCss };
+      }
 
-describe('withStyles(ComposedComponent, ...styles)', () => {
-  class Passthrough extends Component {
-    render() {
-      return <div {...this.props} />;
+      render() {
+        return Children.only(this.props.children);
+      }
     }
-  }
+
+    Provider.propTypes = {
+      insertCss: PropTypes.func.isRequired,
+      children: PropTypes.node.isRequired,
+    };
+
+    Provider.childContextTypes = {
+      insertCss: PropTypes.func.isRequired,
+    };
+
+    class Foo extends Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const FooWithStyles = withStyles('')(Foo);
+    const insertCss = sinon.spy(() => done);
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <Provider insertCss={insertCss}>
+        <FooWithStyles />
+      </Provider>,
+      container
+    );
+    ReactDOM.unmountComponentAtNode(container);
+    expect(insertCss.calledOnce).to.be.true;
+  });
 
   it('Should set the displayName correctly', () => {
     expect(withStyles('')(
@@ -46,13 +84,13 @@ describe('withStyles(ComposedComponent, ...styles)', () => {
           return <div />;
         },
       })
-    ).displayName).to.equal('WithStyles(Component)');
+    ).displayName).to.be.oneOf(['WithStyles(Component)', 'WithStyles(Constructor)']);
   });
 
   it('Should expose the component with styles as ComposedComponent', () => {
     class Container extends Component {
       render() {
-        return <Passthrough />;
+        return <div />;
       }
     }