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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _RichTextArea = require('./RichTextArea.driver');

var _RichTextArea2 = _interopRequireDefault(_RichTextArea);

var _RichTextArea3 = require('./RichTextArea');

var _RichTextArea4 = _interopRequireDefault(_RichTextArea3);

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

var mockGetSelection = function mockGetSelection() {
  var original = window.getSelection;
  var fn = function fn() {
    return {};
  };
  fn.restore = function () {
    return window.getSelection = original;
  };
  window.getSelection = fn;
};

describe('RichTextArea', function () {
  var currentValue = void 0;

  beforeEach(function () {
    mockGetSelection();
  });

  afterEach(function () {
    window.getSelection.restore();
  });

  describe('makeHrefAbsolute method', function () {
    it('should do nothing', function () {
      expect((0, _RichTextArea3.makeHrefAbsolute)('http://www.wix.com')).toBe('http://www.wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('https://www.wix.com')).toBe('https://www.wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('https://www.wix.com')).toBe('https://www.wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('//www.wix.com')).toBe('//www.wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('//wix.com')).toBe('//wix.com');
    });

    it('should make href absolute', function () {
      expect((0, _RichTextArea3.makeHrefAbsolute)('www.wix.com')).toBe('//www.wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('wix.com')).toBe('//wix.com');
      expect((0, _RichTextArea3.makeHrefAbsolute)('x')).toBe('//x');
      expect((0, _RichTextArea3.makeHrefAbsolute)('')).toBe('//');
    });
  });

  it('should render value as text', function () {
    var text = 'text content';
    var driver = createComponent({
      value: '<p>' + text + '</p>'
    });
    expect(driver.getContent()).toBe(text);
  });

  it('should call callback on change', function () {
    var driver = createComponent();
    var text = 'testing';
    driver.enterText(text);
    expect(currentValue).toBe('<p>' + text + '</p>');
  });

  it('should render buttons specified in props.buttons', function () {
    var buttons = ['bold', 'italic', 'underline', 'link', 'unordered-list', 'ordered-list'];
    var driver = createComponent({ buttons: buttons });
    expect(driver.getButtonTypes()).toEqual(buttons);
  });

  it('should handle bold button click', function () {
    var driver = createComponent({ buttons: ['bold'] });
    driver.clickBoldButton();
    driver.enterText('test');

    expect(currentValue).toEqual('<p><strong>test</strong></p>');
  });

  it('should handle italic button click', function () {
    var driver = createComponent({ buttons: ['italic'] });
    driver.clickItalicButton();
    driver.enterText('test');

    expect(currentValue).toEqual('<p><em>test</em></p>');
  });

  it('should handle underline button click', function () {
    var driver = createComponent({ buttons: ['underline'] });
    driver.clickUnderlineButton();
    driver.enterText('test');

    expect(currentValue).toEqual('<p><u>test</u></p>');
  });

  it('should handle unordered-list button click', function () {
    var driver = createComponent({ buttons: ['unordered-list'] });
    driver.clickUnorderedListButton();
    driver.enterText('test');

    expect(currentValue).toEqual('<ul><li>test</li></ul>');
  });

  it('should handle ordered-list button click', function () {
    var driver = createComponent({ buttons: ['ordered-list'] });
    driver.clickOrderedListButton();
    driver.enterText('test');

    expect(currentValue).toEqual('<ol><li>test</li></ol>');
  });

  it('should show error indicator', function () {
    var driver = createComponent({ error: true });
    expect(driver.isErrorIndicatorVisible()).toBeTruthy();
  });

  it('should render placeholder', function () {
    var driver = createComponent({ placeholder: 'HELLO' });
    expect(driver.getContent()).toBe('HELLO');
  });

  it('should be disabled', function () {
    var driver = createComponent({ disabled: true });
    expect(driver.isDisabled()).toBeTruthy();
  });

  describe('resizable attribute', function () {
    it('should pass down to the wrapped input', function () {
      var driver = createComponent({ resizable: true });
      expect(driver.isResizable()).toBeTruthy();
    });

    it('should pass down to the wrapped input with default false value', function () {
      var driver = createComponent();
      expect(driver.isResizable()).toBeFalsy();
    });
  });

  describe('insert image', function () {
    var onImageRequest = function onImageRequest(callback) {
      callback('https://some-dom.com/ddec1e4d26f94cae963c8c54e9838749/600x600.jpg');
    };

    it("should not show insert image icon only when props does not contain 'onImageRequest' callback", function () {
      var driver = createComponent();
      expect(driver.isAddImageButtonExist()).toBeFalsy();
    });

    it("should show insert image icon only when props does contain 'onImageRequest' callback", function () {
      var driver = createComponent({ onImageRequest: onImageRequest });
      expect(driver.isAddImageButtonExist()).toBeTruthy();
    });

    it('should insert image to the editor', function () {
      var driver = createComponent({ onImageRequest: onImageRequest });
      expect(driver.isImageExist()).toBeFalsy();
      driver.clickImageButton();
      expect(driver.isImageExist()).toBeTruthy();
    });

    it('insert a default block after inserting an image, given an empty document', function () {
      var driver = createComponent({ onImageRequest: onImageRequest });
      driver.clickImageButton();
      expect(driver.isDefaultBlockExist()).toBeTruthy();
    });
  });

  var createDriver = (0, _driverFactory.createDriverFactory)(_RichTextArea2.default);
  function createComponent(props) {
    var mergedProps = Object.assign({
      onChange: function onChange(newValue) {
        return currentValue = newValue;
      }
    }, props);
    return createDriver(_react2.default.createElement(_RichTextArea4.default, mergedProps));
  }
});