src/components/molecules/forms/radio-group/radio-group.test.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import { render, screen } from '../../../../../tests/utils';
import { Legend } from '../../../atoms';
import { RadioGroup } from './radio-group';
import { getOptions, initialChoice } from './radio-group.fixture';

const doNothing = () => {
  /* Do nothing. */
};

describe('RadioGroup', () => {
  it('renders a legend', () => {
    const legend = 'Options:';

    render(
      <RadioGroup
        legend={<Legend>{legend}</Legend>}
        name="possimus"
        onSwitch={doNothing}
        options={getOptions()}
        value={initialChoice}
      />
    );

    expect(
      screen.getByRole('radiogroup', { name: legend })
    ).toBeInTheDocument();
  });

  it('renders the correct number of radio', () => {
    const options = getOptions();

    render(
      <RadioGroup
        name="eaque"
        onSwitch={doNothing}
        options={options}
        value={initialChoice}
      />
    );

    expect(screen.getAllByRole('radio')).toHaveLength(options.length);
  });

  it('can render an inlined radio group', () => {
    const options = getOptions();

    render(
      <RadioGroup
        isInline
        name="architecto"
        onSwitch={doNothing}
        options={options}
        value={initialChoice}
      />
    );

    expect(screen.getByRole('radiogroup')).toHaveClass('group--inline');
  });
});