Быстрое поступление к разработке на основе тестирования с помощью Jest

bystroe postuplenie k razrabotke na osnove testirovaniya s pomoshhyu jest

Николас Митчелл

Эта статья является простым пошаговым руководством по применению принципов разработки, управляемой тестированием (TDD) к упражнению JavaScript с помощью Jest.

Введение

После нескольких лет опыта разработки собственных проектов, я недавно решил стать Full-Stack разработчиком.

Эта новая ситуация побудила меня начать думать о методах, которыми я до сих пор пренебрегал, таких как тестирование моего кода.

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

Упражнение

Я решил начать с первого палача Osherove TDD. Вы можете получить доступ к полному упражнению здесь.

Цель состоит в том, чтобы предоставить функцию, принимающую строчную запись ("1, 2, 3" например) и возвращает сумму всех чисел.

Наш проект будет иметь следующую структуру:

js-kata-jest/
├─ src/
  └─ kata.js
├─ test/
  └─ kata.test.js
└─ package.json

Настройка тестовой среды

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

Установление зависимости Jest dev

yarn add --dev jest

или с помощью npm:

npm install --save-dev jest

Активация Jest в редакторе кода

Я использую Atom в качестве редактора кода и установил пакет tester-jest. Это позволило мне запускать мои испытания для сохранения для любого *.test.js файл.

Разработка, ориентированная на тестирование

Теория TDD достаточно проста и состоит из трех шагов:

  1. Написание теста для небольшой части функциональности и проверка того, что новый тест не завершается (красный шаг)
  2. Написание кода, с помощью которого проходит тест, а затем проверка успешности предыдущего и нового теста (зеленый шаг)
  3. Рефакторинг кода, чтобы убедиться, что он четкий, понятный и хорошо работает с предыдущими функциями

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

Решение упражнения

Первая петля

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

  1. Написание тестов
  • Первый тест проверяет, что пустая строка возвращает 0
  • Второй проверяет, что строка одного элемента возвращает предоставленный элемент

2. Написание кода

  • Сначала мы возвращаем 0 по умолчанию
  • Тогда мы предоставляем if оператор, обрабатывающий синтаксический анализ отдельного предоставленного элемента

Вот окончательный код:

3. Рефакторинг кода

Поскольку это наша первая функциональность, мы можем пока пропустить этот шаг, но вскоре вернемся к нему. 😉

Вторая петля

Теперь мы рассмотрим случай, когда строка содержит несколько элементов:

  1. Написание тестов

Новый тест проверяет, что вычисление многоэлементной строки выполнено правильно:

2. Написание кода

  • Сначала создаем новый if заявление намеренно, чтобы убедиться, что наши первые два теста влияют на новое решение
  • Во-вторых, мы создаем новый массив из строки ввода, используя , как разделитель
  • Наконец, мы анализируем каждый элемент только что созданного массива, чтобы вычислить сумму

Вот окончательный код:

3. Рефакторинг кода

Как мы видим выше, в нашем коде есть несколько проблем:

  • два оператора if не должны декорелировать, поскольку добавление одного или нескольких к нулю должно вести себя одинаково.
  • значение разделителя утоплено в коде. Это добавляет сложности, если мы хотим изменить на a ; разделитель, например.
  • значительная часть нашего кода расположена в if заявление. Мы могли бы изменить логику, чтобы извлечь из нее наш основной код.

Мы можем добавить новый separator переменной, определяющей тип разделителя. Мы также можем объединить оба if утверждение в одно, а затем верните логику.

Теперь мы можем снова запустить наш тест, прежде чем перейти к следующему циклу.

Третья петля

Теперь мы можем обрабатывать объявления новых разделителей и избегать ввода отрицательных чисел.

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

2. Написание кода

  • Сначала заменяем separator строка а separators массив, куда мы добавляем \n значение.
  • Во-вторых, мы вводим новый поиск разделителя посредством регулярного выражения. Это будет добавлено в предыдущий массив.
  • Теперь мы можем объединить предыдущие элементы массива для разделения с ними строки.
  • Мы фильтруем полученный массив для удаления всех нечисловых элементов.
  • Добавляем новый массив, negativesчто обнаружит отрицательные значения в записи.
  • Если negatives массив не пуст, выдает ошибку.

Вот окончательный код:

3. Рефакторинг кода

Теперь у нас есть две новые возможные оптимизации:

  • Мы используем регулярное выражение дважды и готовы легко его изменить. Мы можем вытащить его в новый const regexp.
  • Рассчитываем parseInt(list[i])несколько раз, поэтому мы должны сохранять значение только один раз, чтобы ускорить for петля.

Вывод

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

Теперь вы тоже можете продолжать самостоятельно. Ознакомьтесь с окончательной версией палача со всеми прохождениями тестов здесь.

Не стесняйтесь связаться со мной в Twitter, если у вас есть вопросы или комментарии @nclsmitchell или через Medium 🙂

Спасибо за то, что читаете, и, пожалуйста, хлопайте за меня, если вам нравится этот пост.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *