проверить, выбран ли только один переключатель в компоненте радиогруппы после fireEvent.click в реагирующей на тестирование библиотеке - PullRequest
Новая
       17

проверить, выбран ли только один переключатель в компоненте радиогруппы после fireEvent.click в реагирующей на тестирование библиотеке

0 голосов
/ 02 июля 2019

Я хочу проверить, что только 1 кнопка переключается после fireEvent.click на кнопку радио.

До сих пор я пытался получить все радиокнопки и искал код, чтобы проверить, как считать, если отмечена только радиокнопка.

it("should check if only 1 radiobutton was clicked", () => { 
    const handleChange = jest.fn();
    const { container } = render(
      <React.Fragment>
        <Radiobutton onClick={handleChange} isChecked label="Dummy Radio1" />
        <Radiobutton
          onClick={handleChange}
          isChecked={false}
          label="Dummy Radio2"
        />
        <Radiobutton
          onClick={handleChange}
          isChecked={false}
          label="Dummy Radio3"
        />
      </React.Fragment>
    );
    const dialogContainer = getAllByRole(container, "radio");
    dialogContainer[0].setAttribute("aria-checked", "true");
    dialogContainer.forEach(key => {
      // 
      // Code to check if only 1 radiobutton was clicked
      // 
    });
});

Мой radiobutton.js 

<div
      className="radiobutton"
      role="radio"
      onClick={onClick}
      onKeyDown={onKeyPress}
      aria-checked={isChecked}
      tabIndex={0}
      value={label}
    >
      <span className="radiobutton__label">{label}</span>
    </div>

1 Ответ

2 голосов
/ 02 июля 2019

Вы можете использовать fireEvent, а затем использовать .checked с фильтром следующим образом: 

it("should click on text", () => { 
    const handleChange = jest.fn();
    const { container } = render(<Radiogroup onClick={handleChange} />);
    const dialogContainer = getAllByRole(container, "radio");

    const checkedItemsBeforeClick = dialogContainer.filter(el=>el.checked)
    expect(checkedItems.length).toEqual(0)
    fireEvent.click(dialogContainer[0]);

    const checkedItemsAfterClick = dialogContainer.filter(el=>el.checked)
    expect(checkedItems.length).toEqual(1)
});

Обновление:

Поскольку вы не используете элементы input, вам нужно сделать что-то вроде этого: 

const RadioButtonGroup ()=>{
 const [selectedId, setSelectedId] = useState('select_1')
 const handleChange = (ev)=>{
     setSelectedId(ev.target.id)
 }
return (
<React.Fragment>
    <Radiobutton id="select_1 onClick={handleChange} isChecked={selectedId==="select_1"} label="Dummy Radio1" />
    <Radiobutton
      onClick={handleChange}
      isChecked={selectedId==="select_2"} 
      label="Dummy Radio2"
    />
    <Radiobutton
      onClick={handleChange}
      isChecked={false}
      label="Dummy Radio3"
      isChecked={selectedId==="select_2"} 
    />
  </React.Fragment>
)
};

И убедитесь, что вы передаете опору id в свой Radiobutton. Надеюсь, это поможет.

...