@bootstrap-styled/v4/lib/Media/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 _BootstrapProvider = _interopRequireDefault(require("@bootstrap-styled/provider/lib/BootstrapProvider"));

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

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

/**
 * Testing our Media component
 */
var children = _react.default.createElement("div", null, _react.default.createElement(_index.default, {
  left: true,
  href: "#"
}, _react.default.createElement(_index.default, {
  object: true,
  src: "holder.js/64x64",
  alt: "Generic placeholder image"
})), _react.default.createElement(_index.default, {
  body: true
}, _react.default.createElement(_index.default, {
  heading: true
}, "Media heading"), "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.", _react.default.createElement(_index.default, null, _react.default.createElement(_index.default, {
  left: true,
  href: "#"
}, _react.default.createElement(_index.default, {
  object: true,
  src: "holder.js/64x64",
  alt: "Generic placeholder image"
})), _react.default.createElement(_index.default, {
  body: true
}, _react.default.createElement(_index.default, {
  heading: true
}, "Nested media heading"), "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus."))));

var renderComponent = function renderComponent() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return (0, _enzyme.mount)(_react.default.createElement(_index.default, props));
};

var renderComponentUsingTheme = function renderComponentUsingTheme() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return (0, _enzyme.mount)(_react.default.createElement(_BootstrapProvider.default, null, _react.default.createElement(_index.default, props)));
};

describe('<Media />', function () {
  it('should render a <Media> tag without a theme', function () {
    var renderedComponent = renderComponent({
      children: children
    });
    expect(renderedComponent.length).toBe(1);
  });
  it('should have children without a theme', function () {
    var renderedComponent = renderComponent({
      children: children
    });
    expect(renderedComponent.contains(children)).toEqual(true);
  });
  it('should render a <Media> tag with a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.length).toBe(1);
  });
  it('should render a <Media> tag with an H4 and a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      heading: true
    });
    expect(renderedComponent.find('H4').length).toBe(3);
  });
  it('should render a <Media> tag with an A and a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.find('A').length).toBe(2);
  });
  it('should render a <Media> tag with an A and a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.find('A').length).toBe(2);
  });
  it('should render a <Media> tag with an Img and a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      object: true,
      src: 'http://foobar',
      alt: 'image test'
    });
    expect(renderedComponent.find('Img').length).toBe(1);
  });
  it('should render a <Media> tag with an Ul and a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      list: true
    });
    expect(renderedComponent.find('Ul').length).toBe(1);
  });
  it('should have a class media-body', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      body: true
    });
    expect(renderedComponent.find('div').at(1).hasClass('media-body')).toBe(true);
  });
  it('should have a class media-heading', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.find('h4').at(0).hasClass('media-heading')).toBe(true);
  });
  it('should have a class media-left', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.find('a').at(0).hasClass('media-left')).toBe(true);
  });
  it('should have a class media-right', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: _react.default.createElement("h1", null, "toto"),
      right: true
    });
    expect(renderedComponent.find('a.media-right').hasClass('media-right')).toBe(true);
  });
  it('should have a class media-top', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      top: true
    });
    expect(renderedComponent.find('div').at(1).hasClass('media-top')).toBe(true);
  });
  it('should have a class media-bottom', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      bottom: true
    });
    expect(renderedComponent.find('div').at(1).hasClass('media-bottom')).toBe(true);
  });
  it('should have a class media-middle', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      middle: true
    });
    expect(renderedComponent.find('div').at(1).hasClass('media-middle')).toBe(true);
  });
  it('should have a class media-object', function () {
    var renderedComponent = renderComponentUsingTheme({
      object: true,
      src: 'http://foobar',
      alt: 'image test'
    });
    expect(renderedComponent.find('img').at(0).hasClass('media-object')).toBe(true);
  });
  it('should have a class media-list', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children,
      list: true
    });
    expect(renderedComponent.find('ul').hasClass('media-list')).toBe(true);
  });
  it('should have children with a theme', function () {
    var renderedComponent = renderComponentUsingTheme({
      children: children
    });
    expect(renderedComponent.contains(children)).toEqual(true);
  });
});