Рубрики
Без рубрики

Устройство против E2E тестирование для Vue.js

В чем разница между единицей и E2E для тестирования Vue Apps? Вам нужен один или другой, или оба? Эта статья предоставит полезное сравнение.

Автор оригинала: Anthony Gore.

Письменные тесты при разработке приложений Vue.js могут сэкономить вам много времени, которое было бы иначе потрачено исправлению ошибок. Чем больше и сложнее ваше приложение получает, трювер это становится.

Существует два типа тестов, которые обычно выполняются для веб-приложений: Агрегаты тесты и КОНЕКТ-конец (E2E) тесты.

Какая разница? Вам нужно обоим?

Давайте рассмотрим.

Агрегатные тесты

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

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

Например, если у нас была функция, которая добавила два номера под названием Добавить Мы могли бы написать тест подразделения, чтобы убедиться, что конкретная пара чисел, которые мы предоставлены в качестве аргументов, всегда будут возвращать вывод, которые мы ожидаем.

add.spec.js.

// Function we want to test
const add = (x, y) => x + y;

// Unit test
test("should add two numbers", () => {
  const result = add(2, 3);
  expect(result).toBe(5);
});

В любое время мы запускаем этот тест, и он не равен 5, мы можем заключить ошибку ввел наш код.

Компонентные тесты

В большинстве функций приложений Vue.js на самом деле не представляют атомную макияж приложения. Конечно, мы можем установить тестирование наших методов, но то, что мы также действительно заботимся о том, – это генерируется HTML.

По этой причине устройство в тесте приложения Vue.js является Компонент а не функция.

Как мы тестируем компоненты? Давайте возьмем этот как пример:

DisplayGreePlient.js.

export default {
  template: `
Hello, {{ name }}
`,
  props: ['name']
};

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

Используя библиотеку, такую как Vue Test Utils, мы можем установить Vue Component в памяти и создать объект «обертка». Затем мы можем запрашивать обертку, чтобы утверждать о представленном HTML.

DisplayGreeTing.spec.js.

import displayGreeting from "./displayGreeting.js";

test("displays message", () => {
  const name = "Michael";
  const wrapper = mount(displayGreeting, { propsData: { name } });
  expect(wrapper.text()).toBe(`Hello, ${name}`);
});

Тесты снимки

В приведенном выше примере мы использовали Wrapper.Text () Чтобы запросить текст на выходе компонента.

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

Может быть, было бы легче проверить весь HTML-вывод компонента?

Еще один вид компонентного теста – это Снимок Тест, где вы имеете именно это.

Как это работает, это то, что вы генерируете вывод компонента один раз и запишите его в текстовый файл. Например:

DisplayGreeTing.spec.js.snap.

exports[`renders correctly 1`] = `
Hello, Michael
`;

Теперь в любое время тесты выполняются, если отобранный вывод компонента отличается от того, что в файле, тест не пройден.

Снимки – это тупые прибор, но они хороши для тестирования компонентов, которые отображают много HTML.

E2E тесты

E2E (сквозное) тестирование – это тип функционального теста. В отличие от модульного теста, вы не нарушаете приложение на меньшие части, чтобы проверить его – вы тестируете все приложение.

E2E тесты взаимодействуют с вашим приложением, как и реальный пользователь. Например, вы можете написать тест E2E, который:

  1. Загружает ваш сайт
  2. Клики на ссылке «Зарегистрироваться»
  3. Предоставляет некоторые допустимые данные входы в регистрационной форме
  4. Нажмите кнопку «Регистрация».

Этот тест должен пройти, если токен аутентификации хранится в файла cookie, а приложение перенаправлено на страницу профиля.

Инструменты

Тесты E2E изготавливаются в верхней части драйвера автоматизации браузера, такими как Selenium, который обеспечивает API для привода браузера.

Такая структура тестирования E2E, как Cypress или Nightwatch, затем предоставит вам сценарий ваших тестов E2E для драйвера автоматизации браузера.

Следующий код – это то, что вы можете использовать в Nightwatch, чтобы выполнить тест, описанный в разделе выше. Вы, вероятно, можете сказать, что это делает, даже если вы никогда не использовали Nookwatch.

регистрация.spec.js.

"register user": browser => {

  // Navigate to register page
  browser.page.register()
    .navigate()
    .waitForElementPresent(form.selector, 5000);

  // Fill out the form
  register.section.form
    .setValue("@nameInput", "Anthony")
    .setValue("@emailInput", "anthony@test.com")
    .setValue("@passwordInput", "test1234")
    .click("@submitButton");

  // Make assertions
  browser
    .assert.urlEquals(profile.url)
    .getCookie(name, (result) => {
      this.assert.equals(result.name, 'auth');
    }
  });

}

Сравнение единиц и E2E

Единица плюсы:

  • Испытания бегают быстро
  • Тест точных и позволит вам определить точные проблемы

Единица минусы:

  • Потребляемая для записи тестов для каждого аспекта вашего приложения
  • Несмотря на модульные тесты, проходящие, все приложение может еще не работать

E2E Pros:

  • Может неявно проверить много вещей одновременно
  • E2E тесты гарантируют вас, что у вас есть рабочая система

E2E Минусы:

  • Медленно, чтобы запустить – часто займет 5 или 10 минут, чтобы запустить на один сайт
  • Хрупкие – несущественное изменение, как изменение класса, может снизить весь набор E2E
  • Испытания не могут точно определить причину сбоя

Вердикт

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

Например, E2E Test не скажет вам корневую причину ошибки, но тесты единиц, в то время как модульные тесты не скажут вам, если целое приложение работает или нет, в то время как E2E тесты будут.

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

Общая стратегия объединения единицы и тесты E2E для приложения Vue.js является это:

  • Написать модульные тесты для всех ваших компонентов, включая ошибки состояния. Запустите их, прежде чем сделать GIT.
  • Написать тесты E2E для ключевых случаев использования ваших сайтов E.g. Регистрация, Add to Cart и т. Д. Запустите их перед объединением для Master.

Если вы хотите больше деталей на правильном сочетании тестов, там много хороших постов в блоге, как классический Написать тесты. Не слишком много. В основном интеграция. Кент C. доддс.

Бонус: тестирование инструментов

Поэтому вы готовы начать тестирование, какой инструмент вы можете использовать?

Для тестирования подразделения Frontend лучший инструмент прямо сейчас Jest Отказ Например, он имеет много полезных функций, что позволяет вам компилировать TymerctScript и современные JS до прогона тестов.

Вы можете использовать шутку в сочетании с Vue Test Utils Что позволяет устанавливать и запросить компоненты Vue.

Для E2E, современный инструмент прямо сейчас Кипарис Отказ Еще один более базовый инструмент, который также работает хорошо, является Nightwatch Отказ

Хорошая новость заключается в том, что все эти инструменты легко добавлять все эти инструменты для Vue приложения с Vue CLI 3.

Наконец, это хорошая идея использовать постоянный интеграционный инструмент, такой как Трэвис или Круг CI Это запускает ваши тесты в облаке (особенно хорошо для тестов E2E с трудом времени) и разверните свой код условного на всех ваших тестах.

Счастливое тестирование!

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше

Читайте ещё по теме: