Мы часто изучаем что-то новое, сталкиваясь с какими-то трудностями. Решив одну проблему, мы переходим к следующей и проводим много времени в размышлениях, чтении и попытках осмыслить способы решения этих проблем. Однако минус такого подхода заключается в том, что иногда можно упустить некоторые базовые вещи. Эта статья посвящена одной базовой теме: деструктуризации в Cypress.
Иногда бывает сложно разобраться в деструктуризации, встречая её при чтении чужого кода. Если вы используете Cypress и до сих пор изучаете JavaScript, эта статья может быть полезна для вас.
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Допустим, у вас есть простой объект, подобный этому:
1 const car = {
2 color: 'red',
3 type: 'combi',
4 autopilot: false
5 }
6
7 const color = car.color
8
9 console.log(color) // 'red'
10
В своём коде вы можете захотеть использовать свойства этого объекта. Предположим, вы собираетесь часто использовать цвет red. Его можно присвоить отдельной переменной, как это показано в строке 7.
Теперь при каждом обращении к переменной color она будет возвращать red. Обратите внимание, что имя получившейся переменной совпадает с именем ключа объекта. Для того чтобы сделать то же самое, но с использованием деструктуризации, можно поступить следующим образом:
1 const car = {
2 color: 'red',
3 type: 'combi',
4 autopilot: false
5 }
6
7 const { color } = car
8
9 console.log(color) // 'red'
Результат будет абсолютно идентичен. Мы создали переменную с именем color, которая будет иметь значение red при обращении к ней.
Предположим, что мы хотим создать функцию, которая будет принимать один аргумент. Внутри этой функции у нас есть простой console.log, который выведет атрибуты color и type заданного объекта. Функция выглядит следующим образом:
1 const func = (param) => {
2 console.log(param.color, param.type)
3 }
4
5 func(car) // red combi
Мы передадим объект car в эту функцию. Результат можно увидеть в строке 5. Обратите внимание, как мы создаём param для нашей функции, который затем используется внутри тела функции. Теперь, когда мы знаем, как работает деструктуризация, мы можем использовать её и переписать функцию следующим образом:
1 const func = ({ color, type }) => {
2 console.log(color, type)
3 }
4
5 func(car) // red combi
Мы сделали то же самое, что и в первом примере, но на этот раз использовали деструктуризацию внутри параметра функции. Преимущество такого использования деструктуризации заключается в том, что мы можем избежать создания общего параметра типа param в нашей функции.
Самое распространённое применение деструктуризации в Cypress — это ситуация, когда мы передаём извлечённый объект в команду .then():
1 it('creates a todo', () => {
2
3 cy.intercept('POST', '/todos').as('createTodo')
4 cy.visit('/')
5 cy.addTodo('buy milk') // create a todo via UI using custom command
6 cy.wait('@createTodo').then( todos => {
7 expect(todos.response.statusCode).to.eq(201)
8 expect(todos.response.body).to.deep.eq({ title: 'buy milk' })
9 })
10
11 })
Обратите внимание, как был создан параметр todos, который соответствует параметрам из предыдущего примера. Его используют для создания утверждений внутри команды .then(). Вместо этого можно переписать этот код, используя деструктуризацию:
1 it('creates a todo', () => {
2
3 cy.intercept('POST', '/todos').as('createTodo')
4 cy.visit('/')
5 cy.addTodo('buy milk') // create a todo via UI using custom command
6 cy.wait('@createTodo').then( ({ response }) => {
7 expect(response?.statusCode).to.eq(201)
8 expect(response?.body).to.deep.eq({ title: 'buy milk' })
9 })
10
11 })
Это достаточно удобный способ, так как мы не используем лишних параметров в коде и можем чётко видеть, что тестируется внутри команды .then().
Перевод статьи «Using destructuring in Cypress».