as-nav-link/lib/as-nav-link.test.js

React Router HOC that mimics NavLink functionality but just passes an active prop to child component.

"use strict";

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactRouterDom = require("react-router-dom");

var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));

var _asNavLink = _interopRequireDefault(require("./as-nav-link"));

require("jest-styled-components");

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

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var MyNavAnchor = (0, _styledComponents.default)(function (_ref) {
  var _ref$as = _ref.as,
      T = _ref$as === void 0 ? 'a' : _ref$as,
      props = _objectWithoutPropertiesLoose(_ref, ["as"]);

  return _react.default.createElement(T, props);
})({
  textDecoration: 'blink',
  color: 'blue'
}, function (_ref2) {
  var active = _ref2.active;
  return active && {
    color: 'red'
  };
});
describe('asNavLink', function () {
  it('renders a styled-component without an active prop', function () {
    var MyNavLink = (0, _asNavLink.default)()(MyNavAnchor);

    var MyTest = function MyTest() {
      return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(MyNavLink, {
        to: "/somewhere"
      }, "My Link"));
    };

    var tree = _reactTestRenderer.default.create(_react.default.createElement(MyTest, null)).toJSON();

    expect(tree).toHaveStyleRule('color', 'blue');
    expect(tree.props.href === '/somewhere');
    expect(tree.props.active === false);
    expect(tree.props.children === 'My Link');
  });
  it('renders a styled-component with an active prop', function () {
    var MyNavLink = (0, _asNavLink.default)()(MyNavAnchor);

    var MyTest = function MyTest() {
      return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(MyNavLink, {
        to: "/"
      }, "My Link"));
    };

    var tree = _reactTestRenderer.default.create(_react.default.createElement(MyTest, null)).toJSON();

    expect(tree).toHaveStyleRule('color', 'red');
    expect(tree.props.href === '/');
    expect(tree.props.active === true);
    expect(tree.props.children === 'My Link');
  });
});
it('renders a styled-component with a custom active prop', function () {
  var MyCustomNavAnchor = (0, _styledComponents.default)(function (_ref3) {
    var _ref3$as = _ref3.as,
        T = _ref3$as === void 0 ? 'a' : _ref3$as,
        props = _objectWithoutPropertiesLoose(_ref3, ["as"]);

    return _react.default.createElement(T, props);
  })({
    textDecoration: 'blink',
    color: 'blue'
  }, function (_ref4) {
    var custom = _ref4.custom;
    return custom && {
      color: 'red'
    };
  });
  var MyNavLink = (0, _asNavLink.default)({
    activeProp: 'custom'
  })(MyCustomNavAnchor);

  var MyTest = function MyTest() {
    return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(MyNavLink, {
      to: "/"
    }, "My Link"));
  };

  var tree = _reactTestRenderer.default.create(_react.default.createElement(MyTest, null)).toJSON();

  expect(tree).toHaveStyleRule('color', 'red');
  expect(tree.props.href === '/');
  expect(tree.props.custom === true);
  expect(tree.props.children === 'My Link');
}); // TODO:
// - test for exact prop
// - test for both emotion and styled-components
// - asNavLink hof hoc, here to begin with then separate repo
//# sourceMappingURL=as-nav-link.test.js.map