ui-spec.cy.js

/// <reference types="cypress" />
import {
  resetDatabase,
  visit,
  getTodoApp,
  enterTodo,
  getTodoItems,
  getNewTodoInput,
  toggle,
  getTodo,
  getCompleted,
} from '../support/utils'

describe('app', () => {
  it('loads', () => {
    visit()
    getTodoApp().should('be.visible')
  })
})

describe('UI', () => {
  beforeEach(resetDatabase)
  beforeEach(() => visit())

  context('basic features', () => {
    it('loads application', () => {
      getTodoApp().should('be.visible')
    })

    it('starts with zero items', () => {
      cy.get('.todo-list')
      .find('li')
      .should('have.length', 0)
    })

    it('adds two items', () => {
      enterTodo('first item')
      enterTodo('second item')
      getTodoItems().should('have.length', 2)
    })

    it('enters text in the input', () => {
      const text = 'do something'

      getNewTodoInput().type(text)
      getNewTodoInput().should('have.value', text)
    })

    it('can add many items', () => {
      const N = 100

      for (let k = 0; k < N; k += 1) {
        enterTodo(`item ${k + 1}`)
      }
      getTodoItems().should('have.length', N)
    })
  })

  context('advanced', () => {
    it('adds two and deletes first', () => {
      enterTodo('first item')
      enterTodo('second item')

      getTodoItems()
      .contains('first item')
      .parent()
      .find('.destroy')
      .click({ force: true }) // because it only becomes visible on hover

      cy.contains('first item').should('not.exist')
      cy.contains('second item').should('exist')
      getTodoItems().should('have.length', 1)
    })

    it('marks completed items assertions', () => {
      // actions
      enterTodo('first item')
      enterTodo('second item')
      enterTodo('item 3')
      enterTodo('item 4')
      toggle('item 3')
      toggle('item 4')
      // assertions
      getTodoItems().should('have.length', 4)
      getCompleted().should('have.length', 2)
      getTodo('first item')
      .find('[type="checkbox"]')
      .should('not.be.checked')

      getTodo('second item')
      .find('[type="checkbox"]')
      .should('not.be.checked')

      getTodo('item 3')
      .find('[type="checkbox"]')
      .should('be.checked')

      getTodo('item 4')
      .find('[type="checkbox"]')
      .should('be.checked')
    })

    it('marks completed items', () => {
      // actions
      enterTodo('first item')
      enterTodo('second item')
      enterTodo('item 3')
      enterTodo('item 4')
      toggle('item 3')
      toggle('item 4')
      // make sure app has rendered the toggled buttons
      getCompleted().should('have.length', 2)
      // single snapshot of entire <ul class="todo-list"> element
      cy.get('ul.todo-list').snapshot({
        name: 'todo-list with 2 completed items',
      })
    })
  })
})