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

wix-style-react

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; };

import React from 'react';
import { consoleErrors } from 'wix-ui-test-utils/dist/src/jest-setup';
import MessageBoxMarketerialLayout from './MessageBoxMarketerialLayout';
import MessageBoxMarketerialLayoutFactory from './MessageBoxMarketerialLayout.driver';
import sinon from 'sinon';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { messageBoxMarketerialLayoutTestkitFactory } from '../../testkit';
import { messageBoxMarketerialLayoutTestkitFactory as enzymeMessageBoxTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
import { depLogger } from '../utils/deprecationLog';
import { createRendererWithDriver, cleanup } from '../../test/utils/react';

describe('MessageBoxMarketerialLayout', function () {
  var render = createRendererWithDriver(MessageBoxMarketerialLayoutFactory);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  afterEach(function () {
    return cleanup();
  });

  var requiredProps = {
    title: 'title',
    content: React.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(React.createElement(MessageBoxMarketerialLayout, _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(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, props));
      expect(driver.getSecondaryButton()).toBeNull();
    });

    it('should trigger the primary button action upon clicking the primary button', function () {
      var props = Object.assign({}, requiredProps, {
        onPrimaryButtonClick: sinon.spy(),
        primaryButtonLabel: 'primaryButtonLabel'
      });
      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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: sinon.spy(),
        secondaryButtonLabel: 'secondaryButtonLabel'
      });
      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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: sinon.spy()
      });
      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, props));
      expect(driver.getTitle()).toBe(props.title);
    });

    it('should render the passed content in the markup', function () {
      var props = Object.assign({}, requiredProps, {
        content: React.createElement('div', { 'data-hook': 'inner-div' })
      });
      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, props));
      expect(driver.getImageSrc()).toBe(props.imageUrl);
    });

    it('should render image from given component', function () {
      var props = Object.assign({}, requiredProps, {
        imageComponent: React.createElement('div', { 'data-hook': 'image-component-test' })
      });
      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, 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: React.createElement('div', { 'data-hook': 'inner-div' })
      });

      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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: React.createElement('div', { 'data-hook': 'inner-div' })
      });

      var driver = createDriver(React.createElement(MessageBoxMarketerialLayout, 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(React.createElement(MessageBoxMarketerialLayout, props));

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

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

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

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

    it('should show deprecationLog', function () {
      createDriver(React.createElement(MessageBoxMarketerialLayout, _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(React.createElement(MessageBoxMarketerialLayout, _extends({}, requiredProps, { imageUrl: 4 })));
      expect(consoleErrors.get()).toHaveLength(1);
      expect(consoleErrors.get()[0].includes('Invalid')).toBeTruthy();

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

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

  describe('testkit', function () {
    it('should exist', function () {
      expect(isTestkitExists(React.createElement(MessageBoxMarketerialLayout, requiredProps), messageBoxMarketerialLayoutTestkitFactory)).toBe(true);
    });
  });

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