В этой статье я буду смотреть на два способа, что j’sry трудно проверить. Сначала я покажу, как использовать макеты, чтобы искусственно изолировать ваш код от самого j»s. Тогда я приведу пример с кодом, который работает на кнопку и код, используемый для принятия AJAX запросов.
Быстрое введение в Шутки Mocks
Одна из вещей, которая является сложным о модульном тестировании является то, что не все код ы могут быть написаны, чтобы быть совершенно изолированы от глобальных систем, таких как DOM событий или WordPress крючки. Библиотеки mocking помогают вам искусственно удалять системы, которые не являются тем, что покрывает текущий тест. Например, 10up/WP-Mock может быть использован для замены API плагинов WordPress с помощью макетов тестирования.
Эта статья о тестировании j’s’s с Jest. Jest разработан Facebook и обычно используется для тестирования приложений React, но его можно использовать в других тестовых библиотеках. Одной из замечательных особенностей Jest является его насмешливые возможности. Самое простое использование макетов Jest — это подсчитать количество раз, когда вызывается функция. Если ваш тест является функцией, которая вызывает другую функцию, вам просто нужно знать, что функция называется.
Давайте рассмотрим тест для функции, которая принимает массив элементов, а затем применяет тот же обратный вызов к каждому из них. В этом фрагменте у меня есть updateItems — функция для тестирования — и updatePosts(), который использует эту функцию, чтобы пройти массив сообщений для updatePost(). Позже в этой статье, я смотрю на то, как проверить j’ery.ajax() звонки. На данный момент, я просто беспокоюсь о том, чтобы мои updateItems () отправляет обратный вызов:
Теперь давайте посмотрим на тест. Я даже не собираюсь давать ему макет должности на данный момент, просто массив с тремя элементами, а затем утверждать, мой обратный вызов был вызван три раза:
Ключевой строкой здесь является строка 4. На этой линии я создаю функцию под названием «обратный вызов» с помощью jest.fn(). В результате я могу сосчитать время, называемое с помощью callback.mocks.calls.length.
Это проверяет, что моя функция была названа нужное количество раз. Он не показывает мне, что он получил правильные данные. Для этого мы можем использовать calledWith утилита функции jest.fn():
Отдельные проблемы в первую очередь
Одним из самых больших препятствий для внедрения тестирования в устаревшей базе кода является то, что ваш код может быть нелегко проверить. Изолированное модульное тестирование может быть невозможным. Вы все еще можете написать тесты DOM с инфраструктурой автоматизации браузера, такой как Cypress.io или аналогичный. Вы также можете использовать что-то вроде дом-тестирования-библиотеки для тестирования DOM.
Но простые рефакторы могут изолировать вашу бизнес-логику от системы событий DOM. Вот пример, когда j’query используется для привязки к событию щелчка, а затем добавить или удалить классы на основе условия:
Вы можете визуализировать все или часть DOM, имитировать клик, а затем проверить, есть ли элементы DOM правильные классы. Это медленно и его тестирование много вещей, которые являются ответственностью j’s, а не ваш код.
Ваша бизнес-логика — это ваш бизнес, система связывания и диспетчеризации событий j’s Фрагмент кода, который я показал выше, делает много вещей, что является нарушением принципа единой ответственности. Давайте разобьем его на две функции. Одна функция принимает j’s’query в качестве зависимости, а затем выполняет бизнес-логику. Ответственность другой функции заключается в проводе изолированной логики, инкапсулированной в первой функции, к системе событий j’s.
Теперь давайте посмотрим, как проверить эту функцию с нашей бизнес-логики. Поскольку мы передаем j’query в качестве зависимости от функции, мы могли бы передать любую функцию там. Такие, как шутки макет. Потому что мы не собираемся быть тестирование последствий этих функций — добавление и удаление классов из правых элементов DOM — мы просто должны знать, что функции называются.
Основной макет я показал раньше не достаточно для этого теста. Я говорю это по двум причинам. Во-первых, он не имеет конструктора, так что вызов конструктора j’wery, который мы на самом деле не тестируем, вызовет ошибку. Во-вторых, мы должны быть в состоянии рассчитывать вызовы на отдельные методы.
Вот тест, который решает первую проблему, но не вторую:
Это пройдет с надлежащим конструктором. Но, все, что мы знаем, два метода этого объекта были названы. Какие именно? Мы не знаем, и что вопросы, как в нашем тесте мы должны убедиться, что removeClass называется, но добавитьКласс не является. Это бизнес-логика, которую мы тестируем.
Решение заключается в том, чтобы поместить эти методы в свои собственные переменные, мы можем проверить:
Теперь мы проверяем, что бизнес-логика приводит к вызову правильной функции. Мы не проверяем эффекты, только наша логика. Миссия достигнута.
Как насчет связывания событий?
Я совершенно не охватывает фактические привязки события. Меня не волнует.
Почему?
Во-первых, я действительно сомневаюсь, что у меня будет проблема там. Если есть, это большая проблема, которая будет всплыла на приемки испытаний и интеграционных тестов, построенных, которые работают в отношении реального веб-сайта и моделировать взаимодействия с пользователем не удастся трудно, если j’srery не работает должным образом, и что дает мне больше уверенности в моем событии привязки то любое событие макет я буду создавать для тестов. Если бизнес-логика проверена, я в порядке.
Тестирование J»ry AJAX с Jest
Тестирование всего, что связано с запросом HTTP, может быть сложным. Как избавиться от побочных эффектов в первую очередь важно. Нарушение бизнес-логики, помимо API j’ery.ajax() может позволить аналогичную стратегию тестирования. Рассмотрим это использование j’s’ry AJAX с тремя обратными вызовами:
Это довольно часто, я скопировал его из чего-то я написал некоторое время назад. Один из способов подумать о тестировании этого кода было бы оставить его как есть, но придумать способ издеваться над API. Это не имеет смысла для меня, если API покрывается своими собственными тестами и j’s’ry AJAX имеет свои собственные тесты. Вместо этого, думать о нем, как три функции:
Вот три функции, которые мы могли бы использовать. Изолировать их в функции означает, что они могут быть повторно использованы, что является большим. Кроме того, мы можем передать две глобальные зависимости — j’sry и Handlebars в функции. Эти типы функций не являются чистыми по замыслу. Термин «чистый» в этом контексте означает функцию без побочных эффектов. Эти функции модифицируют DOM с помощью глобальных AA, и это нормально, если мы сможем легко заменить глобальные AA-класса макетами Jest.
Вот тесты, которые просто проверяют, что правая функция в объекте макета называется. В одном месте — аргумент для функции ошибки — я обеспокоен тем, что правильное значение передается этому методу, так что я проверить с Jest’s expectToBeCalledWith. Другие функции я издеваюсь, я надеюсь, что они работают, до тех пор, как они называются. Вызов их в правильном порядке моя озабоченность, называя их с правильными данными моя озабоченность, что они делают это не моя забота.
Как насчет запроса API?
По большей части, я не забочусь по тем же причинам, я дал для события привязки. Конечные точки API получают свои собственные изолированные тесты. Кроме того, у меня есть приемочные тесты. Если бы я строил клиент API, то мне нужно было бы проверить его с макетом ответов. Для этого я бы использовал насмешливую библиотеку для запросов AJAX.
Я предпочитаю Fetch к j’ery.ajax() по нескольким причинам — он встроен в браузер и работает так же на сервере, и есть действительно полезные насмешливые библиотеки для него. Я написал немного о том, как написать модульные тесты для Fetch API здесь.
Mock On
В этой статье я много о Jest макеты. Если вы ищете, чтобы узнать больше о Jest макеты, я рекомендую этот пост. Моя цель с тестированием JavaScript заключается в использовании как можно меньше дополнительных слоев на вершине Jest, как мне нужно. Если я могу сделать тест только с Jest. Это может зайти слишком далеко, рефакторинг кода или писать слишком много макетов, которые затем необходимо изменить, чтобы соответствовать изменениям в коде, поэтому удалив точку с тестами в любом случае.
Это баланс, который трудно найти и очень отличается от написания тестов PHP, где изолированные модульные тесты и интеграционные тесты, охватывающие, как несколько классов связаны между собой, должны быть все, что необходимо для описания API базы данных или REST API или класса, который обрабатывает busi логика нетакс до тех пор, пока ни у кого из них нет проблем. Тестирование интерфейса — то, что мы покрываем в приложении, которое использует только JavaScript в браузере — сложнее. UI — это место, где все детали объединяются, поэтому изолированные модульные тесты могут быть легко ограничены вместо ускорения скорости кода.
Источник: torquemag.io
