Component states и props

Component states и props играют важную роль в автоматизированном тестировании пользовательских интерфейсов, особенно когда речь идет о взаимодействии с веб-компонентами, которые изменяются в зависимости от состояния или переданных данных. Эти концепции помогают управлять состоянием UI-элементов и проверять их поведение в различных сценариях. В WebdriverIO поддержка работы с компонентами позволяет гибко организовывать тестирование динамичных элементов, таких как кнопки, формы или динамически обновляющиеся блоки.

Работа с состоянием компонента (state)

Состояние компонента — это его внутренние данные, которые определяют его внешний вид или поведение. В контексте автоматизированного тестирования состояние компонента важно для проверки правильности реакции на изменения состояния, например, когда кнопка становится активной после ввода данных или когда элемент скрывается в зависимости от пользовательского действия.

WebdriverIO позволяет работать с состоянием компонентов с помощью стандартных API браузера и нативных методов, таких как getText(), getValue(), isEnabled() или isDisplayed().

Пример работы с состоянием компонента:

it('Проверка состояния кнопки', () => {
    const button = $('#submitButton');
    
    // Проверка, что кнопка изначально не активна
    expect(button.isEnabled()).toBe(false);
    
    // Ввод текста в форму
    $('#inputField').setValue('Некоторые данные');
    
    // Проверка, что кнопка становится активной
    expect(button.isEnabled()).toBe(true);
});

Здесь важно понимать, что состояние компонента может зависеть от множества факторов, таких как введенные данные, состояние других элементов или действия пользователя.

Управление props (свойствами) компонента

Props (свойства) компонента — это внешние параметры, которые передаются в компонент и могут изменять его отображение или функциональность. В контексте тестирования это может быть проверка того, что компонент корректно реагирует на изменения значений, передаваемых через props.

Тестирование props включает в себя проверку того, что компоненты корректно обновляют свое состояние и внешний вид в зависимости от переданных данных. В WebdriverIO можно использовать методы, такие как getAttribute(), чтобы проверять значения атрибутов, которые могут быть использованы как свойства компонента.

Пример проверки props:

it('Проверка изменения свойств компонента', () => {
    const component = $('#alertBox');
    
    // Проверка начального свойства компонента
    let color = component.getAttribute('data-color');
    expect(color).toBe('red');
    
    // Изменение свойства компонента через UI
    $('#changeColorButton').click();
    
    // Проверка, что свойство компонента обновилось
    color = component.getAttribute('data-color');
    expect(color).toBe('green');
});

В этом примере проверяется, что изменение свойства компонента (через изменение атрибута data-color) влияет на его внешний вид или функциональность. Тест автоматически реагирует на изменение, выполняя проверку актуальных значений props.

Работа с динамическими состояниями и props в тестах

В реальных приложениях UI-элементы часто обновляют свое состояние в зависимости от пользовательских действий или асинхронных событий. WebdriverIO имеет встроенные функции для работы с асинхронностью, что позволяет тестировать компоненты, которые реагируют на события, такие как нажатие кнопок, загрузка данных или анимации.

Использование waitFor* методов помогает проверять, что компонент в нужный момент времени имеет правильные свойства или состояние:

it('Ожидание обновления компонента', () => {
    const button = $('#loadDataButton');
    
    // Нажимаем кнопку, чтобы инициировать загрузку данных
    button.click();
    
    // Ожидаем, пока данные загрузятся и компонент обновит свой props
    const message = $('#message');
    message.waitForDisplayed({ timeout: 5000 });
    
    // Проверка содержимого обновленного компонента
    expect(message.getText()).toBe('Данные загружены');
});

В этом примере используется метод waitForDisplayed(), который ожидает появления элемента после того, как данные были успешно загружены и отображены на странице. Это гарантирует, что тест не будет завершен до тех пор, пока компонент не отреагирует на изменение своего состояния или props.

Взаимодействие с компонентами с динамическим состоянием

При тестировании динамических UI-элементов важно учитывать, что свойства и состояния могут меняться в реальном времени в ответ на действия пользователя. С помощью WebdriverIO можно моделировать пользовательские действия, такие как клики, ввод данных или прокрутка страницы, и проверять, как компоненты меняются в ответ на эти действия.

Пример теста для динамического состояния:

it('Тест динамического изменения UI-элементов', () => {
    const toggleButton = $('#toggleVisibilityButton');
    const hiddenElement = $('#hiddenElement');
    
    // Проверка, что элемент скрыт
    expect(hiddenElement.isDisplayed()).toBe(false);
    
    // Клик по кнопке для изменения состояния элемента
    toggleButton.click();
    
    // Ожидание изменения состояния элемента
    hiddenElement.waitForDisplayed({ timeout: 3000 });
    
    // Проверка, что элемент теперь отображается
    expect(hiddenElement.isDisplayed()).toBe(true);
});

Этот тест демонстрирует, как можно проверять, изменяется ли состояние компонента после того, как пользователь выполняет действие (например, кликает по кнопке). Для работы с асинхронными изменениями, такими как показ или скрытие элементов, важно использовать методы ожидания, чтобы убедиться, что тест не завершается до завершения всех асинхронных операций.

Комбинированные проверки состояния и props

На практике часто бывает необходимо проверять как состояние компонента, так и его свойства одновременно, чтобы гарантировать, что взаимодействие с компонентом корректно влияет на его внешний вид и поведение. В таких случаях можно комбинировать методы проверки состояния и props.

Пример комбинированного теста:

it('Проверка состояния и свойств компонента', () => {
    const button = $('#submitButton');
    const form = $('#form');
    
    // Проверка начального состояния кнопки
    expect(button.isEnabled()).toBe(false);
    
    // Ввод данных в форму, что должно изменить состояние кнопки
    form.setValue('Данные для отправки');
    
    // Проверка, что кнопка теперь активна
    expect(button.isEnabled()).toBe(true);
    
    // Проверка свойства компонента, связанного с состоянием формы
    const buttonColor = button.getAttribute('style');
    expect(buttonColor).toContain('background-color: green');
});

В данном примере тестируется как изменение состояния кнопки (включение/выключение) в ответ на действия пользователя, так и изменение визуальных свойств (например, цвета кнопки) в зависимости от переданных данных.

Заключение

Работа с состоянием и свойствами компонентов в WebdriverIO — это важная часть тестирования интерфейсов, которая позволяет проверять, как UI-элементы взаимодействуют с пользователем, изменяют свое состояние или внешний вид в ответ на действия. Использование методов ожидания и асинхронных проверок помогает гарантировать корректность тестов при работе с динамическими компонентами.