Но для чего нужны тесты?

Представьте, что вы готовите шоколадный торт и только после того, как он готов, вы понимаете, что забыли добавить в тесто сахар, что теперь?! Подумайте о своем приложении как о тесте для торта: без тестирования оно может сначала работать даже хорошо, но в какой-то момент во время тестирования что-то может оказаться не таким, как ожидалось. А кто гарантирует, что этой беды не случится?!

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

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

Зачем мне тестировать?

Я привожу несколько причин, которые убедят вас начать внедрять тесты в свой код прямо сейчас:

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

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

Быстрее исправления: Благодаря автоматическим тестам вы сможете легче исправлять проблемы, экономя гораздо больше времени

Меньше сюрпризов во время развертывания: Можете ли вы представить, что вы только что выполнили развертывание и уже получили звонок от пользователей с ошибкой в ​​чем-то, что можно было предсказать?! Тесты помогают именно в этой профилактике

Помощь вам и вашему коллеге по тестированию: Знаете ли вы, когда вы закончите эту функцию и передадите ее QA для тестирования, и он вернет вам отчет с 357 ошибками, которые нужно исправить? Эта проблема также уменьшится, поскольку вы предскажете большинство ошибок, с которыми он, вероятно, столкнется

Каковы типы тестов?

Существует множество типов тестов, которые необходимо разработать во внешнем интерфейсе, но сегодня я сосредоточусь на трех из них: тесты пользовательского интерфейса (UI), функциональные тесты (сквозные) и проверочные тесты, а также тесты для Проиллюстрировав каждый из них, я создам тесты для простого экрана входа в приложение React.js, используя библиотеку тестирования.

Тестирование пользовательского интерфейса (UI)

Тесты пользовательского интерфейса (UI) проверяют, отображаются ли компоненты должным образом, и, помимо того, что они основаны на рендеринге, они проверяют наличие важных элементов, таких как поля формы, кнопки и метки.

it('should render login form', () => {
  render();
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

Что тестируется: Этот тест гарантирует, что компонент LoginForm отображает основные элементы интерфейса: поля электронной почты и пароля, а также кнопку входа в систему. screen.getByLabelText ищет элементы по связанным с ними меткам, а screen.getByRole ищет кнопку по ее тексту и функции.

Функциональные тесты (сквозные)

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

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: '[email protected]' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: '[email protected]',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

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

Проверочные тесты

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

test('should show error messages for invalid inputs', async () => {
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

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

Вы понимаете, почему вам нужно тестировать?

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

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

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

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