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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _RadioGroup = require('./RadioGroup');

var _RadioGroup2 = _interopRequireDefault(_RadioGroup);

var _RadioGroup3 = require('./RadioGroup.driver');

var _RadioGroup4 = _interopRequireDefault(_RadioGroup3);

var _testkit = require('../../testkit');

var _testkitSanity = require('../../test/utils/testkit-sanity');

var _enzyme = require('../../testkit/enzyme');

var _enzyme2 = require('enzyme');

var _unit = require('../../test/utils/unit');

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

describe('RadioGroup', function () {
  var render = (0, _unit.createRendererWithDriver)(_RadioGroup4.default);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  var defaultRadioGroup = function defaultRadioGroup(props) {
    return _react2.default.createElement(
      _RadioGroup2.default,
      props,
      _react2.default.createElement(
        _RadioGroup2.default.Radio,
        { value: 1 },
        'Option 1'
      ),
      _react2.default.createElement(
        _RadioGroup2.default.Radio,
        { value: 2 },
        'Option 2'
      ),
      _react2.default.createElement(
        _RadioGroup2.default.Radio,
        { value: 3 },
        'Option 3'
      ),
      _react2.default.createElement(
        _RadioGroup2.default.Radio,
        { value: 4 },
        'Option 4'
      )
    );
  };

  afterEach(function () {
    (0, _unit.cleanup)();
  });

  it('should have the correct radio buttons', function () {
    var driver = createDriver(defaultRadioGroup());
    expect(driver.getNumberOfRadios()).toBe(4);
    expect(driver.getRadioValueAt(0)).toBe('1');
  });

  it('should return true if a radio button is disabled and false otherwise', function () {
    var disabledRadios = [1, 2];
    var driver = createDriver(defaultRadioGroup({ disabledRadios: disabledRadios }));
    expect(driver.isRadioDisabled(0)).toBe(true);
    expect(driver.isRadioDisabled(1)).toBe(true);
    expect(driver.isRadioDisabled(2)).toBe(false);
    expect(driver.isRadioDisabled(3)).toBe(false);
  });

  it('should check the option that matches the initial value', function () {
    var value = 2;
    var driver = createDriver(defaultRadioGroup({ value: value }));
    expect(driver.getSelectedValue()).toBe(value.toString());
  });

  it('should update selected value after change to props', function () {
    var _render = render(defaultRadioGroup({ value: 1 })),
        driver = _render.driver,
        rerender = _render.rerender;

    var value = 2;
    rerender(defaultRadioGroup({ value: 2 }));
    expect(driver.getSelectedValue()).toBe(value.toString());
  });

  it('should not check any options if value was not matched', function () {
    var value = 10;
    var driver = createDriver(defaultRadioGroup({ value: value }));
    expect(driver.getSelectedValue()).toBe(null);
  });

  describe('onChange attribute', function () {
    it('should be called with the correct option value', function () {
      var onChange = jest.fn();
      var driver = createDriver(defaultRadioGroup({ onChange: onChange }));
      driver.selectByValue(1);
      expect(onChange).toBeCalledWith(1);
    });

    it('should not be called upon checked option', function () {
      var value = 1;
      var onChange = jest.fn();
      var driver = createDriver(defaultRadioGroup({ onChange: onChange, value: value }));

      driver.selectByValue(1);
      expect(onChange.mock.calls).toHaveLength(0);
    });

    it('should not be called upon disabled option', function () {
      var disabledRadios = [1];
      var onChange = jest.fn();
      var driver = createDriver(defaultRadioGroup({ onChange: onChange, disabledRadios: disabledRadios }));

      driver.selectByValue(1);
      expect(onChange.mock.calls).toHaveLength(0);
    });
  });

  describe('vAlign attribute', function () {
    var radioGroup = function radioGroup(props) {
      return _react2.default.createElement(
        _RadioGroup2.default,
        props,
        _react2.default.createElement(
          _RadioGroup2.default.Radio,
          { value: 1 },
          'Option 1'
        ),
        _react2.default.createElement(
          _RadioGroup2.default.Radio,
          { value: 2 },
          'Option 2'
        )
      );
    };

    it('should have a default vcenter class', function () {
      var driver = createDriver(radioGroup());
      expect(driver.getClassOfLabelAt(0)).toContain('vcenter');
      expect(driver.getClassOfLabelAt(1)).toContain('vcenter');
    });

    it('should have a vtop class', function () {
      var driver = createDriver(radioGroup({ vAlign: 'top' }));
      expect(driver.getClassOfLabelAt(0)).toContain('vtop');
      expect(driver.getClassOfLabelAt(1)).toContain('vtop');
    });
  });

  describe('display attribute', function () {
    it('should be vertical by default', function () {
      var driver = createDriver(defaultRadioGroup());
      expect(driver.isVerticalDisplay()).toBe(true);
    });

    it('should be horizontal', function () {
      var driver = createDriver(defaultRadioGroup({ display: 'horizontal' }));
      expect(driver.isHorizontalDisplay()).toBe(true);
    });
  });

  describe('spacing attribute', function () {
    it('should be 12px by default', function () {
      var driver = createDriver(defaultRadioGroup());
      expect(driver.spacing()).toBe('12px');
    });

    it('should be spaced', function () {
      var driver = createDriver(defaultRadioGroup({ spacing: '30px' }));
      expect(driver.spacing()).toBe('30px');
    });
  });

  describe('line-height attribute', function () {
    it('should have default value', function () {
      var driver = createDriver(defaultRadioGroup());
      expect(driver.lineHeight()).toBe(_RadioGroup2.default.defaultProps.lineHeight);
    });
  });

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

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