В этом посте рассматривается написание тестов со шпионами в среде тестирования javascript, Jasmine, для приложения, использующего React и односторонний поток данных.

Знакомьтесь, Нед

Чтобы узнать о тестировании React с архитектурой flux, я создал очень маленькое приложение для письма под названием NedНе является ED itor.

Нед состоит из кнопки записи и области для отображения или ввода текста. Нажмите кнопку записи, и вы можете писать.

Нажмите кнопку записи еще раз, и Нед покажет вам, что вы написали.

Нед реализует архитектуру потока React с помощью курсоров. В частности, Нед использует библиотеку курсоров pui-cursor. Хотя есть и другие библиотеки для курсоров, мне нравится pui-cursor, потому что он маленький и простой.

Компоненты Неда

Чтобы дать некоторый контекст для тестов, которые я собираюсь описать, я публикую пару снимков экрана, показывающих задействованные компоненты.

Компонент страницы - это родительский компонент, который показывает различные части, задействованные в приложении для записи и записи. Если вы посмотрите на оператор return в методе рендеринга, вы увидите разметку html и jsx, которая соответствует тому, что вы видите на странице.

Компонент WriteText отображает текстовую область после нажатия кнопки записи.

Шпионы для тестирования

В тестах на Неда шпионов используются несколькими способами. Если вы посмотрите документацию для Jasmine, вы увидите, что шпионы предназначены для отключения функций и отслеживания а) вызовов этих функций и б) аргументов в этих функциях. Фактически, существуют две основные ситуации, которые определяют, как будет использоваться шпион: либо вы хотите провести некоторую проверку реализации функции, либо вы просто проверяете, что было вызвано что-то вроде аргумента. Во втором случае нас особо не заботит реализация внизу, просто что-то было вызвано.

Слежка за функциями с реализацией

В документации Jasmine есть хороший пример установки и использования слежки за функцией.

Нед имеет такой тип настройки шпиона, происходящий в тесте для компонента приложения.

Шпион устанавливается в строке 10 путем передачи компонента и метода, за которым я хочу следить. Обратите внимание, что это на самом деле не заглушка. Поскольку я использую .and.callThrough, будет вызываться функция рендеринга React, и мой шпион будет наблюдать, что вы можете увидеть в строке 20. Другой способ сказать это - что жасмин делегирует выполнение реализации. , как описано здесь, в их документации.

Обратите внимание, что весь шпионский материал настраивается в beforeEach, и мой it-блок состоит исключительно из моих ожиданий, что метод рендеринга в компоненте страницы был вызван.

Слежка за аргументами обратного вызова с помощью create spy

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

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

Шпион, созданный ниже в строке 11, является примером этого.

Обратите внимание, что шпион создается с помощью jasmine.createSpy () и передается в Cursor в качестве обратного вызова в строке 12. После этого вызывается метод рендеринга React, и в него передается компонент. Еще один шаг - и наша тестовая установка завершена.

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

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

Хотя это всего лишь два примера использования шпионов, вы можете сделать с ними гораздо больше. Шпионы - отличный способ повысить уровень вашей тестовой игры, что так важно, если вы начинаете разработку через тестирование. Фактически, Jasmine - не единственный фреймворк, в котором они есть. Вы также найдете шпионов в Sinon.js, который используется с фреймворком для тестирования Mocha.

Спасибо @rdy за корректуру и отзывы.