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

wix-style-react

import React from 'react';
import RadioGroup from './RadioGroup';
import radioGroupDriverFactory from './RadioGroup.driver';
import { radioGroupTestkitFactory } from '../../testkit';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { radioGroupTestkitFactory as enzymeRadioGroupTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
import { createRendererWithDriver, cleanup } from '../../test/utils/unit';

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

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

  afterEach(function () {
    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 React.createElement(
        RadioGroup,
        props,
        React.createElement(
          RadioGroup.Radio,
          { value: 1 },
          'Option 1'
        ),
        React.createElement(
          RadioGroup.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(RadioGroup.defaultProps.lineHeight);
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      expect(isTestkitExists(React.createElement(RadioGroup, null), radioGroupTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect(isEnzymeTestkitExists(React.createElement(RadioGroup, null), enzymeRadioGroupTestkitFactory, mount)).toBe(true);
    });
  });
});