Как проверить переход состояния условно отображаемых компонентов - PullRequest
Новая
       8

Как проверить переход состояния условно отображаемых компонентов

0 голосов
/ 16 марта 2020

У меня есть панель подтверждения удаления, которая по умолчанию отключается при загрузке компонента и отображается только при нажатии кнопки удаления 

{this.state.deleteConfirmation && (
    <div id="confirmation">
        <Checkbox
            inputId="deleteBlogConfirmation"
            checked={this.state.confirmation}
            onChange={this.toggleConfirmation}
        ></Checkbox>
        <label
            htmlFor="deleteBlogConfirmation"
            className="p-checkbox-label"
        >
            Are You Sure?
        </label>
        <Button
            label="Yes"
            icon="pi pi-check"
            disabled={!this.state.confirmation}
            onClick={this.props.onDeleteConfirm}
            className="p-button-danger"
        />
        <Button
            label="No"
            icon="pi pi-times"
            onClick={this.hideDeleteConfirmation}
            className="p-button-secondary"
        />
    </div>
)}

значение истинно при загрузке компонента 

this.state = {
    confirmation: false,
    deleteConfirmation: false
};

метод hideDeleteConformation скрывает эту панель, если пользователь нажимает «Нет» при подтверждении 

hideDeleteConfirmation() {
    this.setState({ deleteConfirmation: false });
}

Тест не пройден, когда я утверждаю deleteConfirmation как ложное с ошибкой // , Received: undefined

it("hides delete confirmation panel on clicking no button", () => {
    const mockDialogFn = jest.fn();
    const actionButtons = mount(
        <Router>
            <BlogActionButtons
                rowData={rowData}
                onDeleteConfirm={mockDialogFn}
            />
        </Router>
    );
    actionButtons.find(".p-button-danger").at(0).simulate('click');
    expect(actionButtons.props().deleteConfirmation).toBeTruthy(); // , Received: undefined at this line
    actionButtons.find('.p-button-secondary').at(0).simulate('click');
    expect(actionButtons.props().deleteConfirmation).toBeFalsy();
});

Если я переключаюсь на 

expect(actionButtons.state().deleteConfirmation).toBeTruthy();

, я получаю ошибку TypeError: Cannot read property 'deleteConfirmation' of null для той же строки.

Как проверить, что deleteConfirmation снова изменяется на true / false при нажатии соответствующих кнопок.

1 Ответ

1 голос
/ 16 марта 2020

.props() получает значения по имени, а не по вызываемой функции. Это то, что вы ищете: 

expect(actionButtons.prop('onClick')).toBeTruthy()

РЕДАКТИРОВАТЬ: Для того, чтобы проверить, сначала нажмите, а затем подтвердите, действительно ли элементы html существуют в DOM. Лично я предлагаю find по компонентам, в отличие от присвоенных идентификаторов 

const cancelButton = actionButtons.find(Button).at(1) // might not be correct depending on the rest of your component
cancelButton.prop('onClick')()
const confirmationDomElement = actionButtons.find('#confirmation')
expect(confirmationDomElement.exists()).toEqual(false)
...