Окончательное руководство по тестированию вашего интерфейса с помощью современных инструментов

Руководство по автоматическому тестированию React с библиотекой React Testing Library, Cypress & Cucumber

Мотивация

Фронтенд — это клиентская часть вашего приложения.
Все, что видно вашим пользователям, является частью внешнего интерфейса.
Другими словами, тестирование внешнего интерфейса связано с тестированием графического пользовательского интерфейса (GUI).
Так вы получите более полную картину. , если вы разрабатываете платформу для онлайн-покупок, тестировщики внешнего интерфейса проверяют, соответствует ли внешний вид веб-сайта требованиям. Кроме того, они следят за тем, чтобы все работало правильно и чувствовалось так, как задумал дизайнер пользовательского опыта.
Так почему же это так важно?
Ну… поскольку наши конечные пользователи судят о книге по обложке и не имеют ни малейшего представления о внутренней стороне вещей, они замечают только те проблемы, которые видят. Следовательно, проблемы в пользовательском интерфейсе сразу бросаются в глаза. Таким образом, компания, которая хочет добиться успеха, должна обеспечить отличный и последовательный пользовательский опыт. Это означает, что приложение должно работать быстро и без ошибок, независимо от того, какое устройство или браузер используется.

Добро пожаловать в интерфейс тестирования!
Внешнее тестирование заключается в выполнении тестов на нескольких устройствах и в разных браузерах, чтобы убедиться, что приложение не содержит ошибок и обеспечивает удобство работы пользователей.

Автоматизация

Возможно, вы уже знакомы с тестированием вручную. Например, вы внедрили поле ввода в форму. После этого вы открываете веб-страницу, щелкаете в поле ввода, чтобы проверить, работает ли она, и отправляете форму. Это был ручной тест. Выполнение этого теста для всего, что вы реализуете снова и снова, утомительно и не масштабируется. В какой-то момент у вас уже не будет времени что-либо реализовывать, и вы потратите целый день на тестирование. Здесь на помощь приходит автоматизация. Используя автоматизированные концепции, мы можем быть уверены, что функции будут продолжать работать должным образом.
Автоматические тесты также помогают, особенно в так называемых пограничных случаях. Случаи использования, о которых мы склонны забывать, например, поставить галочку в каком-то процессе регистрации.

Веские причины автоматизировать тестирование

Обновляйте свой код с уверенностью!
Хорошие тесты позволяют вам проводить рефакторинг кода с уверенностью, что вы не нарушаете какие-либо функции и не меняете тесты.
Документация включена БЕСПЛАТНО!
Тесты пригодятся, потому что они объясняют, как ваш код работает с ожидаемым поведением. Тесты, в отличие от письменной документации, должны всегда обновляться.
Ошибки исчезли навсегда — почти!
Написав тестовые примеры для каждой ошибки, вы можете быть уверены, что они никогда не вернутся. Дальнейшее написание тестов улучшит ваше понимание кода и требований. Используя тестирование, вы можете найти проблемы, которые иначе могли бы пропустить.

Что мы тестируем?

ЮНИТ-ТЕСТЫ
Они ориентированы на наименьшую сущность ваших внешних приложений.
Обычно это компоненты в контексте React, но охватывающие интерфейсы, классы и методы. Эти простые и небольшие тесты проверяют, соответствует ли результат небольшой детали ожидаемому. Проверки предопределены и полностью изолированы.

ИНТЕГРАЦИОННЫЕ ТЕСТЫ
Как следует из названия, в тестах такого типа объединяются несколько компонентов кода и проверяется их взаимодействие. В React они обычно состоят из представлений, объединяющих несколько компонентов.

UI / КОНЕЧНЫЕ ИСПЫТАНИЯ
Эти тесты — святой Грааль, поскольку они тестируют приложение так же, как это сделал бы реальный пользователь. Они проверяют всю систему в целом.

Модульные и интеграционные тесты

Прежде чем мы начнем: «Хорошие тесты детерминированы, они никогда не зависят от среды».

Это означает, что тест не должен быть ненадежным — иногда он проходит, а иногда нет. Вот некоторые возможные причины:
другой часовой пояс, другая файловая система, состояние (которое не очищается перед каждым тестом), зависимость от порядка тестов, тайм-ауты для тестирования асинхронного поведения.

Технологии, которые мы используем:

//error-boundary.spec.ts
import "@testing-library/jest-dom";
import ErrorBoundary from "./error-boundary";
import React from "react";
import { render } from "app/test/test-utils";
beforeEach(() => {
  console.error = jest.fn();
});
describe("Error boundary", () => {
  it("listens to and handles errors", () => {
    const Child = () => {
      throw new Error();
    };
    const { getByText, unmount } = render(
      <ErrorBoundary>
        <Child />
      </ErrorBoundary>
    );
    const errorMessage = getByText("Error");
    expect(errorMessage).toBeDefined();
    unmount();
  });
});

Затем мы можем запустить наши модульные или интеграционные тесты с помощью jest runner:

npm run jest --config jest.config.js

Интеграция и пользовательский интерфейс / Сквозные тесты

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

Cypress – это бесплатный инструмент для автоматизированного тестирования с открытым исходным кодом, разработанный для современных веб-приложений на основе современных платформ, таких как React. Он предоставляет пользовательский интерфейс, чтобы указать, какие тесты и команды выполняются, пройдены и не пройдены.

Но почему огурец? Я не голоден!

Существует несколько инструментов для Behavior Driven Development Framework, но наиболее часто используемым инструментом BDD является Cucumber. BDD — это вариант разработки через тестирование (TDD). В качестве основы для тестов используются удобочитаемые описания требований к программному обеспечению.
Такой подход помогает нам писать тесты в понятной лексике для всех участников проекта. По этой причине даже человек без опыта разработки может получить представление о проведенных тестах.

Для Cypress мы можем писать наши тесты только на Javascript/TypeScript. Однако, если мы хотим использовать огурец, мы конвертируем тест Java Script в огурец (язык для огурца).
Огурец состоит в основном из четыре основных ключевых слова: Дано, Когда, И и «Затем. . Используя ключевые слова, мы можем использовать код JavaScript, который уже использовался.

Пример кипариса

describe("Form Test", () => {
  it("Can fill out a form", () => {
    cy.visit("/");
    cy.get("form");
cy.get('input[name="name"]').type("David").should("have.value", "David");
cy.get('input[name="email"]')
      .type("[email protected]")
      .should("have.value", "[email protected]");
cy.get("textarea")
      .type("This is a test")
      .should("have.value", "This is a test");
cy.get("form").submit();
  });
});

Учитывая, что когда вы используете кипарис и огурец, тогда вы качаетесь!

//integration/formular/formular.ts
import {
  Before,
  Given,
  Then,
  When,
  And,
} from "cypress-cucumber-preprocessor/steps";
Given("we are on the form page", () => {
  cy.visit("/");
  cy.get("form");
});
When("we have entered the name {String}", (name) => {
  cy.get('input[name="name"]').type(name).should("have.value", name);
});
And("we have entered the email {String}", (email) => {
  cy.get('input[name="email"]').type(email).should("have.value", email);
});
And("we left the comment{String}", (comment) => {
  cy.get("textarea").type(comment).should("have.value", comment);
});
And("we have submit the form", () => {
  cy.get("form").submit();
});
Then("we are on the start page", () => {
  cy.url().should("include", "start");
});

Feature Test File — Да, просто и красиво, не так ли?

//integration/form.feature
Functionality: Testing the form input
Scenario: F-01 Fill out the form and submit it
 Given we are on the form page
 When we have entered the name "David"
 And we have entered the email "[email protected]"
 And we left the comment "This is a test"
 And we have submit the form
 Then we are on the start page

Теперь идет Бонус на вершине. Мало того, что вы получаете потрясающий интерфейс для работы — этот плохой мальчик может делать Скриншоты и, следовательно, Визуальное регрессионное тестирование!

Краткое содержание

В этой статье я попытался подчеркнуть важность тестирования вашего внешнего интерфейса (GUI). Нам нужны инструменты, которые помогут нам убедиться, что наши продукты обеспечивают отличный и последовательный пользовательский интерфейс.
Такие инструменты гарантируют, что приложение не содержит ошибок и будет удобным для пользователей. Познакомив вас с библиотекой тестирования React и Cypress с Cucumber, я попытался показать вам эти потрясающие тестовые фреймворки и их преимущества:

Простота установки и настройки
Быстро, запуская тесты во время разработки и прямо в вашем приложении
Иметь мощный отладчик реального времени
Легко писать, потому что TypeScript - YAY!
Полезный и простой API
Супер подробная документация
Очень активное сообщество и регулярные обновления

Я надеюсь, что эта статья смогла дать вам небольшое представление о теме UI/UX-тестов и пробудить любопытство к этим инструментам.

Окончательное руководство по тестированию вашего интерфейса с помощью современных инструментов