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

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

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; }

import React from 'react';
import styled from 'styled-components';
import { MemoryRouter as Router } from 'react-router-dom';
import renderer from 'react-test-renderer';
import asNavLink from './as-nav-link';
import 'jest-styled-components';
var MyNavAnchor = styled(function (_ref) {
  var _ref$as = _ref.as,
      T = _ref$as === void 0 ? 'a' : _ref$as,
      props = _objectWithoutPropertiesLoose(_ref, ["as"]);

  return React.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 = asNavLink()(MyNavAnchor);

    var MyTest = function MyTest() {
      return React.createElement(Router, null, React.createElement(MyNavLink, {
        to: "/somewhere"
      }, "My Link"));
    };

    var tree = renderer.create(React.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 = asNavLink()(MyNavAnchor);

    var MyTest = function MyTest() {
      return React.createElement(Router, null, React.createElement(MyNavLink, {
        to: "/"
      }, "My Link"));
    };

    var tree = renderer.create(React.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 = styled(function (_ref3) {
    var _ref3$as = _ref3.as,
        T = _ref3$as === void 0 ? 'a' : _ref3$as,
        props = _objectWithoutPropertiesLoose(_ref3, ["as"]);

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

  var MyTest = function MyTest() {
    return React.createElement(Router, null, React.createElement(MyNavLink, {
      to: "/"
    }, "My Link"));
  };

  var tree = renderer.create(React.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