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

wix-style-react

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _jestSetup = require('wix-ui-test-utils/dist/src/jest-setup');

var _MessageBoxMarketerialLayout = require('./MessageBoxMarketerialLayout');

var _MessageBoxMarketerialLayout2 = _interopRequireDefault(_MessageBoxMarketerialLayout);

var _MessageBoxMarketerialLayout3 = require('./MessageBoxMarketerialLayout.driver');

var _MessageBoxMarketerialLayout4 = _interopRequireDefault(_MessageBoxMarketerialLayout3);

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');

var _deprecationLog = require('../utils/deprecationLog');

var _react3 = require('../../test/utils/react');

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

describe('MessageBoxMarketerialLayout', function () {
  var render = (0, _react3.createRendererWithDriver)(_MessageBoxMarketerialLayout4.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  afterEach(function () {
    return (0, _react3.cleanup)();
  });

  var requiredProps = {
    title: 'title',
    content: _react2.default.createElement('div', null),
    onClose: function onClose() {}
  };

  describe('action buttons', function () {
    it('should display the primary button label text on top the primary button', function () {
      var props = Object.assign({}, requiredProps, {
        primaryButtonLabel: 'primaryButtonLabel'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, _extends({}, props, { fixImagePosition: true })));
      expect(driver.getPrimaryButtonText()).toBe(props.primaryButtonLabel);
    });

    it('should display the primary button with custom them', function () {
      var props = Object.assign({}, requiredProps, {
        primaryButtonLabel: 'primaryButtonLabel',
        primaryButtonTheme: 'purple'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getPrimaryButton().className).toContain('fullpurple');
    });

    it('should not display the primary button if primary button label was not passed', function () {
      var props = Object.assign({}, requiredProps, {});
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getPrimaryButton()).toBeNull();
    });

    it('should not display disabled primary button if primaryButtonDisabled is true', function () {
      var props = Object.assign({}, requiredProps, {
        primaryButtonLabel: 'primaryButtonLabel',
        primaryButtonDisabled: true
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getPrimaryButton().attributes.disabled).toBeTruthy();
    });

    it('should display the secondary button label text on top the secondary button', function () {
      var props = Object.assign({}, requiredProps, {
        secondaryButtonLabel: 'secondaryButtonLabel'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getSecondaryButtonText()).toBe(props.secondaryButtonLabel);
    });

    it('should not display the secondary button if secondary button label was not passed', function () {
      var props = Object.assign({}, requiredProps, {});
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getSecondaryButton()).toBeNull();
    });

    it('should trigger the primary button action upon clicking the primary button', function () {
      var props = Object.assign({}, requiredProps, {
        onPrimaryButtonClick: _sinon2.default.spy(),
        primaryButtonLabel: 'primaryButtonLabel'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      driver.clickOnPrimaryButton();
      expect(props.onPrimaryButtonClick.calledOnce).toBeTruthy();
    });

    it('should trigger the secondary button action upon clicking the secondary button', function () {
      var props = Object.assign({}, requiredProps, {
        onSecondaryButtonClick: _sinon2.default.spy(),
        secondaryButtonLabel: 'secondaryButtonLabel'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      driver.clickOnSecondaryButton();
      expect(props.onSecondaryButtonClick.calledOnce).toBeTruthy();
    });

    it('should close the message dialog upon clicking the close button', function () {
      var props = Object.assign({}, requiredProps, {
        onClose: _sinon2.default.spy()
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      driver.closeMessageBox();
      expect(props.onClose.calledOnce).toBeTruthy();
    });
  });

  describe('general', function () {
    it('should render title', function () {
      var props = Object.assign({}, requiredProps, {
        title: 'title'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getTitle()).toBe(props.title);
    });

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

    it('should render image from given imageUrl', function () {
      var props = Object.assign({}, requiredProps, {
        imageUrl: 'http://www.domstechblog.com/wp-content/uploads/2015/09/wix.png'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getImageSrc()).toBe(props.imageUrl);
    });

    it('should render image from given component', function () {
      var props = Object.assign({}, requiredProps, {
        imageComponent: _react2.default.createElement('div', { 'data-hook': 'image-component-test' })
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getContentBySelector('[data-hook="image-component-test"]')).not.toBeNull();
    });

    it('should use default color theme (blue) if none was passed', function () {
      var props = Object.assign({}, requiredProps, {
        primaryButtonLabel: 'primaryButtonLabel'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getPrimaryButton().className).toContain('fullblue');
    });

    it('should use color theme', function () {
      var props = Object.assign({}, requiredProps, {
        primaryButtonLabel: 'primaryButtonLabel',
        theme: 'purple'
      });
      var driver = createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, props));
      expect(driver.getPrimaryButton().className).toContain('fullpurple');
    });
  });

  describe('footer children', function () {
    it('should render the passed footer content', function () {
      var props = Object.assign({}, requiredProps, {
        footerBottomChildren: _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      });

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

      expect(driver.getContentBySelector('[data-hook="inner-div"]')).not.toBeNull();
      expect(driver.getContentBySelector('[data-hook="footer-layout-bottom-children"]')).not.toBeNull();
    });

    it('should not render secondary button when footer content passed', function () {
      var props = Object.assign({}, requiredProps, {
        footerBottomChildren: _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      });

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

      expect(driver.getSecondaryButton()).toBeNull();
    });

    it('should not render footer\'s wrapper div when footer content isn\'t passed', function () {
      var props = Object.assign({}, requiredProps, {});

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

      expect(driver.getContentBySelector('[data-hook="footer-layout-bottom-children"]')).toBeNull();
    });
  });

  describe('deprecationLog fixImagePosition', function () {
    var depLogSpy = void 0;

    beforeEach(function () {
      depLogSpy = jest.spyOn(_deprecationLog.depLogger, 'log');
    });

    afterEach(function () {
      return depLogSpy.mockRestore();
    });

    it('should show deprecationLog', function () {
      createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, _extends({}, requiredProps, { imageUrl: 'blah' })));
      expect(depLogSpy).toBeCalledWith('MessageBoxMarketerialLayout have issue with image positioning. Please use fixImagePosition prop to fix it. Next major version will have a fix by default.');
    });

    it('should show deprecationLog and warn of imageUrl not a string', function () {
      createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, _extends({}, requiredProps, { imageUrl: 4 })));
      expect(_jestSetup.consoleErrors.get()).toHaveLength(1);
      expect(_jestSetup.consoleErrors.get()[0].includes('Invalid')).toBeTruthy();

      _jestSetup.consoleErrors.reset(); // prevent test from failing
    });

    it('should NOT show deprecationLog when fixImgPosition is provided', function () {
      createDriver(_react2.default.createElement(_MessageBoxMarketerialLayout2.default, _extends({}, requiredProps, {
        imageUrl: 'blah',
        fixImagePosition: true
      })));
      expect(depLogSpy).not.toHaveBeenCalled();
    });
  });

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

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