wix-style-react/dist/src/PageHeader/PageHeader.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _PageHeader = require('./PageHeader');

var _PageHeader2 = _interopRequireDefault(_PageHeader);

var _PageHeader3 = require('./PageHeader.driver');

var _PageHeader4 = _interopRequireDefault(_PageHeader3);

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

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _Breadcrumbs = require('../Breadcrumbs/Breadcrumbs');

var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var generateBreadcrumbs = function generateBreadcrumbs(title) {
  return _react2.default.createElement(_Breadcrumbs2.default, {
    items: [{ id: '1', value: title }],
    activeId: '1',
    size: 'medium',
    theme: 'onGrayBackground',
    onClick: function onClick() {}
  });
};

describe('PageHeader', function () {
  var title = 'This is a title';
  var subtitle = 'This is a subtitle';
  var breadcrumbs = generateBreadcrumbs(title);
  var actionsBar = _react2.default.createElement(
    _Button2.default,
    null,
    'Action'
  );
  var onBackClicked = function onBackClicked() {};
  var createDriver = (0, _driverFactory.createDriverFactory)(_PageHeader4.default);

  it('should initialize component with title', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeFalsy();
  });

  it('should initialize component with minimized title', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { minimized: true, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with title and subtitle', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.subtitleText()).toBe(subtitle);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeTruthy();
    expect(driver.isBreadcrumbsExists()).toBeFalsy();
  });

  it('should initialize component with title and subtitle with a special character', function () {
    var someTextWithSpecialCharachters = 'tom & jerry';
    var pageHeader = _react2.default.createElement(_PageHeader2.default, {
      title: someTextWithSpecialCharachters,
      subtitle: someTextWithSpecialCharachters
    });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toEqual(someTextWithSpecialCharachters);
    expect(driver.subtitleText()).toEqual(someTextWithSpecialCharachters);
  });

  it('should initialize component with minimized title and subtitle', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { minimized: true, title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with breadcrumbs and title', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { breadcrumbs: breadcrumbs, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with minimized breadcrumbs and title', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { minimized: true, breadcrumbs: breadcrumbs, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with breadcrumbs, title and subtitle', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.subtitleText()).toBe(subtitle);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeTruthy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with minimized breadcrumbs, title and subtitle', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, {
      minimized: true,
      breadcrumbs: breadcrumbs,
      title: title,
      subtitle: subtitle
    });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with title and actionsBar', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, actionsBar: actionsBar });
    var driver = createDriver(pageHeader);
    expect(driver.isActionBarExists()).toBeTruthy();
  });

  it('should initialize component with minimized title and actionsBar', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { minimized: true, title: title, actionsBar: actionsBar });
    var driver = createDriver(pageHeader);
    expect(driver.isActionBarExists()).toBeTruthy();
  });

  it('should initialize component with title and back button without callback', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, showBackButton: true });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should initialize component with title and back button callback', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, onBackClicked: onBackClicked });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should initialize component with title and back button callback and back button', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, showBackButton: true, onBackClicked: onBackClicked });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeTruthy();
  });

  it('should initialize component with minimized title and back button callback and back button', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, {
      minimized: true,
      title: title,
      showBackButton: true,
      onBackClicked: onBackClicked
    });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should execute the given back button callback once the back button is clicked', function () {
    var backButtonCallback = jest.fn();
    var pageHeader = _react2.default.createElement(_PageHeader2.default, {
      title: title,
      showBackButton: true,
      onBackClicked: backButtonCallback
    });
    var driver = createDriver(pageHeader);
    driver.clickBackButton();

    expect(backButtonCallback).toBeCalledTimes(1);
  });

  it('should have custom className', function () {
    var pageHeader = _react2.default.createElement(_PageHeader2.default, { title: title, className: 'myClass' });
    var driver = createDriver(pageHeader);
    expect(driver.hasClass('myClass')).toBeTruthy();
  });

  describe('should initialize component with render props title', function () {
    var altTitle = 'This is a different title';
    var HeaderTitleComponent = function HeaderTitleComponent(props) {
      return _react2.default.createElement(
        'span',
        null,
        props.minimized ? altTitle : title
      );
    };
    HeaderTitleComponent.propTypes = { minimized: _propTypes2.default.bool };

    it('not minimized', function () {
      var pageHeader = _react2.default.createElement(_PageHeader2.default, {
        title: function title(minimized) {
          return _react2.default.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.titleText()).toBe(title);
      expect(driver.isTitleExists()).toBeTruthy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeFalsy();
    });

    it('minimized with breadcrumbs', function () {
      var pageHeader = _react2.default.createElement(_PageHeader2.default, {
        minimized: true,
        breadcrumbs: breadcrumbs,
        title: function title(minimized) {
          return _react2.default.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.isTitleExists()).toBeFalsy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeTruthy();
    });

    it('minimized without breadcrumbs', function () {
      var pageHeader = _react2.default.createElement(_PageHeader2.default, {
        minimized: true,
        title: function title(minimized) {
          return _react2.default.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.isTitleExists()).toBeFalsy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeTruthy();
      expect(driver.breadcrumbsText()).toBe(altTitle);
    });
  });
});