Cypress helpers with logging

todo_log.ts

export const createTodo = (todoDescription: string) => {
  // we use `any` here until this PR is accepted: https://github.com/cypress-io/cypress/pull/1289
  const log: any = Cypress.log({
    name: 'createTodo', // This should be pretty short. It shows up as all caps
    message: todoDescription, // Outputs to the right of the "name". This can be longer and will wrap
    consoleProps() { // Additional debug info. For example, cy.visit will show cookies and redirects
      return {
        'Inserted Todo': todoDescription,
      }
    }
  })

  // { log: false } will tell commands not to show up in the console
  cy.get('.new-todo', { log: false }).type(`${todoDescription}{enter}`, { log: false })

  return cy
    .get('.todo-list li', { log: false })
    .contains('li', todoDescription.trim(), { log: false })
    .then(($el) => {
      // we didn't know $el until now. `.set` allows us to update later.
      // `.snapshot()` tells Cypress to create a DOM snapshot for debugging
      // `.end()` tells Cypress this command has completed. When a command starts and stops determines the loading indicator that shows for every command as Cypress runs
      log.set({ $el }).snapshot().end()
    })
}