Acceptance тесты

Acceptance тесты в Ember.js — это важный инструмент для проверки работы приложения с точки зрения конечного пользователя. Они предназначены для того, чтобы протестировать функциональность приложения в целом, включая взаимодействие с пользовательским интерфейсом и взаимодействие между компонентами. Эти тесты имитируют реальное поведение пользователя, проверяя, как приложение функционирует в реальной ситуации.

Что такое Acceptance тесты?

Acceptance тесты в Ember.js фокусируются на проверке, выполняется ли основной функционал приложения в соответствии с требованиями. В отличие от юнит-тестов, которые проверяют отдельные компоненты или модули, acceptance тесты проверяют сценарии использования, проверяя, как приложение работает в целом.

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

Основы работы с Acceptance тестами

Для написания и выполнения acceptance тестов в Ember.js используется библиотека QUnit, а также встроенные инструменты самого фреймворка, такие как Ember CLI и Ember Testing. Основной компонент для работы с acceptance тестами — это Ember.QUnit.

Структура acceptance теста

Основной синтаксис для написания acceptance тестов выглядит следующим образом:

import { visit, click, fillIn, currentURL } from '@ember/test-helpers';
import { module, test } from 'qunit';

module('Acceptance | Главная страница', function(hooks) {
  test('Проверка перехода на главную страницу', async function(assert) {
    await visit('/');

    assert.equal(currentURL(), '/', 'Пользователь находится на главной странице');
  });

  test('Форма регистрации отправляется правильно', async function(assert) {
    await visit('/register');
    await fillIn('.username', 'testuser');
    await fillIn('.password', 'testpassword');
    await click('.submit-button');

    assert.equal(currentURL(), '/dashboard', 'Пользователь переходит на страницу панели управления');
  });
});
  1. visit — этот метод используется для перехода на определённую страницу приложения.
  2. click — метод имитирует клик по элементу.
  3. fillIn — позволяет заполнять поля ввода.
  4. currentURL — возвращает текущий URL страницы, что полезно для проверки редиректов или переходов по страницам.

Использование хуков в тестах

Для написания комплексных acceptance тестов важно уметь использовать хуки жизненного цикла тестов. В Ember.js для этого используется метод module. Он предоставляет возможность организовать тесты и выполнить определённые действия перед или после выполнения теста.

Пример:

module('Acceptance | Пользовательская панель', function(hooks) {
  hooks.beforeEach(function() {
    // Выполнение действий перед каждым тестом, например, логин
    return authenticateSession({ username: 'testuser', password: 'testpassword' });
  });

  test('Пользователь видит свою панель после авторизации', async function(assert) {
    await visit('/dashboard');

    assert.equal(currentURL(), '/dashboard', 'Пользователь на панели управления');
  });
});

Хуки beforeEach и afterEach позволяют подготовить состояние перед выполнением теста или очистить его после завершения.

Асинхронные операции в acceptance тестах

Большинство операций в acceptance тестах асинхронны, поскольку они связаны с запросами к серверу, рендерами страницы и другими операциями. Для работы с такими задачами Ember.js использует async/await. Важно всегда использовать await для асинхронных вызовов, чтобы тесты выполнялись последовательно и проверка состояний происходила в нужный момент времени.

Пример асинхронного теста:

test('Проверка добавления товара в корзину', async function(assert) {
  await visit('/shop');
  await click('.add-to-cart-button');

  assert.equal($('.cart-items').length, 1, 'Товар добавлен в корзину');
});

Здесь действия пользователя, такие как переход на страницу и клик по кнопке, выполняются асинхронно, и использование await гарантирует, что все этапы теста будут выполнены корректно.

Проверка состояния UI

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

Пример теста, проверяющего видимость элемента:

test('Проверка видимости ошибки при неверных данных', async function(assert) {
  await visit('/register');
  await fillIn('.email', 'invalid-email');
  await click('.submit-button');

  assert.ok(find('.error-message').isVisible(), 'Сообщение об ошибке отображается');
});

Метод find позволяет искать элементы на странице, а isVisible проверяет их видимость.

Мокирование данных

Для корректного выполнения acceptance тестов важно работать с предсказуемыми данными. В Ember.js для этого используется библиотека pretender.js, которая позволяет мокировать API запросы. Это полезно, когда необходимо протестировать функциональность без необходимости взаимодействовать с реальным сервером.

Пример использования мокирования:

import { setupMirage } from 'ember-cli-mirage';

module('Acceptance | Заказы', function(hooks) {
  setupMirage(hooks);

  test('Отображение списка заказов', async function(assert) {
    // Создание фиктивных данных через Mirage
    server.createList('order', 3);

    await visit('/orders');

    assert.equal(findAll('.order-item').length, 3, 'Отображается 3 заказа');
  });
});

В данном примере используется setupMirage для создания фиктивных данных (заказов) на сервере. Это помогает избежать зависимости от реального API и тестировать поведение интерфейса.

Взаимодействие с компонентами и маршрутами

Acceptance тесты часто требуют проверки взаимодействия между компонентами и маршрутами. В Ember.js маршруты и компоненты тесно связаны, и их взаимодействие важно тестировать.

Пример теста для проверки перехода между маршрутами:

test('Проверка перехода на страницу пользователя', async function(assert) {
  await visit('/users');
  await click('.user-link');

  assert.equal(currentURL(), '/users/1', 'Пользователь переходит на страницу с id=1');
});

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

Использование утилит для работы с тестами

Ember.js предоставляет несколько утилит для упрощения написания тестов. Одной из самых полезных является @ember/test-helpers, которая включает в себя методы для работы с DOM, взаимодействия с элементами страницы, выполнения асинхронных операций и т.д. Также полезными являются методы для работы с состоянием приложения, например settled — метод, который позволяет дождаться завершения всех асинхронных операций.

Пример использования settled:

import { settled } from '@ember/test-helpers';

test('Проверка, что данные загружены', async function(assert) {
  await visit('/data');
  await settled();

  assert.ok(find('.data-item').length, 'Данные успешно загружены');
});

Метод settled позволяет убедиться, что все асинхронные операции завершены, прежде чем продолжить тестирование.

Итоги

Acceptance тесты в Ember.js играют ключевую роль в тестировании пользовательского интерфейса и функциональности приложения. Эти тесты помогают убедиться, что приложение работает так, как ожидается, с точки зрения пользователя, охватывая все важные взаимодействия и сценарии использования. Тщательная настройка и написание тестов позволяют повысить надёжность и стабильность приложения, снижая вероятность возникновения ошибок при работе с ним.

Оглавление