nackjicholson

export default function statelessRadio(React) {
  return function StatelessRadio({ baseId, defaultValue, titleText, inputs = [], onSelection = () => {}} = {}) {
    function handleSelectionChange(event) {
      onSelection(event.target.value);
    }

    return (
      <div id={baseId}>
        <p id={`${baseId}__title`}>{titleText}</p>
        {inputs.map((inputItem) => {

nackjicholson

// ...
import { spy } from 'sinon';
// ...

it('should take an onSelection callback prop', () => {
  // "Arrange"
  const props = {
    inputs: [{}],
    onSelection: spy()
  };

nackjicholson

return function StatelessRadio({ baseId, defaultValue, titleText, inputs = [] } = {}) {
  // ...
    {inputs.map((inputItem) => {
      const defaultChecked = (defaultValue === inputItem.value);
      return (
        <div>
          <input type="radio" name={baseId} value={inputItem.value} defaultChecked={defaultChecked} />
          <label>{inputItem.label}</label>
        </div>
      );

nackjicholson

it('should check a default input by using the defaultValue prop', () => {
  const props = {
    defaultValue: 'bravo.value',
    inputs: [
      { value: 'alpha.value', label: 'alpha.label' },
      { value: 'bravo.value', label: 'bravo.label' },
      { value: 'charlie.value', label: 'charlie.label' }
    ]
  };
  const component = createComponent(props);

nackjicholson

export default function statelessRadio(React) {
  return function StatelessRadio({ baseId, titleText, inputs = [] } = {}) {
    return (
      <div id={baseId}>
        <p id={`${baseId}__title`}>{titleText}</p>
        {inputs.map((inputItem) => {
          return (
            <div>
              <input name={baseId} value={inputItem.value} />
              <label>{inputItem.label}</label>

nackjicholson

export default function statelessRadio(React) {
  return function StatelessRadio(props) {
    return (
      <div id={props.baseId}>
        <p id={`${props.baseId}__title`}>{props.titleText}</p>
        {props.inputs.map((inputItem) => {
          return (
            <div>
              <input name={props.baseId} value={inputItem.value} />
              <label>{inputItem.label}</label>

nackjicholson

// ...

function createComponent(customProps = {}) {
  const props = Object.assign({ baseId: 'test-baseId' }, customProps);
  const StatelessRadio = statelessRadio(React);
  return <StatelessRadio {...props} />;
}

describe('statelessRadio', () => {
  // ...

nackjicholson

it('should render radio inputs and their labels from the inputs prop', () => {
    // Create props with an inputs collection.
    // I use consistent and ordered naming for data series i.e. "alpha", "bravo", "charlie", "delta", etc.
    // I find using a naming scheme like this in cases where order matters, helps clarify the test setup and assertions.
    const props = {
      baseId: 'test-baseId',
      inputs: [
        { value: 'alpha.value', label: 'alpha.label' },
        { value: 'bravo.value', label: 'bravo.label' },
        { value: 'charlie.value', label: 'charlie.label' }

nackjicholson

<input type="radio" name="bagel-choices" value="onion" />
<label>Onion</label>

<input type="radio" name="bagel-choices" value="everything" />
<label>Everything</label>

nackjicholson

const props = {
  baseId: 'bagel-choices'
  inputs: [
    { value: 'onion', label: 'Onion' },
    { value: 'everything', label: 'Everything' }
  ]
}