lucid-ui
Version:
A UI component library from AppNexus.
164 lines (161 loc) • 9.91 kB
JavaScript
import _last from "lodash/last";
import _includes from "lodash/includes";
import _forEach from "lodash/forEach";
import _keys from "lodash/keys";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { RadioGroupDumb as RadioGroup } from './RadioGroup';
import RadioButtonLabeled from '../RadioButtonLabeled/RadioButtonLabeled';
describe('RadioGroup', function () {
common(RadioGroup);
describe('props', function () {
describe('name', function () {
it('sets the `name` attribute of the child radio buttons.', function () {
var name = 'radio';
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
name: name
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.find(RadioButtonLabeled).forEach(function (node) {
assert.equal(node.props().name, name);
});
});
it('defaults to a string that is passed along to the children.', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var name = wrapper.first().prop('name');
wrapper.find(RadioButtonLabeled).forEach(function (node) {
assert.equal(node.props().name, name);
});
});
});
describe('isDisabled', function () {
it('should set `isDisabled` to true for all child radio buttons', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
isDisabled: true
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.find(RadioButtonLabeled).forEach(function (node) {
assert(node.props().isDisabled);
});
});
it('should set `isDisabled` to true for all child radio buttons even if the child radio buttons have isDisabled set as false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
isDisabled: true
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
isDisabled: false
}), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.find(RadioButtonLabeled).forEach(function (node) {
assert(node.props().isDisabled);
});
});
it('should allow specific radio buttons to be disabled', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
isDisabled: false
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
isDisabled: true
}), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var childNodes = wrapper.find(RadioButtonLabeled);
assert.equal(childNodes.at(1).props().isDisabled, true);
});
});
describe('selectedIndex', function () {
it('sets the `isSelected` prop of the child radio button at the matching index to true...', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
selectedIndex: 2
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var childNodes = wrapper.find(RadioButtonLabeled);
assert.equal(childNodes.at(0).props().isSelected, false);
assert.equal(childNodes.at(1).props().isSelected, false);
assert.equal(childNodes.at(2).props().isSelected, true);
});
it('...except when a child component already has an explicitly defined `isSelected` prop which takes precedence.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
selectedIndex: 2
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
isSelected: true
}), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
isSelected: true
}), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var childNodes = wrapper.find(RadioButtonLabeled);
assert.equal(childNodes.at(0).props().isSelected, false);
assert.equal(childNodes.at(1).props().isSelected, true);
assert.equal(childNodes.at(2).props().isSelected, false);
});
it('defaults to 0.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var childNodes = wrapper.find(RadioButtonLabeled);
assert.equal(childNodes.at(0).props().isSelected, true);
assert.equal(childNodes.at(1).props().isSelected, false);
assert.equal(childNodes.at(2).props().isSelected, false);
});
});
describe('pass throughs', function () {
it('passes through all props not defined in `propTypes` to the root element.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, {
foo: 1,
bar: 2,
baz: 3,
qux: 4,
quux: 5
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
var rootProps = _keys(wrapper.first().props()); // It should pass `foo`, `bar`, `baz`, `qux`, and `quux` through
// to the root element.
_forEach(['foo', 'bar', 'baz', 'qux', 'quux'], function (prop) {
assert(_includes(rootProps, prop));
});
});
});
});
describe('RadioGroup.Label', function () {
it('passes its children through as the `Label` prop for the corresponding `RadioButtonLabeled`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null, /*#__PURE__*/React.createElement(RadioGroup.Label, null, "foo")), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null, /*#__PURE__*/React.createElement(RadioGroup.Label, null, "bar")), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null, /*#__PURE__*/React.createElement(RadioGroup.Label, null, /*#__PURE__*/React.createElement("span", null, "baz"), /*#__PURE__*/React.createElement("span", null, "qux")))));
var labels = wrapper.find(RadioGroup.Label);
assert.equal(labels.at(0).children().text(), 'foo');
assert.equal(labels.at(1).children().text(), 'bar');
assert.equal(labels.at(2).children().at(0).text(), 'baz');
assert.equal(labels.at(2).children().at(1).text(), 'qux');
});
});
});
describe('RadioGroup', function () {
it('should handle multiple children', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null, /*#__PURE__*/React.createElement(RadioGroup.Label, null, /*#__PURE__*/React.createElement("span", {
id: "foo"
}, "foo"), /*#__PURE__*/React.createElement("span", {
id: "bar"
}, "bar")))));
assert.equal(wrapper.find('#foo').text(), 'foo');
assert.equal(wrapper.find('#bar').text(), 'bar');
});
describe('user selects one of the radio button children', function () {
it('calls the function passed in as the `onSelect` prop...', function () {
var onSelect = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(RadioGroup, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.childAt(0).childAt(1).childAt(0).childAt(0).simulate('click');
assert(onSelect.calledOnce);
});
it('...and passes along the index of that child as the first argument and a React synthetic event as the second argument.', function () {
var onSelect = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(RadioGroup, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.childAt(0).childAt(1).childAt(0).childAt(0).simulate('click');
assert.equal(onSelect.args[0][0], 1);
assert(_last(onSelect.args[0]).event);
});
it('calls the `onSelect` prop, if a function, of the child prior to calling its own.', function () {
var childOnSelect = sinon.spy();
var onSelect = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(RadioGroup, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
onSelect: childOnSelect
}), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, null)));
wrapper.childAt(0).childAt(1).childAt(0).childAt(0).simulate('click');
assert(childOnSelect.calledBefore(onSelect));
});
});
});