lucid-ui/lib/components/RadioButton/RadioButton.spec.js

A UI component library from AppNexus.

import _last from "lodash/last";
import _has from "lodash/has";
import _noop from "lodash/noop";
import _forEach from "lodash/forEach";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common, controls } from '../../util/generic-tests';
import RadioButton from './RadioButton';
describe('RadioButton', function () {
  common(RadioButton);
  controls(RadioButton, {
    callbackName: 'onSelect',
    controlSelector: '.lucid-RadioButton-native',
    eventType: 'click'
  });
  var booleanValues = [true, false];
  describe('props', function () {
    describe('isDisabled', function () {
      it('sets the `disabled` attribute of the native radio button element.', function () {
        _forEach(booleanValues, function (testValue) {
          var wrapper = shallow( /*#__PURE__*/React.createElement(RadioButton, {
            isDisabled: testValue
          }));
          assert.equal(wrapper.find('input[type="radio"]').prop('disabled'), testValue);
        });
      });
    });
    describe('isSelected', function () {
      it('sets the `checked` attribute of the native radio button element.', function () {
        _forEach(booleanValues, function (testValue) {
          var wrapper = shallow( /*#__PURE__*/React.createElement(RadioButton, {
            isSelected: testValue
          }));
          assert.equal(wrapper.find('input[type="radio"]').prop('checked'), testValue);
        });
      });
    });
    describe('pass throughs', function () {
      it('passes through all props not defined in `propTypes` to the native input.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(RadioButton, {
          className: "wut",
          isDisabled: true,
          isSelected: true,
          style: {
            fontWeight: 'bold'
          },
          onSelect: _noop,
          foo: 1,
          bar: 2,
          baz: 3,
          qux: 4,
          quux: 5
        }));
        var nativeProps = wrapper.find('input[type="radio"]').props(); // It should pass `foo`, `bar`, `baz`, `qux`, and `quux` through
        // to the native input.

        _forEach(['foo', 'bar', 'baz', 'qux', 'quux'], function (prop) {
          assert(_has(nativeProps, prop));
        });
      });
    });
  });
});
describe('RadioButton', function () {
  function simulateEvent(reactElement, selector, event) {
    mount(reactElement).find(selector).simulate(event);
  }

  function verifyArguments(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-glow', '-visualization-dot'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(RadioButton, {
        isSelected: false,
        onSelect: onSelect
      }), ".lucid-RadioButton".concat(classSubString), event);
      assert.equal(onSelect.args[0][0], true);
      assert(_last(onSelect.args[0]).event);
    });
  }

  function verifyNoOnSelect(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-glow', '-visualization-dot'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(RadioButton, {
        isSelected: true,
        onSelect: onSelect
      }), ".lucid-RadioButton".concat(classSubString), event);
      assert.equal(onSelect.calledOnce, false);
    });
  }

  function verifyOnSelect(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-glow', '-visualization-dot'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(RadioButton, {
        isSelected: false,
        onSelect: onSelect
      }), ".lucid-RadioButton".concat(classSubString), event);
      assert(onSelect.calledOnce);
    });
  }

  describe('user clicks on the rendered control', function () {
    it('calls the function passed in as the `onSelect` prop if `isSelected` is false...', function () {
      verifyOnSelect('click');
    });
    it('...and passes along true as the first argument and a React synthetic event as the second argument.', function () {
      verifyArguments('click');
    });
    it('does not call the function passed in as the `onSelect` prop if `isSelected` is true.', function () {
      verifyNoOnSelect('click');
    });
  });
});