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

wix-style-react

import React from 'react';
import MessageBoxFunctionalLayout from './MessageBoxFunctionalLayout';
import MessageBoxFunctionalLayoutFactory from './MessageBoxFunctionalLayout.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import sinon from 'sinon';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { messageBoxFunctionalLayoutTestkitFactory } from '../../testkit';
import { messageBoxFunctionalLayoutTestkitFactory as enzymeMessageBoxTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';

describe('MessageBox', function () {
  var createDriver = createDriverFactory(MessageBoxFunctionalLayoutFactory);
  describe('action buttons', function () {
    it('should display the confirmation text on top the confirmation button', function () {
      var props = {
        confirmText: 'confirmText'
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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(React.createElement(MessageBoxFunctionalLayout, props));
      expect(driver.getCancellationButtonText()).toBe(props.cancelText);
    });

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

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

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

    it('should trigger the \'onOk\' action upon clicking the confirmation button', function () {
      var props = {
        onOk: sinon.spy(),
        confirmText: 'confirm'
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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: sinon.spy()
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, props));
      driver.clickOnCancellationButton();
      expect(props.onCancel.calledOnce).toBeTruthy();
    });

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

      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, props));

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

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

    it('should not appear', function () {
      var props = {
        onCancel: sinon.spy(),
        closeButton: false
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, props));
      expect(driver.getHeaderCloseButton()).toBeFalsy();
    });

    it('should trigger the \'onCancel\' action upon clicking the header close button', function () {
      var props = {
        onCancel: sinon.spy()
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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 = sinon.spy();
      var onCloseFunction = sinon.spy();

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

      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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(React.createElement(MessageBoxFunctionalLayout, props));
      expect(driver.isThemeExist('blue')).toBeTruthy();
    });

    it('should allowing setting the theme', function () {
      var props = {
        theme: 'green'
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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: React.createElement('div', { 'data-hook': 'inner-div' })
      };
      var driver = createDriver(React.createElement(MessageBoxFunctionalLayout, 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(React.createElement(MessageBoxFunctionalLayout, 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(React.createElement(MessageBoxFunctionalLayout, props));
      expect(driver.getFooter()).toBeNull();
    });

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

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

    it('should render the passed children in the markup', function () {
      var props = {};
      var driver = createDriver(React.createElement(
        MessageBoxFunctionalLayout,
        props,
        React.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(React.createElement(
        MessageBoxFunctionalLayout,
        normalRendering,
        React.createElement(
          'div',
          null,
          'Content'
        )
      ));
      expect(regularDriver.toHaveBodyPadding()).toBeTruthy();

      var zeroPaddingDriver = createDriver(React.createElement(
        MessageBoxFunctionalLayout,
        zeroPaddingRendering,
        React.createElement(
          'div',
          null,
          'Content'
        )
      ));
      expect(zeroPaddingDriver.toHaveBodyPadding()).toBeFalsy();
    });

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

  describe('testkit', function () {
    it('should exist', function () {
      expect(isTestkitExists(React.createElement(MessageBoxFunctionalLayout, null), messageBoxFunctionalLayoutTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect(isEnzymeTestkitExists(React.createElement(MessageBoxFunctionalLayout, null), enzymeMessageBoxTestkitFactory, mount)).toBe(true);
    });
  });
});