Vue.js是一個JavaScript框架，可用于構(gòu)建Web應(yīng)用程序的前端框架。特別是在創(chuàng)建復(fù)雜功能時，對于每個項目，有必要在我們的應(yīng)用程序中查看所有內(nèi)容，并檢查它是否符合預(yù)期。然而，對于大型項目，每次新的更新后，檢查每個功能將變得很麻煩。因此，我們可以創(chuàng)建可以一直運行的自動化測試，并保證我們的代碼可以正常運行。在本文中，我們將為VueJS創(chuàng)建一些簡單的單元測試。
要進(jìn)行測試，我們將先制作一個基本的待辦事項列表組件。我們將測試該列表是否正確顯示，并且用戶可以將新項目添加到待辦事項列表中。希望在本教程結(jié)束之前，您可以編寫測試，檢查您的組件輸出給用戶，以及通過與HTML進(jìn)行交互來模擬用戶操作（例如通過單擊按鈕）。
本文中的所有代碼可以在 Github 下載。
搭建環(huán)境
搭建JavaScript項目可能是一個復(fù)雜的過程。有那么多庫需要選擇，所有這些庫的目的都略有不同。幸運的是，對于VueJS，我們有vue-cli，它為我們設(shè)定了一切！您需要首先安裝npm，然后可以運行以下命令：
npm install -g vue-clivue init webpack project-name
在這個階段，你會被提示幾個問題。大多數(shù)都可以直接繼續(xù)，您可以選擇默認(rèn)選項，唯一的要求是您回答YES以包括vue-router和YES來設(shè)置Karma和Mocha的單元測試。然后安裝依賴項：
cd project-namenpm install
這個最終命令將啟動您的瀏覽器并打開localhost運行您的應(yīng)用程序：
npm run dev
下面是對vue-cli為我們設(shè)置的一些關(guān)鍵依賴關(guān)系（非常重要）的簡要概述，包括為我自己的項目安裝的版本。
依賴
Webpack (v2.3) 是一個捆綁器，它結(jié)合了各種JavaScript，CSS，HTML（和其他）文件，使他們可以隨時由客戶端處理。
Babel (v6.22) 是ECMAScript 6到ECMAScript 5的編譯器。這些是不同的JavaScript標(biāo)準(zhǔn)，目前的瀏覽器不能解析所有的ECMAScript 6，因此需要進(jìn)行轉(zhuǎn)換。
測試依賴關(guān)系
Karma (v1.4) 是一個測試運行器，它運行一個Web服務(wù)器，其中包含項目的應(yīng)用程序代碼，并對其執(zhí)行測試。
Mocha (v3.2) 是JavaScript的測試框架。
Chai (v3.5) 是可以與Mocha一起使用的斷言庫。
在您的項目中，您應(yīng)該能找到以下文件夾：build，config，node_modules，src，static和test。對本文來說，重要的是src，它將保存我們的應(yīng)用程序代碼并進(jìn)行test。
我的第一個測試
一個好的開始需要去做一些基本工作。我們將從創(chuàng)建簡單列表組件開始。在src/components文件夾中創(chuàng)建一個名為List.vue的新文件，并將以下代碼放在里面：
<template> <div> <h1>My To Do List</h1> </br> <!--displays list --> <ul> <li v-for="item in listItems">{{ item }}</li> </ul> </div></template> <script>export default { name: 'list', data () { return { listItems: ['buy food', 'play games', 'sleep'], } }}</script>在組件中，列表項存儲在組件數(shù)據(jù)中的數(shù)組（listItems）中。然后可以在模板中訪問該數(shù)據(jù)，并在foreach循環(huán)中循環(huán)（v-for），并顯示在頁面上。
為了使我們的列表看起來更有趣，我們可以創(chuàng)建一個新的路徑來顯示我們的組件。進(jìn)入src/router/index.js并添加路由，你的代碼應(yīng)該是這樣的：
import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import List from '@/components/List' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/to-do', name: 'ToDo', component: List }, ]})現(xiàn)在，如果您導(dǎo)航到localhost:8080/#/to-do，您將在瀏覽器中看到您的列表效果！
首先我們要測試數(shù)據(jù)是否正確顯示。在 test/unit/specs 下創(chuàng)建一個新的文件List.spec.js并放上如下代碼：
import List from '@/components/List';import Vue from 'vue'; describe('List.vue', () => { it('displays items from the list', () => { // our test goes here })})在這個文件中，我們描述List.vue組件，我們有一個單獨的空測試，它將檢查它（組件）是否從列表中顯示項目。這是Mocha測試的基本文件結(jié)構(gòu)。
在我們的測試中，我們首先需要設(shè)置Vue組件。復(fù)制下面的代碼，并將其放在注釋“our test goes here”的位置：
// build componentconst Constructor = Vue.extend(List);const ListComponent = new Constructor().$mount();
我們擴(kuò)展Vue然后安裝我們的組件。安裝組件很重要，因為這是在我們的模板中呈現(xiàn)HTML。這實際上意味著HTML被構(gòu)建，并且我們的模板中的變量（例如{{item}}）被填滿數(shù)據(jù)，使得我們可以訪問HTML（通過$el）。
隨著我們的組件準(zhǔn)備好，我們可以寫第一個斷言。在這個例子中，我們使用了'expect'風(fēng)格，由Chai斷言庫提供，以及'should'和'assert'。 安裝組件后放置以下代碼：
// assert that component text contains items from the listexpect(ListComponent.$el.textContent).to.contain('play games');如上所述，我們可以使用ListComponent.$el獲取組件的HTML，并且使用ListComponent.$el.textContent只訪問內(nèi)部HTML（即文本）。斷言是檢查文本是否包含在組件數(shù)據(jù)中設(shè)置的列表項之一。
為了檢查一切都能正常工作，我們可以運行測試！使用vue-cli項目，我們可以簡單地輸入npm run unit，這是一個別名 cross-env BABEL_ENV = test karma start test/unit/karma.conf.js --single-run。
npm run unit
如果所有的測試都已經(jīng)通過，它將顯示綠色，并顯示成功測試和代碼覆蓋率報告的列表，讓您知道在測試期間執(zhí)行的應(yīng)用程序代碼的百分比。
模擬用戶輸入
這是一個很好的開始，但是很少有應(yīng)用程序只會顯示數(shù)據(jù)。我們要添加的下一個功能是讓用戶能夠在其列表中添加新項目。為此，我們需要一個輸入框，用戶可以在其中鍵入新項目，并在按鈕上添加項目到列表中。這是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，輸入框的值綁定到存儲在組件數(shù)據(jù)中的newItem變量。當(dāng)單擊按鈕時，將執(zhí)行addItemToList函數(shù)，將newItem添加到列表數(shù)組中，并清除newItem，以便可以將更多的內(nèi)容添加到列表中。
要開始測試此功能，請在List.spec.js中創(chuàng)建一個新的空測試，并添加測試代碼：
it('adds a new item to list on click', () => { // our test goes here})首先我們要構(gòu)建我們的組件，并模擬一個用戶在輸入框中輸入的內(nèi)容。由于VueJS將輸入框的值綁定到newItem變量，所以我們可以簡單地將我們的值設(shè)置為newItem。
// build componentconst Constructor = Vue.extend(List);const ListComponent = new Constructor().$mount(); // set value of new itemListComponent.newItem = 'brush my teeth';
接下來我們需要點擊按鈕。我們必須在HTML中找到這個按鈕，它可以使用$el。只有這一次，我們才可以使用querySelector來查找實際的元素。可以使用它的類（.buttonClass），其id（#buttonId）或元素的名稱（button）來找到一個元素。
// find buttonconst button = ListComponent.$el.querySelector('button');為了模擬一個點擊，我們需要將按鈕傳遞給一個新的事件對象。在測試環(huán)境中，List組件不會監(jiān)聽任何事件，因此我們需要手動運行監(jiān)視器。
// simulate click eventconst clickEvent = new window.Event('click');button.dispatchEvent(clickEvent);ListComponent._watcher.run();最后，我們需要檢查newItem是否顯示，我們已經(jīng)知道如何從第一個測試中完成！我們可能還想檢查newItem是否存儲在列表數(shù)組中。
//assert list contains new itemexpect(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'); })})現(xiàn)在我們可以再次運行我們的測試，應(yīng)該會顯示綠色！
希望這段代碼對你來說能夠很清楚，但是它不是特別容易理解，特別是對于第一次進(jìn)行VueJS測試的人來說。有一個VueJS實用程序庫，其中包含了一些更復(fù)雜的外觀代碼。要使用它，我們可以轉(zhuǎn)到我們的項目根目錄并運行以下命令：
npm install avoriaz
現(xiàn)在我們可以隱藏mount()之后的Vue組件的設(shè)置，并且為了單擊按鈕，我們需要的是兩行代碼：find()該按鈕和dispatch() ）點擊事件。
import { mount } from 'avoriaz';import List from '@/components/List';import Vue from 'vue'; describe('List.vue', () => { // previous tests .. it('adds new item to list on click with avoriaz', () => { // build component const ListComponent = mount(List); // set input value ListComponent.setData({ newItem: 'brush my teeth', }); // simulate click event const button = ListComponent.find('button')[0]; button.dispatch('click'); // assert list contains new item expect(ListComponent.text()).to.contain('brush my teeth'); expect(ListComponent.data().listItems).to.contain('brush my teeth'); })})總結(jié)
我個人認(rèn)為寫作測試對于我的正常工作流程至關(guān)重要，但是使用JavaScript，特別是VueJS，我開始碰到一些麻煩。希望本教程將幫助任何與我一樣遇到麻煩的人！
本文中的所有代碼可以在 Github 下載。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
