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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ButtonLayout = require('./ButtonLayout');

var _ButtonLayout2 = _interopRequireDefault(_ButtonLayout);

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

var _ButtonLayout3 = require('./ButtonLayout.driver');

var _ButtonLayout4 = _interopRequireDefault(_ButtonLayout3);

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

var someDivWithLayout = function someDivWithLayout() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return _react2.default.createElement(
    _ButtonLayout2.default,
    props,
    _react2.default.createElement(
      'div',
      null,
      'abc'
    )
  );
};

describe('ButtonLayout', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_ButtonLayout4.default);

  it('should wrap a native component with ButtonLayout', function () {
    var driver = createDriver(someDivWithLayout());

    expect(driver.exists()).toEqual(true);
    expect(driver.doesComponentHasClass('fullblue')).toEqual(true);
  });

  it('should preserve all existing properties of the element', function () {
    var href = 'http://www.wix.com';
    var driver = createDriver(_react2.default.createElement(
      _ButtonLayout2.default,
      null,
      _react2.default.createElement(
        'a',
        { href: href },
        'abc'
      )
    ));

    expect(driver.exists()).toEqual(true);
    expect(driver.getComponentAttribute('href')).toEqual(href);
  });

  it('should have custom className', function () {
    var driver = createDriver(_react2.default.createElement(
      _ButtonLayout2.default,
      { className: 'myClass' },
      _react2.default.createElement(
        'div',
        null,
        'abc'
      )
    ));

    expect(driver.doesComponentHasClass('myClass')).toBeTruthy();
  });

  it('should extend existing className of the element', function () {
    var driver = createDriver(_react2.default.createElement(
      _ButtonLayout2.default,
      null,
      _react2.default.createElement(
        'div',
        { className: 'myClass' },
        'abc'
      )
    ));

    expect(driver.exists()).toEqual(true);
    expect(driver.doesComponentHasClass('myClass')).toEqual(true);
  });

  it('should extend existing inline style of the element', function () {
    var driver = createDriver(_react2.default.createElement(
      _ButtonLayout2.default,
      null,
      _react2.default.createElement(
        'div',
        { style: { color: 'red' } },
        'abc'
      )
    ));

    expect(driver.exists()).toEqual(true);
    expect(driver.getComponentAttribute('style')).toContain('color: red;');
  });

  it('should wrap a custom component with ButtonLayout', function () {
    var CustomComponent = function CustomComponent(props) {
      return _react2.default.createElement(
        'div',
        props,
        'abc'
      );
    };
    var driver = createDriver(_react2.default.createElement(
      _ButtonLayout2.default,
      null,
      _react2.default.createElement(CustomComponent, null)
    ));

    expect(driver.exists()).toEqual(true);
    expect(driver.doesComponentHasClass('fullblue')).toEqual(true);
  });

  it('should bypass some styles', function () {
    var driver = createDriver(someDivWithLayout());

    expect(driver.exists()).toEqual(true);
    expect(driver.getComponentAttribute('style')).toContain('display: inline-block;');
  });

  describe('class', function () {
    it('should get disabled class', function () {
      var driver = createDriver(someDivWithLayout({ disabled: true }));

      expect(driver.doesComponentHasClass('disabled')).toBeTruthy();
    });

    it('should have default "fullblue" style', function () {
      var driver = createDriver(someDivWithLayout());

      expect(driver.doesComponentHasClass('fullblue')).toBeTruthy();
    });

    it('should get "small" height class', function () {
      var height = 'small';
      var driver = createDriver(someDivWithLayout({ height: height }));

      expect(driver.doesComponentHasClass('heightsmall')).toBeTruthy();
    });

    it('should get "large" height class', function () {
      var height = 'large';
      var driver = createDriver(someDivWithLayout({ height: height }));

      expect(driver.doesComponentHasClass('heightlarge')).toBe(true);
    });

    it('should get custom style', function () {
      var theme = 'emptyblue';
      var driver = createDriver(someDivWithLayout({ theme: theme }));

      expect(driver.doesComponentHasClass(theme)).toBeTruthy();
    });

    it('should get "hover" class', function () {
      var driver = createDriver(someDivWithLayout({ hover: true }));

      expect(driver.doesComponentHasClass('hover')).toBeTruthy();
    });
  });
});