В Wehkamp мы создаем интерфейс с помощью React и GraphQL, что представляет собой прекрасный стек для работы. Для нового проекта я взял на себя ответственность написать сквозные тесты в Cypress.io, еще один инструмент, с которым я люблю работать.
В этом проекте пользователь проходит через процесс, в котором для идентификации участвует третье лицо, которое выглядит следующим образом.
Поскольку мы не хотим тестировать эту часть (это работа третьей стороны, верно?), Нам нужно имитировать вызов из браузера в Cypress. Однако, поскольку мы используем GraphQL, мы не можем просто использовать команду cy.route
. Уловка для имитации GraphQL в Cypress заключается в создании заглушки для window.fetch
.
Сделать это можно так:
Принцип работы такой:
- Fetch API возвращает обещание, которое преобразуется в объект двумя методами (
json()
иtext()
) и свойством (ok
), которое указывает, был ли запрос успешным (возвращает HTTP 2xx / 3xx). Мы заглушаем это с помощьюresponseStub
. - Метод
isStub
используется для проверки того, был ли метод уже заглушен. Это пригодится в следующей функции :). getFetchStub
сначала проверяет, был ли ранее заглушенwindow.fetch
. Если это не так, оно заменяется наcy.stub
. Исходный метод выборки хранится в переменной, поэтому его можно вызывать, когда нет имитации реализации для вызова GraphQL. Затем, наконец, к заглушке добавляетсяcallsFake
обработчик.- Затем, наконец, добавляется пользовательская команда Cypress. Он принимает функцию, которая принимает
operationName
и возвращает объект с тестовой функцией и объектом результата. Фактическая команда только добавляет заглушку выборки, которая вызывает функциюfetchGraphQL
. - Макетная функция
fetchGraphQL
извлекает имя операции из тела и вызывает функциюgetOperationMock
. Это возвращает необязательный тестовый метод (чтобы проверить, соответствуют ли переменные, переданные в операцию GraphQL, ожидаемым вами) и mockResult.
Если фиктивные данные для операции не найдены, он вызывает исходный API выборки с теми же параметрами и возвращает результат.
Так как же на самом деле использовать это в тесте? Это довольно просто:
Вызовите пользовательскую команду в beforeEach
вашего теста Cypress и передайте ей функцию, которая возвращает объект для данного operationName
. Затем просто зайдите на свою страницу и проведите тесты в обычном режиме.
Спасибо, что нашли время прочитать эту историю! Вы можете подписаться на меня в Twitter @ronderksen и писать мне все, что угодно!
Также я работаю в Wehkamp, одной из крупнейших компаний в сфере электронной коммерции в Нидерландах. У нас есть Технический блог, зацените его и подпишитесь, если вы хотите читать больше подобных историй. Или посмотрите наши предложения о работе, если ищете отличную работу!