Объяснение того, как реализовано шутливое тестирование, и как это помогает в общей картине.
Сначала мы окунемся в разработку, основанную на тестировании, а затем погрузимся в инструмент, который мы собираемся использовать, а именно в шутку. Прежде всего, что такое разработка через тестирование?
Разработка через тестирование вводит столько модульных тестов, сколько производственный код, чтобы предотвратить меньше ошибок. Он следует принципу RGR или принципу красного, зеленого и рефрактора.
Итак, красный принцип - это писать тестовый код, а не думать о реализации производственного кода. Разработайте тестовый код общего назначения в том смысле, что, если производственный код необходимо изменить, тесты можно будет легко и эффективно изменить. Мы хотим, чтобы в идеале писать по одному модульному тесту за раз, а производственный код только для этого модуля проверить не весь возможный код.
Затем мы перейдем к зеленому принципу или шагу 2. Мы начнем писать весь наш производственный код для этого единичного модульного теста.
Мы напишем производственный код, где он просто позаботится о прохождении этого конкретного теста.
Затем в качестве последнего шага мы проведем рефакторинг кода.
Это удалит любой код, не соответствующий принципам d.r.y, если это возможно, и не нарушит наш код полностью.
Вот и все для объяснения разработки, основанной на тестировании, а теперь давайте приступим к ее реализации.
Сначала создайте приложение для реагирования и назовите его мой-калькулятор
npx create-react-app my-calculator OR create-react-app my-calculator
Затем создайте папку компонентов, в которой есть папка Calculator, а в этой папке есть Calculator.test.js, Calculator.js и файл Calculator.css. В приложении Create React по умолчанию включено тестирование jest, но его нельзя настроить, в этом случае вам понадобится веб-пакет.
cd src mkdir components cd components mkdir Calculator cd Calculator touch Calculator.js Calculator.test.js Calculator.css
Сначала удалите весь код в методе рендеринга, импортируйте компонент «Калькулятор» и добавьте его между тегами div.
Теперь давайте определимся с нашим списком дел.
Мы определим 5 элементов для нашего списка дел для руководства, этот элемент - это те случаи, которые мы собираемся протестировать, и писать производственный код для каждого элемента за раз.
- Особенность: сложите 5 и 10, чтобы получить 15
- Не 50
- Равно 15
- Равно 15 номеров таким же образом менялись местами.
Сомнения: вернет ли он желаемый результат?
2. Характеристика: вычтите 5 и 10, чтобы получить -5.
- Не 5
- Равно -5
- Не равно -5, как менялись числа.
Сомнения: выдает ли синтаксис или ссылочную ошибку, если результат меньше 5
3. Характеристика: умножьте 5 на 10, чтобы получить 50.
- Не 5
- Равно 50
- Равно 50 таким же образом менялись числами.
Сомнения: вернет ли он желаемый результат?
4. Функция: разделите 200 на 20, чтобы получить 10.
- Не -10
- Равно 10
- Не равно 10, если мы поменяли местами числа.
Сомнения: вернет ли он десятичную дробь? Нужен ли мне Math.floor?
5. Характеристика: чек - 80, 5 - четное число.
- Не странно
- Имеет остаток 0 при делении на 2.
- Не имеет остатка от 1 при делении на 2.
Сомнения: вернет ли он желаемый результат? Пройдут ли тесты, как предполагалось?
Теперь у нас есть настроенный список дел. Давайте начнем писать наш первый модульный тест в нашем файле Calculator.test.js. Сначала мы протестируем функцию, которая складывает 2 числа, поэтому мы объявим метод с именем add, который будет складывать ваши firstNum и secondNum вместе. Ваш метод конструктора Calc, который примет 2 аргумента: 5 и 10.
Затем мы назначим некоторые образцы данных экземпляру функции-конструктора, когда он займет 5 и 10, а другой с числами поменяется местами.
Мы напишем наш тест, чтобы проверить, не равно ли оно 50, используя isFalsey, и используя isTruthy, чтобы проверить, равно ли 15.
Теперь ваш тест должен пройти, и пора написать производственный код, чтобы он прошел. Теперь в нашем файле Calculator.js мы определим компонент класса, который будет иметь состояние, и метод добавления, который установит наше рабочее состояние на добавление. Также равный метод, который будет основан на операции из нашего состояния, которая вернет желаемый результат. Затем в нашем методе рендеринга мы визуализируем калькулятор со всеми необходимыми функциями. Мы просто передадим функцию добавления. Также скопируйте и вставьте это в файл Calculator.css.
Это сработало, и теперь, как мы можем отредактировать наш код. Что ж, это действительно зависит от того, нужно ли это вам на самом деле, но в нашем случае этого руководства нам не нужно, так как мы работаем с базовым кодом .. У нас есть функция добавления, которая устанавливает операцию состояние, чтобы добавить, следовательно, это означает, что мы можем изменить состояние num2, и как только мы щелкнем равно или инициируем метод равенства. Он поразит наше else, если мы получим желаемый результат на основе операции, которая затем складывает два числа, устанавливает состояние num1 в сторону результата.
Мы закончили наш первый тест!
Давайте начнем с нашей функции вычитания, которая будет принимать значения 5 и 10. Итак, мы объявим еще один экземпляр функции конструктора, который будет иметь значения 5 и 10. Также мы определим метод вычитания в нашей функции конструктора. Которая вычитает firstNumber и secondNumber.
Давайте напишем наш тест, мы проверим, не равен ли результат 5, используя isFalsey, и проверим, равен ли он -5, используя toEqual. Тогда он не должен быть равным, когда числа меняются местами.
Наши тесты должны пройти!
Теперь приступим к написанию производственного кода. Итак, сначала определите метод вычитания в вашем компоненте реакции, где if устанавливает состояние операции на вычитание. Затем добавьте else if в наш метод равенства, где он вычитает два числа из состояния и возвращает результат. Затем назначьте его кнопке с символом вычитания в прослушивателе событий onClick.
Теперь метод должен работать правильно, и в этом случае мы можем выполнить рефакторинг, уничтожив наши a и b из нашего состояния.
Великое второе испытание выполнено!
В следующем тесте мы определим метод умножения, который умножит два числа. Итак, мы назначаем переменную экземпляру метода конструктора с аргументами 5 и 10. Затем мы воспользуемся методом умножения этого экземпляра, что и будет предполагаемым результатом.
Приступим к написанию тестов.
Результат не должен быть 5 при использовании isFalsey и должен быть 50 при использовании toEqual. Когда числа меняются местами, должно быть 50 по-прежнему. Теперь тест должен пройти, теперь давайте приступим к написанию рабочего кода.
Определите метод умножения, который установит состояние операции на умножение и на его основе. Метод Equal умножит два числа из состояния и установит результат. Назначьте метод умножения прослушивателю событий onClick кнопки умножения.
Теперь метод должен работать правильно, и в нем можно провести рефакторинг, чтобы удалить наши a и b из нашего состояния.
Великое третье испытание выполнено!
Теперь приступим к нашему четвертому тесту. Мы определим наш метод разделения в нашей функции-конструкторе. Затем мы назначим экземпляр функции конструктора, затем передадим 200, 20. Затем мы воспользуемся методом разделения этого экземпляра, чтобы получить желаемый результат.
Приступим к написанию тестов.
Мы проверим, не равно ли оно -10, когда будем использовать метод разделения с помощью isFalsey. Затем мы проверим, равно ли оно 10, используя toEqual, и проверим таким же образом, когда число поменяется местами.
Отлично, наши тесты должны пройти, и теперь мы напишем производственный код. Мы определим функцию разделения в нашем компоненте реакции, а затем добавим else if к нашему методу равенства, чтобы вернуть желаемый результат. Затем назначьте нашему обработчику событий для нашей кнопки разделения.
Отлично, мы закончили четвертый тест!
Приступим к заключительному тесту. У нас будет функция getRemainder, которая получит остаток от числа. Это полезно при проверке четности или нечетности числа. Итак, мы определяем две функции в нашем примере по одной для каждого числа, чтобы получить остаток. Затем присвойте другую переменную, используемую для получения желаемого результата, и передайте 80 и 5.
Отлично, давайте приступим к написанию наших тестов.
Мы проверим, является ли 80 oddNumber, и это не должно быть, поэтому мы будем использовать isFalsey. Затем мы проверим, четное ли это число и должно ли оно быть правдой, используя isTruthy. Затем проверьте, не равен ли результат 1, используя toEql. Затем проделайте те же тесты для 5, за исключением того, что он должен быть равен 1.
Отлично, давайте приступим к написанию нашего производственного кода. У нас будет функция getRemainder, которая установит операцию остатка, которая добавит else if к вашему методу равенства, чтобы вернуть желаемый результат (остаток от двух чисел). Затем назначьте функцию two кнопке getRemainder обработчику события onClick.
Теперь давайте попробуем провести рефакторинг, уничтожив a и b.
Отлично, все наши тесты выполнены !!
Отлично, мы прошли все наши тесты по принципу RGR. Это очень простой пример разработки через тестирование. Если вам нужна помощь, вот мои facebook, instagram и linkedin, просто пишите с любыми вопросами.
Вот мой гитхаб для справки:
Удачного кодирования!
