wix-style-react/dist/src/MessageBox/MessageBoxFunctionalLayout.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MessageBoxFunctionalLayout = require('./MessageBoxFunctionalLayout');

var _MessageBoxFunctionalLayout2 = _interopRequireDefault(_MessageBoxFunctionalLayout);

var _MessageBoxFunctionalLayout3 = require('./MessageBoxFunctionalLayout.driver');

var _MessageBoxFunctionalLayout4 = _interopRequireDefault(_MessageBoxFunctionalLayout3);

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

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

var _testkitSanity = require('../../test/utils/testkit-sanity');

var _testkit = require('../../testkit');

var _enzyme = require('../../testkit/enzyme');

var _enzyme2 = require('enzyme');

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

describe('MessageBox', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_MessageBoxFunctionalLayout4.default);
  describe('action buttons', function () {
    it('should display the confirmation text on top the confirmation button', function () {
      var props = {
        confirmText: 'confirmText'
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getConfirmationButtonText()).toBe(props.confirmText);
    });

    it('should display the cancellation text on top the cancellation button', function () {
      var props = {
        cancelText: 'cancelText'
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getCancellationButtonText()).toBe(props.cancelText);
    });

    it('should disable cancel button if disabled', function () {
      var props = {
        cancelText: 'cancelText',
        disableCancel: true
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.isCancelEnable()).toBeFalsy();
    });

    it('should disable confirmation button if disabled', function () {
      var props = {
        confirmText: 'ok',
        disableConfirmation: true
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.isConfirmationEnable()).toBeFalsy();
    });

    it('should not display the cancellation button if cancellationText is empty', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getCancellationButton()).toBeNull();
    });

    it('should trigger the \'onOk\' action upon clicking the confirmation button', function () {
      var props = {
        onOk: _sinon2.default.spy(),
        confirmText: 'confirm'
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      driver.clickOnConfirmationButton();
      expect(props.onOk.calledOnce).toBeTruthy();
    });

    it('should trigger the \'onCancel\' action upon clicking the cancellation button', function () {
      var props = {
        cancelText: 'cancelText',
        onCancel: _sinon2.default.spy()
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      driver.clickOnCancellationButton();
      expect(props.onCancel.calledOnce).toBeTruthy();
    });

    it('should render side actions', function () {
      var dataHook = 'side-actions';
      var props = {
        sideActions: _react2.default.createElement('div', { 'data-hook': dataHook })
      };

      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));

      expect(driver.getChildBySelector('[data-hook="' + dataHook + '"]')).not.toBeNull();
    });
  });

  describe('closeButton attribute', function () {
    it('should appear by default', function () {
      var props = {
        onCancel: _sinon2.default.spy()
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getHeaderCloseButton()).toBeTruthy();
    });

    it('should not appear', function () {
      var props = {
        onCancel: _sinon2.default.spy(),
        closeButton: false
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getHeaderCloseButton()).toBeFalsy();
    });

    it('should trigger the \'onCancel\' action upon clicking the header close button', function () {
      var props = {
        onCancel: _sinon2.default.spy()
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      driver.clickOnHeaderCloseButton();
      expect(props.onCancel.calledOnce).toBeTruthy();
    });

    it('should trigger the \'onClose\' action upon clicking the close button if \'onClose\' prop exists', function () {
      var onCancelFunction = _sinon2.default.spy();
      var onCloseFunction = _sinon2.default.spy();

      var props = {
        onCancel: onCancelFunction,
        onClose: onCloseFunction
      };

      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      driver.clickOnHeaderCloseButton();
      expect(props.onCancel.calledOnce).toBeFalsy();
      expect(props.onClose.calledOnce).toBeTruthy();
    });
  });

  describe('theme attribute', function () {
    it('should set the theme by default to "blue"', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.isThemeExist('blue')).toBeTruthy();
    });

    it('should allowing setting the theme', function () {
      var props = {
        theme: 'green'
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.isThemeExist('green')).toBeTruthy();
      expect(driver.isThemeExist('blue')).toBeFalsy();
    });
  });

  describe('footer children', function () {
    it('should render the passed footer content', function () {
      var props = {
        footerBottomChildren: _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getChildBySelector('[data-hook="inner-div"]')).not.toBeNull();
      expect(driver.getChildBySelector('[data-hook="footer-layout-bottom-children"]')).not.toBeNull();
    });

    it('should not render footer\'s wrapper div when footer content isn\'t passed', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getChildBySelector('[data-hook="footer-layout-bottom-children"]')).toBeNull();
    });
  });

  describe('general', function () {
    it('should hide the footer', function () {
      var props = {
        hideFooter: true
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getFooter()).toBeNull();
    });

    it('should show footer by default', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getFooter()).not.toBeNull();
    });

    it('should render title', function () {
      var props = {
        title: 'title'
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getTitle()).toBe(props.title);
    });

    it('should render the passed children in the markup', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(
        _MessageBoxFunctionalLayout2.default,
        props,
        _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      ));
      expect(driver.getChildBySelector('[data-hook="inner-div"]')).not.toBeNull();
    });

    it('should render with zero padding when explicitly asked for', function () {
      var normalRendering = {};
      var zeroPaddingRendering = { noBodyPadding: true };
      var regularDriver = createDriver(_react2.default.createElement(
        _MessageBoxFunctionalLayout2.default,
        normalRendering,
        _react2.default.createElement(
          'div',
          null,
          'Content'
        )
      ));
      expect(regularDriver.toHaveBodyPadding()).toBeTruthy();

      var zeroPaddingDriver = createDriver(_react2.default.createElement(
        _MessageBoxFunctionalLayout2.default,
        zeroPaddingRendering,
        _react2.default.createElement(
          'div',
          null,
          'Content'
        )
      ));
      expect(zeroPaddingDriver.toHaveBodyPadding()).toBeFalsy();
    });

    it('should render the passed image', function () {
      var props = {
        image: _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      };
      var driver = createDriver(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, props));
      expect(driver.getChildBySelector('[data-hook="inner-div"]')).not.toBeNull();
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, null), _testkit.messageBoxFunctionalLayoutTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_MessageBoxFunctionalLayout2.default, null), _enzyme.messageBoxFunctionalLayoutTestkitFactory, _enzyme2.mount)).toBe(true);
    });
  });
});