rsuite/src/RadioGroup/test/RadioGroupSpec.js

A suite of react components

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import { getDOMNode, getInstance } from '@test/testUtils';

import RadioGroup from '../RadioGroup';
import Radio from '../../Radio';

describe('RadioGroup', () => {
  it('Should render a radio group', () => {
    const instance = getDOMNode(
      <RadioGroup>
        <Radio>Test1</Radio>
        <Radio>Test2</Radio>
      </RadioGroup>
    );
    assert.equal(instance.querySelectorAll('.rs-radio').length, 2);
  });

  it('Should have a name in input', () => {
    const name = 'Test';
    const instance = getDOMNode(
      <RadioGroup name={name}>
        <Radio>Test1</Radio>
        <Radio>Test2</Radio>
      </RadioGroup>
    );
    assert.equal(instance.querySelectorAll('input[name="Test"]').length, 2);
  });

  it('Should have `radio-inline` className in radio', () => {
    const instance = getDOMNode(
      <RadioGroup inline>
        <Radio>Test1</Radio>
        <Radio>Test2</Radio>
      </RadioGroup>
    );

    assert.ok(instance.className.match(/\brs-radio-group-inline\b/));
    assert.equal(instance.querySelectorAll('.rs-radio-inline').length, 2);
  });

  it('Should output a h1', () => {
    let instance = getDOMNode(
      <RadioGroup inline>
        <h1>Group</h1>
        <Radio>Test1</Radio>
      </RadioGroup>
    );
    assert.ok(instance.querySelectorAll('.h1'));
  });

  it('Should be checked when set value', () => {
    const instance = getDOMNode(
      <RadioGroup value={2}>
        <Radio value={1}>Test1</Radio>
        <Radio value={2}>Test2</Radio>
        <Radio value={3}>Test2</Radio>
        <Radio value={4}>Test2</Radio>
      </RadioGroup>
    );
    const radios = instance.querySelectorAll('.rs-radio');
    assert.ok(radios[1].className.match(/\bradio-checked\b/));
  });

  it('Should be checked when set defaultValue', () => {
    const instance = getDOMNode(
      <RadioGroup defaultValue={2}>
        <Radio value={1}>Test1</Radio>
        <Radio value={2}>Test2</Radio>
        <Radio value={3}>Test2</Radio>
        <Radio>Test2</Radio>
      </RadioGroup>
    );
    const radios = instance.querySelectorAll('.rs-radio');
    assert.ok(radios[1].className.match(/\bradio-checked\b/));
  });

  it('Should call onChange callback', done => {
    const instance = getDOMNode(
      <RadioGroup
        onChange={value => {
          if (value === 3) {
            done();
          }
        }}
      >
        <Radio value={1}>Test1</Radio>
        <Radio value={2}>Test2</Radio>
        <Radio value={3}>Test2</Radio>
        <Radio value={4}>Test2</Radio>
      </RadioGroup>
    );

    const radios = instance.querySelectorAll('.rs-radio');
    ReactTestUtils.Simulate.change(radios[2].querySelector('input'));
  });

  it('Should call onChange callback', done => {
    let count = 0;

    function onDone() {
      count++;
      if (count === 2) {
        done();
      }
    }

    const instance = getDOMNode(
      <RadioGroup onChange={onDone}>
        <Radio value={1}>Test1</Radio>
        <Radio value={2}>Test2</Radio>
        <Radio value={3} onChange={onDone}>
          Test2
        </Radio>
        <Radio value={4}>Test2</Radio>
      </RadioGroup>
    );

    const radios = instance.querySelectorAll('.rs-radio');
    ReactTestUtils.Simulate.change(radios[2].querySelector('input'));
  });

  it('Should call onChange callback and return correct parameters', done => {
    const instance = getDOMNode(
      <RadioGroup
        name="test"
        onChange={(value, event) => {
          if (value === 3 && event.target.name === 'test') {
            done();
          }
        }}
      >
        <Radio value={1}>Test1</Radio>
        <Radio value={2}>Test2</Radio>
        <Radio value={3}>Test2</Radio>
        <Radio value={4}>Test2</Radio>
      </RadioGroup>
    );

    const radios = instance.querySelectorAll('.rs-radio');
    ReactTestUtils.Simulate.change(radios[2].querySelector('input'));
  });

  it('Should have a custom className', () => {
    const instance = getDOMNode(<RadioGroup className="custom" />);
    assert.ok(instance.className.match(/\bcustom\b/));
  });

  it('Should have a custom style', () => {
    const fontSize = '12px';
    const instance = getDOMNode(<RadioGroup style={{ fontSize }} />);
    assert.equal(instance.style.fontSize, fontSize);
  });

  it('Should have a custom className prefix', () => {
    const instance = getDOMNode(<RadioGroup classPrefix="custom-prefix" />);
    assert.ok(instance.className.match(/\bcustom-prefix\b/));
  });

  it('Should apply appearance', () => {
    const instance = getInstance(<RadioGroup appearance="picker" />);

    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'rs-radio-group-picker');
  });
});