Мы часто изучаем что-то новое, сталкиваясь с какими-то трудностями. Решив одну проблему, мы переходим к следующей и проводим много времени в размышлениях, чтении и попытках осмыслить способы решения этих проблем. Однако минус такого подхода заключается в том, что иногда можно упустить некоторые базовые вещи. Эта статья посвящена одной базовой теме: деструктуризации в 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».