@bootstrap-styled/v4/lib/TetherContent/tests/index.test.js

twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities.

"use strict";

var _enzyme = require("enzyme");

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

var _tetherFix = _interopRequireDefault(require("tether-fix"));

var _index = _interopRequireDefault(require("../index"));

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var children = _react.default.createElement("p", {
  id: "content"
}, "Test");

var functionTest = jest.fn();
var tetherConfig = {
  attachment: 'top center'
};

var renderComponent = function renderComponent() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return (0, _enzyme.mount)(_react.default.createElement(_index.default, {
    className: props.className,
    tether: _objectSpread({}, tetherConfig, {}, props.tether),
    tetherRef: props.tetherRef,
    isOpen: props.isOpen,
    toggle: functionTest
  }, props.children));
};

describe('<TetherContent />', function () {
  var target;
  beforeEach(function () {
    target = document.createElement('div');
    target.innerHTML = 'I\'m a target!';
    document.body.appendChild(target);
  });
  afterEach(function () {
    document.body.removeChild(target);
    target = null;
  });
  it('should render an <Output> tag without a theme', function () {
    var renderedComponent = renderComponent({
      children: children
    });
    expect(renderedComponent.length).toBe(1);
  });
  it('should render children somewhere in the DOM', function () {
    var renderedComponent = renderComponent({
      children: children,
      isOpen: true,
      tether: {
        target: target
      }
    });
    var content = document.getElementById('content');
    expect(content).not.toBeNull();
    renderedComponent.setProps({
      isOpen: false
    });
    content = document.getElementById('content');
    expect(content).toBeNull();
  }); // If the component's render() method isn't called before Tether is called to
  // position the attached element, it will use the bounds of an empty div for
  // calculations, resulting in incorrect alignment once content is rendered.
  // This was the crux of the issue #69.

  it('should render children before calling show()', function () {
    var renderedComponent = renderComponent({
      children: children,
      tether: {
        target: target
      }
    });
    var position = jest.spyOn(_tetherFix.default.prototype, 'position').mockImplementation(function () {
      var content = document.getElementById('content');
      expect(content).not.toBeNull();
    });
    renderedComponent.setProps({
      isOpen: true
    });
    expect(position).toHaveBeenCalled();
    position.mockRestore();
  });
});