CODEWITHSUNDEEP
cypress
msmith1114
msmith1114

Reputation: 3229

Cypress multiple arrow function parameters?

So I'm just starting to learn Typescript with Cypress and I noticed this in a page I was reading about here: https://medium.com/@NicholasBoll/cypress-io-scaling-e2e-testing-with-custom-commands-6b72b902aab

export const updateTodo = (name: string) => ($todo: JQuery) => {
  cy.wrap($todo).within(() => {
    cy.get('label').dblclick()
    cy.get('.edit').clear().type(`${name}{enter}`)
  })

So I'm still new to typescript and I understand I think that the Jquery element is the subject parameter although I'm still a little bit unsure at what would represent a "Jquery" element/parameter in Cypress.

However what confused me is the fact that there are two fat arrow parameter sections... I've not seen that before? What exactly does that mean? Especially when further down it's called as such (With just a string):

it('should update a todo', () => {
      createTodo('Learn Cypress Command API')
        .then(updateTodo('Learn Cypress composition'))
        .then(getTodoName)
        .should('equal', 'Learn Cypress composition')
    })

Can anyone explain what's going on here?

Upvotes: 1

Views: 677

Answers (1)

Fody
Fody

Reputation: 31904

Two fat arrows just means the function is returning another function.

So

export const updateTodo = (name: string) => ($todo: JQuery) => {
  cy.wrap($todo).within(() => {
    cy.get('label').dblclick()
    cy.get('.edit').clear().type(`${name}{enter}`)
  })

is equivalent to

export const updateTodo = (name: string) => {              // outer function
  return ($todo: JQuery) => {                              // inner function
    cy.wrap($todo).within(() => {
      cy.get('label').dblclick()
      cy.get('.edit').clear().type(`${name}{enter}`)
    })

Where you use the double-fat-arrow function is another shorthand,

This

.then(updateTodo('Learn Cypress composition'))

is shorthand for this

.then((name: string) => updateTodo(name)('Learn Cypress composition'))

where the double brackets updateTodo()() calls the outer function then the inner function.

Or even longer syntax:

.then((name: string) => {
  const innerFn = updateTodo(name);
  return innerFn('Learn Cypress composition');
})

Upvotes: 2

Related Questions