41b6993c-7807-4c45-8e22-c33878b1b17c.vuetest.spec.js

/* THIS FILE IS AUTO-GENERATED, EDITS WILL BE OVERWRITTEN */

import Vue from 'vue'
import expect from 'expect'
import { config, mount, createLocalVue } from '@vue/test-utils'
import Component from '../../examples/todomvc/components/App.vue'
import store from '../../examples/todomvc/store'

config.stubs.transition = false

const localVue = createLocalVue()

describe('../../examples/todomvc/components/App.vue', () => {
  it('will render header', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    await Vue.nextTick()
    expect(wrapper.find('h1').text().toMatch('todos')
  })

  it('will add a todo', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    wrapper.find('.new-todo').setValue('First')
    wrapper.find('.new-todo').trigger('keyup.enter')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list li').text().toMatch('First')
    await Vue.nextTick()
    expect(wrapper.find('.todo-count').text().toMatch('1 item left')
  })

  it('will remove a todo', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeTruthy()
    wrapper.find('.todo-list li .destroy').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeFalsy()
  })

  it('will add then complete a todo', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    wrapper.find('.new-todo').setValue('Another')
    wrapper.find('.new-todo').trigger('keyup.enter')
    await Vue.nextTick()
    wrapper.find('input.toggle').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo.completed').text().toMatch('Another')
  })

  it('will clicking `active` hides list', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeTruthy()
    wrapper.find('a[href="#/active"]').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeFalsy()
  })

  it('will clicking `completed` shows item we added + completed', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    wrapper.find('a[href="#/completed"]').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toEqual('Another')
  })

  it('will clear the list when `clear completed` is clicked', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toEqual('Another')
    wrapper.find('.clear-completed').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeFalsy()
  })

  it('will mark all items completed when `toggle all` clicked', async () => {
    const options = { localVue, sync: false }
    if (typeof store !== 'undefined') { options.store = store }
    const wrapper = mount(Component, options)
    wrapper.find('.new-todo').setValue('Another')
    wrapper.find('.new-todo').trigger('keyup.enter')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeTruthy()
    wrapper.find('.toggle-all').trigger('click')
    await Vue.nextTick()
    wrapper.find('a[href="#/active"]').trigger('click')
    await Vue.nextTick()
    expect(wrapper.find('.todo-list').text().toBeFalsy()
  })
})