Vuex-TodoMVC.vuetest

<!-- 
  This is a test suite for the official TodoMVC example in the Vuex repo:
  https://github.com/vuejs/vuex

  Place this file in /tests/declarative in the cloned repo.

  Then create a vuetest.setup.js file with this line: 
  import store from '../../examples/todomvc/store' 
-->

<tests for="../../examples/todomvc/components/App.vue">
  <test name="render header">
    <expect text-of="h1" to-match="todos" />
  </test>

  <test name="add a todo">
    <set selector=".new-todo" value="First" />
    <trigger selector=".new-todo" event="keyup.enter" />
    <expect text-of=".todo-list li" to-match="First" />
    <expect text-of=".todo-count" to-match="1 item left" />
  </test>

  <test name="remove a todo">
    <expect text-of=".todo-list" to-be-truthy />
    <trigger selector=".todo-list li .destroy" event="click" />
    <expect text-of=".todo-list" to-be-falsy />
  </test>

  <test name="add then complete a todo">
    <set selector=".new-todo" value="Another" />
    <trigger selector=".new-todo" event="keyup.enter" />
    <trigger selector="input.toggle" event="click" />
    <expect text-of=".todo.completed" to-match="Another" />
  </test>

  <test name="clicking `active` hides list">
    <expect text-of=".todo-list" to-be-truthy />
    <trigger selector='a[href="#/active"]' event="click" />
    <expect text-of=".todo-list" to-be-falsy />
  </test>

  <test name="clicking `completed` shows item we added + completed">
    <trigger selector='a[href="#/completed"]' event="click" />
    <expect text-of=".todo-list" to-equal="Another" />
  </test>

  <test name="clear the list when `clear completed` is clicked">
    <expect text-of=".todo-list" to-equal="Another" />
    <trigger selector=".clear-completed" event="click" />
    <expect text-of=".todo-list" to-be-falsy />
  </test>

  <test name="mark all items completed when `toggle all` clicked">
    <!-- Add a todo -->
    <set selector=".new-todo" value="Another" />
    <trigger selector=".new-todo" event="keyup.enter" />
    <expect text-of=".todo-list" to-be-truthy />
    
    <!-- Click the toggle all button -->
    <trigger selector=".toggle-all" event="click" />

    <!-- Confirm the active list is empty -->
    <trigger selector='a[href="#/active"]' event="click" />
    <expect text-of=".todo-list" to-be-falsy />
  </test>
</tests>