精品人妻av一区二区三区,国产av麻豆mag剧集

花費數(shù)小時后，也許>天> ，為您的Web應(yīng)用程序提供了令人敬畏的新功能的完成，您終于準(zhǔn)備好看到它的行動。您將新代碼添加到您的JavaScript基礎(chǔ)，構(gòu)建發(fā)布候選者，并啟動您的瀏覽器，希望驚訝。然后……嗯……新功能可能運行良好，但是您的應(yīng)用程序中的其他一些關(guān)鍵部分 - 在開發(fā)新版本時您沒有 touch

的部分 - 變得非常糟糕?，F(xiàn)在，您面臨著在幾天工作中進(jìn)行回溯的挑戰(zhàn)，以弄清楚如何打破現(xiàn)有代碼?？鞓返娜兆咏^對不在這里。>

>這種情況比我想承認(rèn)的要多。而且，如果您已經(jīng)編碼了一段時間，那么您也可能已經(jīng)看到了它。但是，請考慮一下使這種情況如此痛苦的原因。這并不是因為我們的新代碼破壞了現(xiàn)有代碼；這是不可避免的。真正的痛苦是，花了很長時間才能注意到破裂。由于我們知道我們的應(yīng)用程序正在起作用，因此有如此多的發(fā)展，因此該錯誤可能隱藏了大量代碼。而且，盡管它似乎有點像在草叢中尋找針頭，但我們別無選擇。在本文中，我們將真正從JavaScript開發(fā)中消除這種情況。不再需要在數(shù)小時，數(shù)天或幾周的代碼中進(jìn)行挖掘。我們將采用的原則是一個簡單的原則：在我們創(chuàng)建它后立即找到任何錯誤

。這是正確的;我們將建立一個開發(fā)環(huán)境和流程，當(dāng)我們編寫引入錯誤的代碼時立即告訴我們。此外，一旦最初的開發(fā)完成，我們將付出的額外努力就不會浪費。在集成環(huán)境中，捕獲我們開發(fā)錯誤的相同測試代碼將完全重復(fù)使用。我們可以輕松地將測試納入我們的源代碼管理系統(tǒng)中，在錯誤進(jìn)入我們的代碼庫之前阻止錯誤。在以下四個部分中，我們將首先研究JavaScript測試環(huán)境所需的工具。然后，我們將考慮一個瑣碎的應(yīng)用程序，該應(yīng)用程序足夠簡單，可以理解，但具有實際生產(chǎn)Web應(yīng)用程序中可能存在的所有功能。最后兩個部分展示了我們?nèi)绾问褂铆h(huán)境在開發(fā)過程中測試示例應(yīng)用程序，并且在整合過程中初始開發(fā)完成后。

鑰匙要點

>強(qiáng)調(diào)開發(fā)過程中的早期錯誤檢測，以防止在后期階段進(jìn)行復(fù)雜的問題，確保平穩(wěn)的編碼體驗并最大程度地減少回溯。
>由于其與瀏覽器和node.js環(huán)境的兼容性，將摩卡咖啡作為核心測試框架，從而允許從開發(fā)到集成測試的無縫過渡。
>使用sinon.js創(chuàng)建間諜，存根和模擬，這對于在不影響其操作的情況下測試與外部庫和服務(wù)的互動至關(guān)重要。

在開發(fā)過程中，專注于為模型，視圖和收集創(chuàng)建詳細(xì)的單元測試，以確保每個組件孤立地正確起作用。通過將單位測試與Node.js調(diào)整為命令行執(zhí)行，以確保應(yīng)用程序在生產(chǎn)環(huán)境中的預(yù)期行為，從而平穩(wěn)地過渡到集成測試。

組裝JavaScript測試環(huán)境

我們的環(huán)境必須支持開發(fā)過程中無摩擦，連續(xù)測試。在開發(fā)過程中創(chuàng)建的測試必須同樣在集成中。

對于JavaScript編碼，沒有比現(xiàn)代Web瀏覽器更好的開發(fā)環(huán)境。無論您的口味是Firebug還是Webkit的開發(fā)人員工具，瀏覽器都支持實時檢查和編輯，完整的交互式調(diào)試以及復(fù)雜的性能分析。 Web瀏覽器非常適合開發(fā)，因此我們的測試工具和環(huán)境必須與瀏覽器內(nèi)開發(fā)集成。但是，Web瀏覽器對于集成測試并不是那么好。集成測試通常發(fā)生在云中某個地方的服務(wù)器上（或至少在數(shù)據(jù)中心中的某個地方）。這些系統(tǒng)甚至沒有圖形用戶界面，更不用說現(xiàn)代的Web瀏覽器了。為了有效的集成測試，我們需要簡單的命令行腳本和支持它們的JavaScript執(zhí)行環(huán)境。對于這些要求，選擇的工具是node.js。盡管還有其他命令行JavaScript環(huán)境，但沒有一個可以匹配Node.js的寬度和深度。在集成階段，我們的測試工具必須與node.js.

集成。

測試框架

>我們已經(jīng)確定我們的測試工具必須支持Web瀏覽器和Node.js環(huán)境，我們可以縮小選擇的范圍，以選擇核心測試框架。存在許多JavaScript測試框架，但大多數(shù)人傾向于瀏覽器測試。通?？梢宰屗麄兣cnode.js一起工作，但通常需要不高的黑客攻擊或調(diào)整。摩卡咖啡是一個不遭受此問題的框架，其合理地描述為：>

> Mocha是在節(jié)點和瀏覽器上運行的功能豐富的JavaScript測試框架，使異步測試簡單而有趣。

Mocha最初是為Node.js開發(fā)的，它也很容易支持Web瀏覽器。通過使用Mocha作為我們的測試框架，我們可以編寫支持開發(fā)和集成而無需修改的測試。

>斷言庫

與某些JavaScript測試框架不同，摩卡咖啡是為了最大程度的靈活性而設(shè)計的。結(jié)果，我們將不得不選擇其他一些作品來完成。特別是，我們需要一個JavaScript斷言庫。為此，我們將依靠Chai主張庫。柴的某種獨特之處在于它支持所有常見的斷言樣式 -

sustert>，>期望， and 應(yīng)該。代碼。在封面下，它們都是等效的。將測試從一種斷言樣式轉(zhuǎn)換為另一種主張風(fēng)格很容易。斷言風(fēng)格的主要區(qū)別在于它們的可讀性。主張樣式的選擇主要取決于您（或您的團(tuán)隊）認(rèn)為最可讀性的樣式，哪種風(fēng)格會產(chǎn)生最可理解的測試。要查看差異，請考慮為以下代碼開發(fā)瑣碎的測試：>

>傳統(tǒng)的斷言測試可以寫為：

<span>var sum = 2 + 2;</span>

該測試可以完成工作，但是除非您已經(jīng)習(xí)慣了老式的單元測試，否則閱讀和解釋可能有些挑戰(zhàn)。替代斷言風(fēng)格的使用期望：

assert<span>.equal(sum, 4, "sum should equal 4");</span>

大多數(shù)開發(fā)人員發(fā)現(xiàn)，與斷言風(fēng)格的測試相比，預(yù)期的斷言更容易閱讀和理解。第三個替代方案應(yīng)該使考試斷言更像是自然語言：

<span>expect(sum).to.equal(4);</span>

> Chai庫支持所有三種主張樣式。在本文中，我們應(yīng)該堅持。

sum<span>.should.equal(4);</span>

間諜，存根和模擬

>大多數(shù)Web應(yīng)用程序，包括我們將在本文中考慮的瑣碎示例，依賴第三方庫和服務(wù)。在許多情況下，測試我們的代碼需要觀察甚至控制這些庫和服務(wù)。 Sinon.js庫提供了許多用于測試這些交互的工具。這樣的工具分為三個一般類：

間諜

> stub

模擬。測試代碼模仿正在測試的代碼之外的功能或服務(wù)。使用模擬，測試代碼可以從這些函數(shù)或服務(wù)中指定返回值，以便可以驗證代碼的響應(yīng)。>

>與sinon.js庫本身一起，我們可以使用Sinon.js主張chai。

單元測試開發(fā)環(huán)境

>我們測試工作臺的最終工具是用于單元測試的開發(fā)環(huán)境。在我們的示例中，我們將使用Test’EM。 Test’em是一個方便的腳本集合，用于設(shè)置并運行連續(xù)的測試環(huán)境。如果我們選擇，我們可以自己編寫腳本并手動管理環(huán)境；但是，Toby Ho（Test’em的創(chuàng)建者）整理了一個很棒的軟件包，可以節(jié)省我們的麻煩。

示例應(yīng)用程序

要查看我們的測試環(huán)境，請考慮一個簡單的應(yīng)用程序。盡管該應(yīng)用程序包含了實際應(yīng)用所需的所有功能，但該應(yīng)用程序包含了其裸露的必需品。（該應(yīng)用程序的完整源代碼可在GitHub上找到。）

>用戶可以看到他們的毒品列表，他們可以單擊一個復(fù)選框以切換任何todo的狀態(tài)。

todos數(shù)據(jù)庫

>我們的應(yīng)用程序從包含托多斯信息的數(shù)據(jù)庫表開始。這是我們可以用來創(chuàng)建該表的SQL。

>我們在其中放了一些測試數(shù)據(jù)后，表可能會看起來。

<span>var sum = 2 + 2;</span>

title 完整 1A示例數(shù)據(jù)庫中的todo項目 2 ANATHONE樣品todo item1 3 yet另一個樣本todo item0 >如表所示，我們的Todos僅包括一個主鍵（ID），標(biāo)題和一個狀態(tài)位，以指示它們是否完成。一個REST API

我們的Web應(yīng)用程序需要訪問此數(shù)據(jù)庫，因此我們將提供標(biāo)準(zhǔn)的REST接口。 API遵循Ruby慣例，但是任何服務(wù)器技術(shù)都可以輕松實現(xiàn)。特別是：

get api/todos返回數(shù)據(jù)庫中所有行的JSON編碼陣列。

get api/todos/nnn返回todo的json表示，ID等于nnn。

> POST API/TODOS使用請求中的JSON編碼的信息在數(shù)據(jù)庫中添加了新的TODO。
>
如果您不是特別喜歡Ruby，則源代碼包括此API的完整PHP實現(xiàn)。
> JavaScript庫

>我們的適度應(yīng)用程序足夠簡單，可以在沒有任何庫的純JavaScript中實現(xiàn)，但是我們的計劃要大得多。我們可能會開始較小，但最終該應(yīng)用程序?qū)⒕哂畜@人的功能和令人愉悅的用戶界面。為了準(zhǔn)備那天，我們將建立一個可以支持我們最終殺手應(yīng)用程序的框架：>

>用于DOM操作，事件處理和服務(wù)器通信的jQuery
>

html骨架

>現(xiàn)在，我們知道將包含我們應(yīng)用程序的組件，我們可以定義支持它的HTML骨架。（現(xiàn)在）沒有什么幻想的，只有最小的HTML5文檔，一些JavaScript文件以及一小部分代碼可以啟動。

在開發(fā)過程中進(jìn)行測試

<span>var sum = 2 + 2;</span>

>現(xiàn)在我們已經(jīng)選擇了我們的工具并指定了該應(yīng)用程序了，現(xiàn)在該開始開發(fā)了。我們的第一個任務(wù)是安裝工具。

>安裝工具

即使我們將在瀏覽器中開發(fā)，我們的測試環(huán)境也依賴于node.js。因此，第一步是安裝node.js和Node軟件包管理器（NPM）。 Node.js網(wǎng)站上有針對OS X，Windows，Linux和Sunos的可執(zhí)行性二進(jìn)制文件，以及其他操作系統(tǒng)的源代碼。運行安裝程序后，您可以從命令行驗證node.js和npm。

>我們需要的其他所有內(nèi)容都可以作為節(jié)點軟件包可用。 Node軟件包管理器可以處理其安裝以及任何依賴項。>

assert<span>.equal(sum, 4, "sum should equal 4");</span>

創(chuàng)建項目結(jié)構(gòu)

此示例的源代碼包括一個完整的項目結(jié)構(gòu)，其中包含以下15個文件：>

<span>expect(sum).to.equal(4);</span>

這是每個文件夾和文件所包含的內(nèi)容：

>
- api/todos.php：實現(xiàn)REST API的PHP代碼。
的縮小版本
- >
- > mysql/：用于應(yīng)用程序的mySQL代碼的文件夾。
> mysql/todos.sql：mysql命令創(chuàng)建應(yīng)用程序數(shù)據(jù)庫。>
> src/：我們的客戶端應(yīng)用程序代碼的文件夾。
- > src/app-todos.js：我們的應(yīng)用程序。
>測試/：測試代碼的文件夾。
- test/app-todos-test.js：我們應(yīng)用程序的測試代碼。
- 在開發(fā)過程中，我們只對其中三個文件感興趣，即Testem.json，src/app-todos.js和test/app-todos-test.js。

>最后，我們準(zhǔn)備好編碼了。在命令外殼中，導(dǎo)航到我們項目的根文件夾并執(zhí)行命令testem。 Test’em腳本將運行，清除終端窗口，并在右上方給我們一個URL。將該URL復(fù)制并粘貼到我們選擇的瀏覽器中，我們已經(jīng)離開了。

>一旦我們啟動Web瀏覽器，它將自動執(zhí)行我們定義的所有測試。由于我們剛剛開始開發(fā)，因此我們將沒有任何代碼，也不會有任何測試用例。瀏覽器將向我們指出。

<span>var sum = 2 + 2;</span>

我們啟動測試的終端窗口也將為我們提供狀態(tài)。單元測試骨干。JS應(yīng)用程序

第一個測試用例

>本著真正的測試驅(qū)動開發(fā)的精神，我們將首先在測試/app-todos-test.js文件中編寫第一個測試用例。像任何好的Web應(yīng)用程序一樣，我們希望最大程度地減少全球名稱空間污染。為此，我們將依靠一個全局變量doApp來包含我們的所有代碼。我們的第一個測試案例將確保存在全局名稱空間變量。

<span>var sum = 2 + 2;</span>

如您所見，我們需要一個初步陳述，以告訴Mocha我們正在使用Chai主張。然后，我們可以開始編寫測試。通過慣例，javaScript測試被組織成塊（可以嵌套到子塊中，依此類推）。每個塊以DECRICON（）函數(shù)調(diào)用開始，以確定我們正在測試的代碼的哪個部分。在這種情況下，我們正在測試總體應(yīng)用程序，因此這是第一個描述（）的參數(shù)。

在測試塊中，我們通過測試的內(nèi)容記錄了每個測試用例。這就是IT（）函數(shù)的目的。讀取任何測試案例的方法是將描述（）和（）字符串組合到單個語句中。因此，我們的第一個測試案例是

應(yīng)用程序為名稱space
創(chuàng)建一個全局變量

測試代碼本身在IT（）塊內(nèi)部。我們的測試案例是

assert<span>.equal(sum, 4, "sum should equal 4");</span>

>現(xiàn)在我們有一個完整的測試用例。一旦我們保存文件，test'em便會自動接管。它注意到我們的一個文件已更改，因此它立即重新運行測試。毫不奇怪（由于我們尚未為應(yīng)用程序編寫任何代碼），我們的第一個測試失敗了。

終端窗口也會自動更新。單元測試骨干。JS應(yīng)用程序

要進(jìn)行測試，我們必須創(chuàng)建全局名稱空間變量。我們轉(zhuǎn)移到srcapp-todos.js文件并添加必要的代碼。單元測試骨干。JS應(yīng)用程序

>我們保存文件后，請再次驗證“ EM再次彈出”。我們立即為測試案例獲得更新的結(jié)果。

<span>expect(sum).to.equal(4);</span>

>退后一會兒，考慮發(fā)生了什么！每當(dāng)我們更改測試代碼或應(yīng)用程序時，Test`EM都會立即重新運行我們的整個測試套件。我們要做的就是將Test'Em的瀏覽器或終端窗口保持在屏幕的角落，并且在開發(fā) 單元測試骨干。JS應(yīng)用程序

>時，我們可以實時看到代碼的健康狀況。即使引入一個錯誤，我們也會知道，即使該錯誤在代碼的一部分中表現(xiàn)出來，與我們正在工作的位置不同。在我們引入錯誤時，不再需要在數(shù)小時，幾天或幾周的新代碼中進(jìn)行挖掘。

測試模型

>隨著我們的開發(fā)環(huán)境現(xiàn)已完全建立，我們可以開始開發(fā)應(yīng)用程序。由于我們的應(yīng)用程序顯示了招待員列表，因此最好為這些毒品創(chuàng)建一個模型。該模型將需要跟蹤Todo的標(biāo)題及其狀態(tài)。讓我們添加一個單元測試，該測試可以驗證我們可以使用合理默認(rèn)值創(chuàng)建一個todo。

<span>var sum = 2 + 2;</span>

這些測試值得注意的幾個方面。

>我們可以彼此嵌套測試塊。一個測試塊將包含用于TODO模型的所有單元測試，這些測試的子塊集中于初始化。在測試塊中，我們可以定義每個測試之前執(zhí)行的功能。這就是toteach（）塊的目的。在上面的示例中，我們正在每次測試之前創(chuàng)建一個todo的新實例。
>摩卡摩卡框架會自動確保我們所有測試用例的JavaScript上下文（即，其值）是一致的。這就是為什么我們可以在一個函數(shù)（toteARK（）參數(shù)）中定義this.todo并將其安全地引用其他函數(shù)（例如IT（）參數(shù)）。如果沒有摩卡咖啡在幕后工作以提供這種一致性，JavaScript將為每個功能定義不同的上下文。

使用第三方功能的存根

assert<span>.equal(sum, 4, "sum should equal 4");</span>

>現(xiàn)在我們有了一個簡單的毒品模型，我們可以開始定義其行為。我們的模型應(yīng)該做的一件事是在任何屬性更改時更新數(shù)據(jù)庫。但是，在單元測試環(huán)境中，我們將沒有實際的數(shù)據(jù)庫檢查。另一方面，我們實際上并未編寫任何代碼來進(jìn)行數(shù)據(jù)庫更新。相反，我們依靠骨干來處理這種互動。這暗示了此測試案例的單位測試策略。我們需要知道的是，骨干模型使用save（）方法更新任何支持商店正在持續(xù)使用該模型。在我們的情況下，備份商店是數(shù)據(jù)庫。這是我們可以使用的單元測試代碼：

>在每個測試之前，我們還包括一些其他代碼，并且在每個測試后都添加了一部分代碼以執(zhí)行。該額外的代碼管理Sinon存根，該函數(shù)有效地將代碼中的另一個函數(shù)取消。在我們的情況下，存根將this.todo的save（）方法無效。有了存根，對該方法的呼叫實際上不會訪問后庫庫。相反，Sinon攔截了這些電話，并立即返回。這種行為很重要。如果我們試圖在單元測試環(huán)境中執(zhí)行實際的骨干保存（）方法，則該調(diào)用將失敗，因為不會有數(shù)據(jù)庫或服務(wù)器API。

>存根后，我們的測試用例可以使用它來驗證模型的行為。在第一個測試案例中，我們立即將TODO的標(biāo)題設(shè)置為新值。由于這更改了標(biāo)題屬性，因此我們希望我們的模型更新其備份商店。為了檢查我們是否只驗證了該存根是被調(diào)用的。為了使我們的模型通過這些測試，我們可以尋找變更事件并做出適當(dāng)?shù)捻憫?yīng)。

<span>var sum = 2 + 2;</span>

測試視圖

當(dāng)然，如果我們的應(yīng)用程序?qū)嶋H上沒有向用戶展示Todos，那么我們的應(yīng)用程序?qū)⒉粫θ魏稳擞腥魏魏锰?，這需要創(chuàng)建一些HTML。我們將使用骨干視圖來實現(xiàn)該功能。在我們瑣碎的應(yīng)用程序中，我們只想將每個待辦事項作為列表項目。這是將使我們開始的測試用例。

assert<span>.equal(sum, 4, "sum should equal 4");</span>

>我們通過兩個測試用例開始對視圖的測試。首先，我們確保視圖的渲染方法返回視圖本身。這是主鏈中常見且非常方便的慣例，因為它允許方法鏈條。我們的第二個測試用例驗證了渲染創(chuàng)建的HTML元素是列表項目（

）。通過這些測試所需的代碼是直接的骨干視圖。

接下來，我們可以開發(fā)該列表項目視圖的詳細(xì)內(nèi)容。例如，我們希望完整的列表項目看起來像以下內(nèi)容。

<span>expect(sum).to.equal(4);</span>

對于我們的測試案例，我們可以利用jQuery從視圖的主要元素中提取單個元素。

sum<span>.should.equal(4);</span>

請注意，在上一個測試案例中，我們將模型的save（）方法固定了。由于我們正在從其默認(rèn)值中更改屬性，因此我們的模型將盡職盡責(zé)地將其持續(xù)到其備用商店。但是，在單元測試環(huán)境中，我們將沒有數(shù)據(jù)庫或服務(wù)器API。該存根取代了缺失的組件，并允許測試無錯誤進(jìn)行。為了通過這些測試通過，我們必須在我們的視圖中添加一些其他代碼。

CREATE TABLE `todos` (
  `id`       int(11)      NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.',
  `title`    varchar(256) NOT NULL DEFAULT ''     COMMENT 'The text for the todo item.',
  `complete` bit(1)       NOT NULL DEFAULT b'0'   COMMENT 'Boolean indicating whether or not the item is complete.',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'

測試模型/視圖交互

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title</span>></span><span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>List of Todos<span><span></h1</span>></span>
</span>
    <span><span><span><script</span> src<span>="lib/jquery-1.9.0.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="lib/underscore-min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="lib/backbone-min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="src/app-todos.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>$(function () {
</span></span></span><span><span>        <span>var todos = new todoApp<span>.Todos</span>();
</span></span></span><span><span>        todos<span>.fetch();
</span></span></span><span><span>        <span>var list = new todoApp<span>.TodosList</span>({collection: todos});
</span></span></span><span><span>        <span>$("body").append(list.el);
</span></span></span><span><span>      <span>})
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

>現(xiàn)在我們已經(jīng)驗證了我們的視圖實現(xiàn)會創(chuàng)建正確的HTML標(biāo)記，我們可以測試其與模型的交互。特別是，我們要確保用戶可以通過單擊復(fù)選框來切換A TODO的狀態(tài)。我們的測試環(huán)境不需要實際的人用戶，因此我們將使用jQuery生成點擊事件。但是，為此，我們必須將內(nèi)容添加到真實的Live DOM中。該內(nèi)容被稱為測試

夾具

。這是單元測試代碼。

請注意，我們再次將todo's save（）方法固定。否則，當(dāng)我們通過模擬單擊更改todo狀態(tài)時，骨干將嘗試更新不存在的備份商店。

bash-3.2$ node --version
v0.8.18
bash-3.2$ npm --version
1.2.2
bash-3.2$

對于測試用例本身，我們首先創(chuàng)建具有固定件ID的

元素，然后將該元素添加到我們的實時文檔中。在這種情況下，實時文檔是顯示我們測試結(jié)果的網(wǎng)頁。盡管我們在驗證測試案例后立即刪除元素，但我們也將其顯示屬性設(shè)置為無，因此它不會干擾Mocha的測試結(jié)果。實現(xiàn)此功能的代碼包括對TODO模型的少量添加。添加是一種新的togglestatus（）方法。>

<span>var sum = 2 + 2;</span>

在視圖中，我們想在元素上查看單擊事件，并為模型調(diào)用此方法。

assert<span>.equal(sum, 4, "sum should equal 4");</span>

測試集合

在這一點上，我們的應(yīng)用程序幾乎完成了。剩下的唯一功能是將所有招待員聚集在一起。自然，我們將使用骨干收藏。實際上，我們不會在收藏中做任何特別的事情，因此我們真的不需要任何單位測試。

但是，我們可以驗證我們對集合觀點的實施是否合適。我們希望該視圖呈現(xiàn)為無序列表（

）。測試用例不需要我們以前從未見過的任何功能。>

<span>expect(sum).to.equal(4);</span>

視圖實現(xiàn)也很簡單。它跟蹤集合中的任何添加并更新視圖。對于初始渲染（），它一次只會一次添加一個集合中的所有模型。

sum<span>.should.equal(4);</span>

獎勵測試：驗證API

CREATE TABLE `todos` (
  `id`       int(11)      NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.',
  `title`    varchar(256) NOT NULL DEFAULT ''     COMMENT 'The text for the todo item.',
  `complete` bit(1)       NOT NULL DEFAULT b'0'   COMMENT 'Boolean indicating whether or not the item is complete.',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'

由于我們的REST API完美地匹配了骨干期望期望的API，因此我們不需要任何自定義代碼來管理API交互。結(jié)果，我們不需要任何單位測試用例。在現(xiàn)實世界中，您可能不會那么幸運。如果您的API不符合骨干慣例，則可能需要覆蓋或擴(kuò)展一些骨干代碼來處理非標(biāo)準(zhǔn)API。該額外的代碼也需要單位測試。幸運的是，即使在單元測試環(huán)境中，測試API交互也相對容易。

測試API交互的最簡單方法依賴于sinon.js的假服務(wù)器功能。不幸的是，該功能僅在Sinon的瀏覽器實現(xiàn)中（當(dāng)前）可用。它明確排除在Node.js實現(xiàn)中。有一些駭客可以在Node.js中運行它，但是這些駭客很脆弱，并且依賴于內(nèi)部實現(xiàn)細(xì)節(jié)。如果可能的話，最好避免它們。幸運的是，如果沒有Sinon的假服務(wù)器，我們就可以通過。

>秘密知道骨干依賴于jQuery的$ .ajax（）函數(shù)來實現(xiàn)REST API。我們可以通過固定該功能來攔截API相互作用。當(dāng)我們啟動功能時，我們將要替代自己的響應(yīng)。存根的屈服方法為我們提供了這個機(jī)會。它告訴辛農(nóng)（Sinon）在稱呼該存根時應(yīng)采取什么其他動作。這是一個完整的測試案例，可以驗證我們的收集使用REST API正確初始初始初始初始初始初始初始初始初始初始初始。

<span>var sum = 2 + 2;</span>

完成！

從隨后的屏幕截圖中可以看到，我們現(xiàn)在已經(jīng)編寫了通過所有單元測試用例的代碼。至少目前，開發(fā)是完整的。

在集成期間進(jìn)行測試

>現(xiàn)在，我們的應(yīng)用程序的客戶端開發(fā)已經(jīng)完成（并且我們已經(jīng)有了證明這一點的測試），我們可以將JavaScript安全地塞入源代碼管理系統(tǒng)中。然后可以將其集成到整個應(yīng)用程序的構(gòu)建過程中。作為該過程的一部分，我們希望執(zhí)行我們開發(fā)的所有測試用例。這將確保構(gòu)成最終部署的代碼通過我們定義的所有測試。它還將防止無意中引入新錯誤的代碼的“次要調(diào)整”。

在構(gòu)建過程中，我們可能希望從命令行執(zhí)行測試，而不是在Web瀏覽器中執(zhí)行測試。我們不需要單個測試用例的細(xì)節(jié)，只是保證它們都通過了。 Node.js非常容易適應(yīng)這一要求。我們只需要對我們的源代碼和單元測試代碼文件進(jìn)行幾個小添加。

我們的代碼需要這些修改，因為Node.js處理全局變量的處理方式與Web瀏覽器不同。在Web瀏覽器中，默認(rèn)情況下，JavaScript變量在范圍內(nèi)是全局。另一方面，node.js默認(rèn)情況下將變量限制在其本地模塊中。在那個環(huán)境中，我們的代碼將無法找到所需的第三方庫（jQuery，下劃線和骨干。。

>我們還需要調(diào)整測試代碼。測試腳本需要訪問自己的庫（jQuery，Chai，Sinon.js和Sinon-Chai）。此外，我們需要添加一些額外的內(nèi)容來模擬Web瀏覽器的文檔對象模型（DOM）?；叵胍幌?，我們的點擊處理測試要求我們將“固定裝置”

臨時添加到網(wǎng)頁。當(dāng)然，Node.js通常沒有網(wǎng)頁。但是，JSDOM節(jié)點軟件包讓我們模仿一個。下面的代碼為我們的測試創(chuàng)建了一個最小的，模擬的網(wǎng)頁。>

<span>var sum = 2 + 2;</span>

>包裝這些語句測試的條件，以查看我們是否在Node.js環(huán)境中運行，而不是Web瀏覽器。在瀏覽器中，不需要額外的語句，因此我們可以安全地跳過它們。

>通過這些更改，我們可以從命令行執(zhí)行完整的測試套件。只需導(dǎo)航到項目的根文件夾并執(zhí)行命令摩卡咖啡即可。結(jié)果看起來很熟悉。

當(dāng)然，摩卡咖啡返回出口水平，以指示是否通過了所有測試。這使我們可以將測試自動化為連續(xù)集成過程的一部分，或者僅僅是保留我們自己的理智的本地預(yù)設(shè)腳本。

結(jié)論

在這一點上，我們已經(jīng)實現(xiàn)了目標(biāo)。我們有一個單元測試環(huán)境在開發(fā)過程中在后臺運行，并在任何測試失敗時立即通知我們。測試在網(wǎng)絡(luò)瀏覽器中執(zhí)行，使我們在編碼時完全訪問了瀏覽器的開發(fā)工具。相同的測試也從命令行腳本同樣運行良好，因此我們可以在構(gòu)建或集成過程中自動執(zhí)行。

資源

這是文章中使用的主要單元測試資源。

>

>命令行JavaScript執(zhí)行環(huán)境：node.js

>
在單位測試backbone.js應(yīng)用程序上的常見問題（FAQ）

backbone.js中的單元測試與其他JavaScript框架相比？

backbone.js與其他JavaScript框架一樣，支持單元測試以確保應(yīng)用程序的質(zhì)量。但是，由于其靈活性和簡單性，Backbone.js脫穎而出。它并不決定您的應(yīng)用程序應(yīng)如何構(gòu)建，從而使開發(fā)人員可以自由設(shè)計自己的應(yīng)用程序，因為他們認(rèn)為合適。這種靈活性擴(kuò)展到單元測試，使開發(fā)人員可以選擇其首選的測試工具和方法。此外，與其他框架相比，Backbone.js具有較小的占地面積，使其用于單元測試更快，更有效。

>我可以在Backbone.js中使用什么工具？是否可以在backbone.js中用于單元測試的幾種工具。一些受歡迎的包括摩卡咖啡，茉莉和開玩笑。 Mocha是一種功能豐富的JavaScript測試框架，可為開發(fā)人員提供一種測試其應(yīng)用程序的簡單方法。茉莉花是用于測試JavaScript代碼的行為驅(qū)動的開發(fā)框架。它不依賴瀏覽器，DOM或任何JavaScript框架，因此非常適合測試backbone.js應(yīng)用程序。另一方面，開玩笑是一種全面的測試解決方案，專注于簡單和支持大型Web應(yīng)用程序。 Backbone.js應(yīng)用程序的測試涉及為應(yīng)用程序的每個組件創(chuàng)建測試用例。這包括模型，視圖和收藏。每個測試用例應(yīng)涵蓋組件的特定功能，并應(yīng)獨立于其他測試用例。您可以使用Mocha或Jasmine等測試框架來編寫測試。這些框架提供了定義測試用例，設(shè)置和拆除測試環(huán)境并做出斷言的功能。

>我如何在backbone.js？

中運行單位測試？ JS取決于您使用的測試框架。例如，如果您使用的是摩卡咖啡，則可以使用Mocha命令行工具運行測試。如果您使用的是茉莉花，則可以使用Jasmine命令行工具運行測試。這些工具提供了運行單個測試用例，整個測試套件或應(yīng)用程序中所有測試的選項。他們還提供了有關(guān)測試結(jié)果的詳細(xì)報告，包括通過，失敗和跳過的測試數(shù)量。

我可以在Backbone.js.js嗎？自動化單元測試在backbone.js中。自動化涉及建立連續(xù)集成（CI）系統(tǒng)，該系統(tǒng)每當(dāng)對代碼進(jìn)行更改時會自動運行測試。這樣可以確保更改引入的任何錯誤都會立即捕獲。有幾種CI工具，例如Jenkins，Travis CI和CircleCi，它們支持JavaScript，可用于在Backbone.js中自動化單元測試。