Как проверить с помощью компонента CallOut jest office-ui-fabric-реагировать? - PullRequest
Новая
       8

Как проверить с помощью компонента CallOut jest office-ui-fabric-реагировать?

0 голосов
/ 01 марта 2019

Я пытался протестировать компонент Callout в моем реактивном проекте.

Для упрощения ниже приведен компонент React render: 

    <div className="UserInfoDiv">
        <div ref={this.menuButtonElement}>
            <ActionButton id="toggleCallout"
                onClick={changeIsCallOutVisibleProptoTrue}
                text="Show Callout" />
        </div>
        <Callout
            className="calloutClass1"
            target={this.menuButtonElement.current}
            hidden={!this.props.isCalloutVisible}>
            <div id="callOutContainer">
                <span>Need to test items here.<span>
                <button className="clickForSomeAction">Simulate Click on this</button>
            </div>
        </Callout>
    </div>

В пользовательском интерфейсе это работает абсолютно нормально.Для тестирования в jest я попробовал следующее: 

    userMenu = mount(<UserInfoDivComponent {...props} />);
    UserInfoDiv.find("button#toggleCallout").simulate('click');
    expect(changeIsCallOutVisibleProptoTrue.mock.calls.length).toBe(1); 
    userMenu.setProps({isCalloutVisible: true });

    // Following only gives html(included UserInfoDiv,toggleCallout)  `without html from callout`:
    console.log(userMenu.html());

Мне нужна помощь, Как протестировать следующие сценарии?

  1. Выноска видна?
  2. Найти .clickForSomeAction кнопка внутри Callout.calloutClass1 и имитация щелчка

Есть аналогичный компонент (например, DropDown, Contextual Menu) из office-fabric-ui, который отображает HTML в документе, а не в текущем компоненте HTML.

1 Ответ

0 голосов
/ 07 марта 2019

Наконец, я выполнил тестирование Callout с использованием ReactTestUtils, как указано в примерах : 

    let component:any;
    const container = document.createElement('div');
    document.body.appendChild(container);
    let threwException = false;
    try {
        component = ReactTestUtils.renderIntoDocument(<UserInfoDivComponent {...itemProps} />);
    } catch (e) {
        threwException = true;
    } 
    expect(threwException).toEqual(false); 
    const UserInfoDiv= ReactTestUtils.findRenderedDOMComponentWithClass(component, "UserInfoDiv");


    const clickForSomeAction = ReactTestUtils.findRenderedDOMComponentWithClass(component, "clickForSomeAction");
    ReactTestUtils.Simulate.click(clickForSomeAction);

, оно работает, как и ожидалось, что несколько сбоев, поскольку мы не можем запросить ReactTestUtilsнепосредственно querySelectors.

Редактировать 1

мы можем запросить с помощью селекторов XML.

...