Cypress command composition

todo_spec.ts

export const createTodo = (name: string) => {
  cy.get('.new-todo').type(`${name}{enter}`)

  return cy
    .get('.todo-list')
    .contains('li', name.trim())
    .first()
}

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

  return cy.wrap($todo) // ensure we're always returning our wrapped subject
}

export const markAsDone = ($todo: JQuery) => {
  cy.wrap($todo).find('.toggle').check()

  return cy.wrap($todo)
}

export const getTodoName = ($todo: JQuery) => {
  return cy.wrap($todo.find('label').text())
}

export const deleteTodo = ($todo: JQuery) => {
  return cy
    .wrap($todo)
    .find('.destroy')
    .click({ force: true })
    .end() // maybe we'd want to return the todo id?
}


describe('TodoMVC - React', function () {

  beforeEach(function () {
    cy.visit('/')
  })

  context('Item', function () {

    it('should add new todo', () => {
      createTodo('Learn Cypress Command API')
        .then(getTodoName)
        .should('equal', 'Learn Cypress Command API')
    })

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

    it('should allow marking a todo as done', () => {
      createTodo('Learn Cypress Command API')
        .then(markAsDone)
        .should('have.class', 'completed')
    })

    it('should allow deleting of a todo', () => {
      createTodo('Learn Cypress Command API')
        .then(deleteTodo)

      cy.get('.todoapp')
        .should('not.contain', 'Learn Cypress Command API')
    })

    it('should allow chaining of all the helpers', () => {
      createTodo('Learn Cypress Command API')
        .then(updateTodo('Learn Cypress composition'))
        .then(markAsDone)
        .then(deleteTodo)

      cy.get('.todoapp')
        .should('not.contain', 'Learn Cypress composition')
    })
  })
})