react-styleable/lib/__specs__/styleable.spec.js

Higher-order component for styling react

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styleable = _interopRequireDefault(require("../styleable"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var css = {
  content: 'someHashFromALocalCssModule'
};

function mkFixture(css) {
  var Subject = /*#__PURE__*/function (_React$Component) {
    _inherits(Subject, _React$Component);

    var _super = _createSuper(Subject);

    function Subject() {
      _classCallCheck(this, Subject);

      return _super.apply(this, arguments);
    }

    _createClass(Subject, [{
      key: "render",
      value: function render() {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: this.props.css.content,
          ref: "content"
        }, "Content ", this.props.aDefault);
      }
    }]);

    return Subject;
  }(_react["default"].Component);

  Subject.defaultProps = {
    aDefault: 'still here'
  };
  return (0, _styleable["default"])(css)(Subject);
}

function mkFixtureWithReqPropTypes() {
  var Subject = /*#__PURE__*/function (_React$Component2) {
    _inherits(Subject, _React$Component2);

    var _super2 = _createSuper(Subject);

    function Subject() {
      _classCallCheck(this, Subject);

      return _super2.apply(this, arguments);
    }

    _createClass(Subject, [{
      key: "render",
      value: function render() {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: this.props.css.content,
          ref: "content"
        }, "Req content ", this.props.aReqProp);
      }
    }]);

    return Subject;
  }(_react["default"].Component);

  Subject.propTypes = {
    aReqProp: _propTypes["default"].string.isRequired
  };
  return (0, _styleable["default"])(css)(Subject);
}

function mkFunctionFixture(css) {
  function subject(props) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: props.css.content
    }, "Content ", props.aDefault);
  }

  subject.defaultProps = {
    aDefault: 'still here'
  };
  return (0, _styleable["default"])(css)(subject);
}

function mkFunctionFixtureWithReqPropTypes() {
  function subject(props) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: props.css.content
    }, "Req content ", props.aReqProp);
  }

  subject.propTypes = {
    aReqProp: _propTypes["default"].string.isRequired
  };
  return (0, _styleable["default"])(css)(subject);
}

describe('styleable', function () {
  it('creates a default stylesheet if none supplied', function () {
    var defaultStylesheet = {};
    var Subject = mkFixture();

    var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, null));

    component.props.css.should.eql(defaultStylesheet);
  });
  describe('with invalid stylesheet', function () {
    it('rejects css as strings', function () {
      ;
      (function () {
        var Subject = mkFixture('nonCssObj');

        _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, null));
      }).should["throw"](/must be an object/);
    });
    it('rejects css as array', function () {
      ;
      (function () {
        var Subject = mkFixture(['css', 'stuff']);

        _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, null));
      }).should["throw"](/must be an object/);
    });
  });
  it('wraps the component in a component', function () {
    var Subject = mkFixture();

    var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, null));

    component.refs.should.not.have.property('content');
  });
  describe('with invalid selectors (superset)', function () {
    it('rejects override styles that wont be used', function (done) {
      var origCss = {
        content: 'hash'
      };
      var overrideCss = {
        unusedSelector: 'anotherHash'
      };
      var Subject = mkFixture(origCss);

      try {
        _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, {
          css: overrideCss
        }));
      } catch (e) {
        /*
          Using this instead of (() => {}).should.throw()
          Because I was getting this error:
           TypeError: Cannot call a class as a function
             at _classCallCheck (lib/styleable.js:23:34)
             at CssStyleComponent (lib/styleable.js:31:35)
             at Context.<anonymous> (lib/__specs__/styleable.spec.js:64:41)
         */
        e.message.should.match(/provide only selectors/);
        done();
      }
    });
    it('rejects compose styles that wont be used', function (done) {
      var origCss = {
        content: 'hash'
      };
      var overrideCss = {
        compose: {
          unusedSelector: 'anotherHash'
        }
      };
      var Subject = mkFixture(origCss);

      try {
        _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, {
          css: overrideCss
        }));
      } catch (e) {
        e.message.should.match(/provide only selectors/);
        done();
      }
    });
  });
  it('overrides original stylesheet', function () {
    var newHash = 'anotherHash';
    var origCss = {
      content: 'hash'
    };
    var overrideCss = {
      content: newHash
    };
    var Subject = mkFixture(origCss);

    var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, {
      css: overrideCss
    }));

    _reactDom["default"].findDOMNode(component).className.should.eql(newHash);
  });
  it('composes new css', function () {
    var origCss = {
      content: 'hash'
    };
    var overrideCss = {
      compose: {
        content: 'anotherHash'
      }
    };
    var Subject = mkFixture(origCss);

    var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, {
      css: overrideCss
    }));

    _reactDom["default"].findDOMNode(component).className.should.eql('hash anotherHash');
  });
  it('lets defaultProps pass through', function () {
    var Subject = mkFixture();
    Subject.defaultProps.aDefault.should.exist;

    var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(Subject, null));

    component.props.aDefault.should.eql('still here');
  });
  it('lets propTypes pass through', function () {
    var Subject = mkFixtureWithReqPropTypes();
    Subject.propTypes.aReqProp.should.exist;
  });
  describe('with stateless functions', function () {
    it('makes the css prop available', function () {
      var css = {
        content: 'cssHash'
      };
      var Subject = mkFunctionFixture(css);

      var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Subject, null)));

      _reactDom["default"].findDOMNode(component).children[0].className.should.eql(css.content);
    });
    it('allows overrides to the stylesheet', function () {
      var newHash = 'anotherHash';
      var origCss = {
        content: 'hash'
      };
      var overrideCss = {
        content: newHash
      };
      var Subject = mkFunctionFixture(origCss);

      var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Subject, {
        css: overrideCss
      })));

      _reactDom["default"].findDOMNode(component).children[0].className.should.eql(newHash);
    });
    it('lets defaultProps pass through', function () {
      var Subject = mkFunctionFixture();
      Subject.defaultProps.aDefault.should.exist;

      var component = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Subject, null)));

      _reactDom["default"].findDOMNode(component).children[0].textContent.should.eql('Content still here');
    });
    it('lets propTypes pass through', function () {
      var Subject = mkFunctionFixtureWithReqPropTypes();
      /*
        Not sure how to really test the real problem where warnings aren't
        happening when a child component has been styleable'd. This at least
        tests the fix for the real problem.
      */

      Subject.propTypes.aReqProp.should.exist;
    });
  });
});
//# sourceMappingURL=styleable.spec.js.map