Всем привет. Сегодня я собираюсь поговорить об одной из функций Cypress.io, которая сделает ваш тест более качественным и менее нестабильным. Да, я говорю о Stub & Spy API. Stub & Spy помогает нам создать тестовый сценарий, который, как мы могли бы подумать, нельзя автоматизировать. Но с Cypress.io мы можем сделать это возможным.
Что такое Stub & Spy? Какая между ними разница?
Заглушка
Заглушка - это способ имитации поведения функций (или модулей) приложения, от которых зависят тесты. В основном используется для тестирования. Вместо вызова настоящей функции заглушка замените ее и вернет Стандартные ответы или какой-то предопределенный объект, который мы точно знаем, что будет возвращено. Он обычно используется в модульных тестах, но может использоваться и для сквозных тестов с Cypress.io.
Шпион
Spy в значительной степени похож на Stub, но не совсем то же самое. Spy не меняет поведение функций приложения, он оставляет их как есть, а фиксирует и записывает некоторую информацию о том, как они вызываются. Например, чтобы проверить, вызывается ли функция с правильными параметрами, чтобы подсчитать количество вызовов этой функции.
Заглушка и шпион на Cypress.io
Мы можем просто создать Stub и Spy на Cypress.io с помощью API cy.stub и cy.spy. В этой статье я покажу вам несколько примеров того, как использовать Stub и Spy в некоторых интересных случаях использования.
// to define stub cy.stub(object, 'functionName', 'stubFunction') // to define spy cy.spy(object, 'functionName', 'spyFunction')
Cypress заимствовал объект Stub и Spy из Sinon.js, что означает, что мы можем ссылаться на все случаи использования из официального документа Sinon.js. Вы можете найти более подробную информацию о документе Sinon Stub & Spy ниже.
Заглушка Sinon.js: https://sinonjs.org/releases/latest/stubs/
Шпион Sinon.js: https://sinonjs.org/releases/latest/spies/
Пример №1: Запретить переход по внешним URL-адресам
Обычно мы находили какое-то веб-приложение, которое пытается перемещаться за пределами приложения, например внешний Интернет, схема URL-адресов, например tel://, mailto://, или даже схема настраиваемых URL-адресов мобильного приложения, например fb://, myapp://
Я полагаю, что большинство из вас, возможно, видели какое-то приложение, которое пытается выйти наружу после нажатия кнопки. Довольно сложно создать тест для этого сценария, потому что Cypress не позволяет нам перемещаться за пределы приложения (что хорошо, потому что мы должны сосредоточиться на тестировании нашего приложения, а не на тестировании навигации в браузере, верно?) В этом случае мы должны используйте Stub API, чтобы сделать наш тест возможным.
Обычно Web Developer часто использует window.location.href для любой навигации вне приложения. location.href является свойством нативного объекта Window. К сожалению, мы не можем заглушить свойство объекта, поэтому мы должны обернуть его как функцию и назначить как пользовательскую функцию Window. Вот как мы можем заглушить свойство window.location.href.
Затем мы создаем тест для этого сценария, вызывая cy.window() для получения объекта Window, а затем заглушаем функцию setLocationHref с помощью нашей функции-заглушки.
Я заглушаю функцию setLocationHref функцией winSetLocationHrefStub. Затем я могу проверить, вызывается ли функция с правильным параметром или нет.
Пример # 2: Подсказка окна заглушки
Еще один пример для Stub API. Возможно, вы видели диалоговое окно window.prompt (), которое ждет, пока пользователь введет текст в диалоговое окно. Создать тест и для этого сценария тоже довольно сложно. Так что заглушка - это способ решить эту проблему.
Когда я начинаю писать тест, я просто создаю заглушку для window.prompt() и возвращаю свой шаблонный ответ обратно в приложение. Обратите внимание, что Cypress сбросит и восстановит вашу заглушку после автоматического запуска тестов. Так что наша заглушка будет работать изолированно, что неплохо :)
Вы можете присвоить объекту-заглушке любое имя, которое захотите, с помощью команды as. Вы можете вызвать команду cy.get(), чтобы сослаться на свою заглушку и сделать с ее помощью утверждение.
Пример # 3 Диалог подтверждения окна шпионажа
Последний пример этой статьи. Я собираюсь шпионить за функцией window.confirm(), чтобы проверить, вызывается ли она один раз, а также проверить сообщение о подтверждении.
В этом примере диалоговое окно подтверждения появляется после нажатия кнопки пользователем. Если пользователь щелкнет ok, отобразится сообщение “Yes, you’re hungry”. В противном случае сообщение будет “No, you’re full.”. Все просто, правда? Поэтому я создаю тест с объектом Spy, чтобы проверить, вызывается ли функция window.confirm() таким образом.
Вы можете использовать Sinon-Chai Assertion для любого шпионского объекта. Есть много утверждений, поддерживающих объект Spy, более подробно о которых вы можете узнать здесь. В этом случае я использую should(‘be.calledOnce’), чтобы проверить, сколько раз вызывается функция window.confirm().
В моем тестовом коде я привязываю событие window:confirm к анонимной функции, которая в результате возвращает true. Это означает тот же результат, что и пользователь, нажимающий кнопку ok в диалоговом окне подтверждения. Вот результат моего теста.
Это всего лишь 3 простых примера, с помощью которых вы можете применить Stub & Spy для выполнения ваших тестов Cypress.io. Есть много интересных вариантов использования, в которых вы можете использовать Stub & Spy, чтобы улучшить свой тест. Дополнительные примеры см. Здесь https://docs.cypress.io/guides/guides/stubs-spies-and-clocks.html
Вы можете найти весь мой пример кода в моем личном Github ниже.
Надеюсь, эта статья будет вам полезна. Удачного тестирования!
