随着我们的组件准备好，我们可以写第一个断言。在这个例子中，我们使用了'expect'风格，由Chai断言库提供，以及'should'和'assert'。 安装组件后放置以下代码：
// assert that component text contains items from the list expect(ListComponent.$el.textContent).to.contain('play games');
如上所述，我们可以使用ListComponent.$el获取组件的HTML，并且使用ListComponent.$el.textContent只访问内部HTML（即文本）。断言是检查文本是否包含在组件数据中设置的列表项之一。
为了检查一切都能正常工作，我们可以运行测试！使用vue-cli项目，我们可以简单地输入npm run unit，这是一个别名 cross-env BABEL_ENV = test karma start test/unit/karma.conf.js --single-run。
npm run unit
如果所有的测试都已经通过，它将显示绿色，并显示成功测试和代码覆盖率报告的列表，让您知道在测试期间执行的应用程序代码的百分比。
模拟用户输入
这是一个很好的开始，但是很少有应用程序只会显示数据。我们要添加的下一个功能是让用户能够在其列表中添加新项目。为此，我们需要一个输入框，用户可以在其中键入新项目，并在按钮上添加项目到列表中。这是List.vue的更新版本：
<template> <div> <h1>My To Do List</h1> </br> <input v-model="newItem" > <button @click="addItemToList">Add</button> <!-- displays list --> <ul> <li v-for="item in listItems">{{ item }}</li> </ul> </div> </template> <script> export default { name: 'test', data () { return { listItems: ['buy food', 'play games', 'sleep'], newItem: '' } }, methods: { addItemToList() { this.listItems.push(this.newItem); this.newItem = ''; } } } </script>
使用v-model，输入框的值绑定到存储在组件数据中的newItem变量。当单击按钮时，将执行addItemToList函数，将newItem添加到列表数组中，并清除newItem，以便可以将更多的内容添加到列表中。
要开始测试此功能，请在List.spec.js中创建一个新的空测试，并添加测试代码：
it('adds a new item to list on click', () => { // our test goes here })
首先我们要构建我们的组件，并模拟一个用户在输入框中输入的内容。由于VueJS将输入框的值绑定到newItem变量，所以我们可以简单地将我们的值设置为newItem。
// build component const Constructor = Vue.extend(List); const ListComponent = new Constructor().$mount(); // set value of new item ListComponent.newItem = 'brush my teeth';
接下来我们需要点击按钮。我们必须在HTML中找到这个按钮，它可以使用$el。只有这一次，我们才可以使用querySelector来查找实际的元素。可以使用它的类（.buttonClass），其id（#buttonId）或元素的名称（button）来找到一个元素。
// find button const button = ListComponent.$el.querySelector('button');
为了模拟一个点击，我们需要将按钮传递给一个新的事件对象。在测试环境中，List组件不会监听任何事件，因此我们需要手动运行监视器。
// simulate click event const clickEvent = new window.Event('click'); button.dispatchEvent(clickEvent); ListComponent._watcher.run();
最后，我们需要检查newItem是否显示，我们已经知道如何从第一个测试中完成！我们可能还想检查newItem是否存储在列表数组中。
//assert list contains new item expect(ListComponent.$el.textContent).to.contain('brush my teeth'); expect(ListComponent.listItems).to.contain('brush my teeth');
以下是完整的测试文件：
import List from '@/components/List'; import Vue from 'vue'; describe('List.vue', () => { it('displays items from the list', () => { const Constructor = Vue.extend(List); const ListComponent = new Constructor().$mount(); expect(ListComponent.$el.textContent).to.contain('play games'); }) it('adds a new item to list on click', () => { // build component const Constructor = Vue.extend(List); const ListComponent = new Constructor().$mount(); // set input value ListComponent.newItem = 'brush my teeth'; // simulate click event const button = ListComponent.$el.querySelector('button'); const clickEvent = new window.Event('click'); button.dispatchEvent(clickEvent); ListComponent._watcher.run(); // assert list contains new item expect(ListComponent.$el.textContent).to.contain('brush my teeth'); expect(ListComponent.listItems).to.contain('brush my teeth'); }) })
现在我们可以再次运行我们的测试，应该会显示绿色！