99国产欧美久久久精品,欧美亚洲国产第一精品久久,久久久久久国产精品免费免费男同

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

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

測(cè)試集合

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

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

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

在backbone.js？

>我如何在backbone.js中調(diào)試失敗的單位測(cè)試？報(bào)告確定失敗的原因。大多數(shù)測(cè)試框架都提供詳細(xì)的錯(cuò)誤消息，可以幫助您查明問(wèn)題。您還可以使用chrome devtools或node.js debugger等調(diào)試工具逐步瀏覽您的代碼並檢查變量和函數(shù)調(diào)用。

>如何改善backbone.js中的單元測(cè)試的性能？ Backbone.js中單元測(cè)試的性能涉及優(yōu)化您的測(cè)試和測(cè)試環(huán)境。這包括編寫有效的測(cè)試，這些測(cè)試快速執(zhí)行，並行運(yùn)行測(cè)試以及使用快速的測(cè)試框架。您還可以使用分析工具在測(cè)試過(guò)程中識(shí)別慢速測(cè)試和瓶頸。

首頁(yè)

web前端

js教程

單元測(cè)試骨幹。JS應(yīng)用程序

Lisa Kudrow

Feb 24, 2025 am 09:38 AM

單元測(cè)試骨幹。JS應(yīng)用程序

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

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

>這種情況比我想承認(rèn)的要多。而且，如果您已經(jīng)編碼了一段時(shí)間，那麼您也可能已經(jīng)看到了它。但是，請(qǐng)考慮一下使這種情況如此痛苦的原因。這並不是因?yàn)槲覀兊男麓a破壞了現(xiàn)有代碼；這是不可避免的。真正的痛苦是，花了很長(zhǎng)時(shí)間才能注意到破裂。由於我們知道我們的應(yīng)用程序正在起作用，因此有如此多的發(fā)展，因此該錯(cuò)誤可能隱藏了大量代碼。而且，儘管它似乎有點(diǎn)像在草叢中尋找針頭，但我們別無(wú)選擇。在本文中，我們將真正從JavaScript開發(fā)中消除這種情況。不再需要在數(shù)小時(shí)，數(shù)天或幾週的代碼中進(jìn)行挖掘。我們將採(cǎi)用的原則是一個(gè)簡(jiǎn)單的原則：在我們創(chuàng)建它後立即找到任何錯(cuò)誤

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

鑰匙要點(diǎn)

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

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

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

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

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

集成。

測(cè)試框架

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

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

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

>斷言庫(kù)

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

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

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

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

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

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

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

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

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

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

間諜，存根和模擬

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

間諜

> stub

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

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

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

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

示例應(yīng)用程序

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

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

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

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

>我們?cè)谄渲蟹帕艘恍y(cè)試數(shù)據(jù)後，表可能會(huì)看起來(lái)。

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

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

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

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

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

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

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

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

html骨架

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

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

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

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

>安裝工具

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

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

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

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

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

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

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

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

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

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

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

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

第一個(gè)測(cè)試用例

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

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

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

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

應(yīng)用程序?yàn)槊Qspace
創(chuàng)建一個(gè)全局變量

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

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

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

終端窗口也會(huì)自動(dòng)更新。單元測(cè)試骨幹。JS應(yīng)用程序

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

>我們保存文件後，請(qǐng)?jiān)俅悟?yàn)證“ EM再次彈出”。我們立即為測(cè)試案例獲得更新的結(jié)果。

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

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

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

測(cè)試模型

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

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

這些測(cè)試值得注意的幾個(gè)方面。

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

使用第三方功能的存根

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

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

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

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

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

測(cè)試視圖

當(dāng)然，如果我們的應(yīng)用程序?qū)嶋H上沒有向用戶展示Todos，那麼我們的應(yīng)用程序?qū)⒉粫?huì)對(duì)任何人有任何好處，這需要?jiǎng)?chuàng)建一些HTML。我們將使用骨幹視圖來(lái)實(shí)現(xiàn)該功能。在我們瑣碎的應(yīng)用程序中，我們只想將每個(gè)待辦事項(xiàng)作為列表項(xiàng)目。這是將使我們開始的測(cè)試用例。

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

>我們通過(guò)兩個(gè)測(cè)試用例開始對(duì)視圖的測(cè)試。首先，我們確保視圖的渲染方法返回視圖本身。這是主鏈中常見且非常方便的慣例，因?yàn)樗试S方法鏈條。我們的第二個(gè)測(cè)試用例驗(yàn)證了渲染創(chuàng)建的HTML元素是列表項(xiàng)目（

）。通過(guò)這些測(cè)試所需的代碼是直接的骨幹視圖。

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

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

對(duì)於我們的測(cè)試案例，我們可以利用jQuery從視圖的主要元素中提取單個(gè)元素。

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

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

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.'

測(cè)試模型/視圖交互

<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)驗(yàn)證了我們的視圖實(shí)現(xiàn)會(huì)創(chuàng)建正確的HTML標(biāo)記，我們可以測(cè)試其與模型的交互。特別是，我們要確保用戶可以通過(guò)單擊複選框來(lái)切換A TODO的狀態(tài)。我們的測(cè)試環(huán)境不需要實(shí)際的人用戶，因此我們將使用jQuery生成點(diǎn)擊事件。但是，為此，我們必須將內(nèi)容添加到真實(shí)的Live DOM中。該內(nèi)容被稱為測(cè)試

夾具

。這是單元測(cè)試代碼。

請(qǐng)注意，我們?cè)俅螌odo's save（）方法固定。否則，當(dāng)我們通過(guò)模擬單擊更改todo狀態(tài)時(shí)，骨干將嘗試更新不存在的備份商店。

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

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

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

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

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

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

測(cè)試集合

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

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

）。測(cè)試用例不需要我們以前從未見過(guò)的任何功能。 >

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

視圖實(shí)現(xiàn)也很簡(jiǎn)單。它跟蹤集合中的任何添加並更新視圖。對(duì)於初始渲染（），它一次只會(huì)一次添加一個(gè)集合中的所有模型。

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

獎(jiǎng)勵(lì)測(cè)試：驗(yàn)證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，因此我們不需要任何自定義代碼來(lái)管理API交互。結(jié)果，我們不需要任何單位測(cè)試用例。在現(xiàn)實(shí)世界中，您可能不會(huì)那麼幸運(yùn)。如果您的API不符合骨幹慣例，則可能需要覆蓋或擴(kuò)展一些骨幹代碼來(lái)處理非標(biāo)準(zhǔn)API。該額外的代碼也需要單位測(cè)試。幸運(yùn)的是，即使在單元測(cè)試環(huán)境中，測(cè)試API交互也相對(duì)容易。

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

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

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

完成！

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

資源

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

>

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

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

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

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

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

>我如何在backbone.js？

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

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

在backbone.js？

>我如何在backbone.js中調(diào)試失敗的單位測(cè)試？報(bào)告確定失敗的原因。大多數(shù)測(cè)試框架都提供詳細(xì)的錯(cuò)誤消息，可以幫助您查明問(wèn)題。您還可以使用chrome devtools或node.js debugger等調(diào)試工具逐步瀏覽您的代碼並檢查變量和函數(shù)調(diào)用。

我可以在單元測(cè)試backbone.js嗎？ >是的，您可以在單元測(cè)試骨幹鏈中使用模擬和存根。模擬和存根是模擬真實(shí)對(duì)象行為的假對(duì)象。它們用於隔離系統(tǒng)的其餘部分。這使得測(cè)試更加可靠，更容易編寫。有幾個(gè)可用的庫(kù)，例如sinon.js，它們提供了創(chuàng)建和管理模擬和存根的功能。