office-ui-fabric - 无法在 Jest/Enzyme 测试中使用 Office UI Fabric Dropdown 触发 'onChanged' 委托(delegate)

Question

我需要对在 office-ui-fabric 下拉列表中提供给“onChanged”事件的回调进行单元测试(使用 spyOn 和 expect(callback).toHaveBeenCalled())。问题是我不知道如何触发这个事件？我试图查看 DOM，但没有可以触发的 html 选择标记。我还尝试更改所选项目的状态(在下拉组件上)但是 Jest 告诉我我只能更改根元素的状态时出现错误(我尝试使用 shallow、mount 和 dive into 下拉组件).有没有一种简单的方法可以做到这一点？

我将 Jest 与 Enzyme 一起使用，此代码:

const div = document.createElement('div');
ReactDOM.render(<Dropdown
            label='My label'
            placeHolder='My placeholder'
            options={[
                { key: 'A', text: 'Option a' },
                { key: 'B', text: 'Option b' },
            ]}
            onChanged={() => { return; }} />, div);
const dropdownContainer = div.querySelector('.ms-Dropdown') as HTMLElement;
ReactTestUtils.Simulate.click(dropdownContainer);

它输出这个 html:

<div class="ms-Dropdown-container">
    <label class="ms-Label ms-Dropdown-label root-37" id="Dropdown0-label" for="Dropdown0">My label</label>
    <div data-is-focusable="true" id="Dropdown0" tabindex="0" aria-expanded="true" role="listbox" aria-autocomplete="none" aria-live="off" aria-describedby="Dropdown0-option" class="ms-Dropdown root_f16b4a0d is-open" aria-owns="Dropdown0-list">
        <span id="Dropdown0-option" class="ms-Dropdown-title title_f16b4a0d ms-Dropdown-titleIsPlaceHolder titleIsPlaceHolder_f16b4a0d" aria-atomic="true" role="listbox" aria-readonly="true">
            <span>My placeholder</span>
        </span>
        <span class="ms-Dropdown-caretDownWrapper caretDownWrapper_f16b4a0d">
            <i data-icon-name="ChevronDown" class="ms-Dropdown-caretDown caretDown_f16b4a0d root-39" role="presentation" aria-hidden="true"></i>
        </span>
    </div>
    <span class="ms-Layer"/>
</div>

没有“.ms-Dropdown-item”

Answer 1

您应该能够使用 ID 为 ms-Dropdown 的 querySelector，然后使用 ReactTestUtils.Simulate.click。在现有的 Dropdown 单元测试中有这样的例子:

it('issues the onChanged callback when the selected item is different', () => {
  const container = document.createElement('div');
  let dropdownRoot: HTMLElement | undefined;

  document.body.appendChild(container);

  const onChangedSpy = jasmine.createSpy('onChanged');

  try {
    ReactDOM.render(
      <Dropdown label="testgroup" defaultSelectedKey="1" onChanged={onChangedSpy} options={DEFAULT_OPTIONS} />,
      container
    );
    dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;

    ReactTestUtils.Simulate.click(dropdownRoot);

    const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
    ReactTestUtils.Simulate.click(secondItemElement);
  } finally {
    expect(onChangedSpy).toHaveBeenCalledWith(DEFAULT_OPTIONS[2], 2);
  }
});

单元测试源文件: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx