Создавайте динамические фикстуры для имитации ответов API с помощью объектов или функций JavaScript.

1. Введение

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

Cypress - фантастический инструмент для тестирования веб-приложений на основе javascript, и в этой статье я собираюсь поделиться опытом, который может помочь вам повысить вашу эффективность.

Если вы работаете с API, вы не можете выполнять все вызовы во время тестирования. Иногда вам нужно использовать моки, которые позволяют имитировать ответы, поступающие от API, и тестировать определенные сценарии, фактически не совершая вызова. Cypress имеет встроенное решение для этого: вы можете хранить эти фикстуры в папке фикстур или добавлять ответы непосредственно в функцию cy.route (), обычно в виде JSON. .

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

2. Использование объектов JavaScript в качестве динамических имитаторов.

Примером может быть то, что вы что-то ограничиваете по дате. В этом случае вы не можете использовать статический макет, вам нужно создать что-то динамически. К счастью, cypress позволяет вам это делать, используя объекты javascript в качестве ответов. Пример может выглядеть так:

Переменная sessionpage, которую мы объявляем в строке 5, заканчивая ее на строке 85, является объектом javascript, который мы добавим в функцию cy.route (). в строке 90 в качестве ответа. Здесь мы создаем 2 сеанса, первый с динамической датой начала / окончания (строка 12 - строка 13), используя сегодня (строка 4) в качестве ссылки для проверки на соответствие некоторые условные выражения в нашей кодовой базе, а второй - с фиксированной датой, где это не имеет значения. Это работает, но сильно загромождает наш тест.

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

Вместо использования локальной переменной sessionpage мы импортируем ее из нового файла, который мы создали (в строке 3), где экспортируем тот же объект по умолчанию и используем его в нашем cy.route () функция (в строке 10).

Это очищает наши тесты (37 строк вместо 117), делает их легко читаемыми и открывает еще больше возможностей в нашем фиктивном объекте.

3. Использование функций JavaScript в качестве динамических имитаторов.

У меня были случаи, когда мне приходилось создавать 2 разных файла-макета только потому, что 1 или 2 атрибута были разными. Чтобы избежать этого, вы можете создавать функции javascript как динамический макет. Вы можете заменить статические атрибуты динамическими ссылками, добавить состояние по умолчанию и передать значения, которые вы хотите изменить. Выбранная мной структура похожа на редукторы / действия redux.

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

В файле sessionpage.js я добавляю объект по умолчанию по умолчанию и использую его в качестве ссылки в функции sessionpage () в строке 22 и строка 61. Если я ничего не передам, будет использован объект по умолчанию. Однако, если я передам в функцию аргумент, который заменит добавленные мной значения по умолчанию. Это то, что я делаю в строке 10 в users_can_access_videocall_spec.js.

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