wix-style-react/dist/src/Card/CollapsedHeader/CollapsedHeader.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CollapsedHeader = require('./CollapsedHeader.driver');

var _CollapsedHeader2 = _interopRequireDefault(_CollapsedHeader);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _CollapsedHeader3 = require('./CollapsedHeader');

var _CollapsedHeader4 = _interopRequireDefault(_CollapsedHeader3);

var _polyfills = require('../../../testkit/polyfills');

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

var dataHook = 'content';
var content = _react2.default.createElement(
  'div',
  { 'data-hook': dataHook },
  'Some Content'
);

describe('CollapsedHeader', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_CollapsedHeader2.default);
  _polyfills.requestAnimationFramePolyfill.install();

  it('should have a title', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { title: 'Header Title' },
      _react2.default.createElement('div', null)
    ));
    expect(driver.title()).toBe('Header Title');
  });

  it('should have a subtitle', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { title: 'Header Title', subtitle: 'Header Subtitle' },
      _react2.default.createElement('div', null)
    ));
    expect(driver.subtitle()).toBe('Header Subtitle');
  });

  it('should show content', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { title: 'Header Title' },
      content
    ));

    expect(driver.findByDatahook('content').innerHTML).toBe('Some Content');
  });

  it('should hide content', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { collapsed: true, title: 'Header Title' },
      content
    ));

    expect(driver.findByDatahook(dataHook)).toBe(null);
  });

  it('should call with collapse status', function () {
    var onCollapsedChange = jest.fn();
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      {
        title: 'Header Title',
        onCollapsedChange: onCollapsedChange
      },
      content
    ));

    driver.click();
    expect(onCollapsedChange).toBeCalledWith(true);

    driver.click();
    expect(onCollapsedChange).toBeCalledWith(false);
  });

  it('should hide content on collapse', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { title: 'Header Title' },
      content
    ));

    driver.click();

    expect(driver.findByDatahook(dataHook)).toBe(null);
  });

  it('should show content on collapse', function () {
    var driver = createDriver(_react2.default.createElement(
      _CollapsedHeader4.default,
      { collapsed: true, title: 'Header Title' },
      content
    ));

    driver.click();

    expect(driver.findByDatahook(dataHook).innerHTML).toBe('Some Content');
  });

  describe('controlled collapse', function () {
    it('should call with collapsed status', function () {
      var onCollapsedChange = jest.fn();
      var driver = createDriver(_react2.default.createElement(
        _CollapsedHeader4.default,
        {
          title: 'Header Title',
          controlled: true,
          onCollapsedChange: onCollapsedChange
        },
        content
      ));

      driver.click();
      expect(onCollapsedChange).toBeCalledWith(false);
    });

    it('should not hide content when controlled', function () {
      var driver = createDriver(_react2.default.createElement(
        _CollapsedHeader4.default,
        {
          title: 'Header Title',
          controlled: true,
          onCollapsedChange: jest.fn()
        },
        content
      ));

      driver.click();

      expect(driver.findByDatahook(dataHook).innerHTML).toBe('Some Content');
    });
  });
});