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

wix-style-react

import React from 'react';
import ButtonLayout from './ButtonLayout';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import buttonDriverFactory from './ButtonLayout.driver';

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

describe('ButtonLayout', function () {
  var createDriver = createDriverFactory(buttonDriverFactory);

  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(React.createElement(
      ButtonLayout,
      null,
      React.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(React.createElement(
      ButtonLayout,
      { className: 'myClass' },
      React.createElement(
        'div',
        null,
        'abc'
      )
    ));

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

  it('should extend existing className of the element', function () {
    var driver = createDriver(React.createElement(
      ButtonLayout,
      null,
      React.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(React.createElement(
      ButtonLayout,
      null,
      React.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 React.createElement(
        'div',
        props,
        'abc'
      );
    };
    var driver = createDriver(React.createElement(
      ButtonLayout,
      null,
      React.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();
    });
  });
});