2018 年 12 月
第 33 卷 12
程式設計師雜談 - 如何使用 MEAN：端對端
藉由Ted Neward |2018 年 12 月
.jpg "Ted Neward")
歡迎回來，同樣地，MEANers。
最後一個片段中，我討論了單元測試，確認用戶端上的程式碼正常運作。不過，大部分的時間單位測試的後端互動，以建立更具確定性的一份測試結果; 模擬的外觀這是時間的很有用，但不是敷使用，大幅。有時候，您真的需要確定前端通訊有效地與後端，特別是當兩者都是在 flux 中時，對 JSON 交換兩者之間，比方說，每個可為正確，但一次您在單元測試啟動實際透過網路傳遞資料，它們不同意，並會中斷。沒有人想，特別是因為 （如以上三年的經驗與每位開發人員可以告訴您） 它將只會發生於您的所作所為前面高出許多人比您的組織圖中的示範。
這是省的 Angular 的端對端 (e2e) 測試，其中個別測試每個元件的單元測試看起來和，e2e 測試來測試整個系統看起來的隔離與系統的其餘部分。這可讓 e2e 測試更不可靠，因為它取決於許多因素，但它也是與單元測試，長期一樣重要。
回到開頭
因為使用的單元測試的討論，Angular 會嘗試確定該測試可從您的原創應用程式開頭的第一個應用程式時，建置就地一些基本樣板產生 （假設您使用 Angular命令列介面 [CLI] 工具）。E2e 目錄中，專案的根目錄包含必要的程式碼來執行端對端測試，所以我趕快來玩解惑後:"npm 執行 e2e"啟動的端對端測試，和不同的單元測試 」 工具中，於 e2e 則是透過測試執行然後將會中止。這裡的用意是，應該接近-持續確認項目正在"「 小 」，而且應該執行端對端測試，就可以驗證任何迴歸快顯出來時，才在開發期間執行的單元測試工具。
預設的測試只是要確認包含 scaffold 的應用程式的 「 歡迎應用程式 ！ 」 訊息，因此修改 AppComponent 的 title 屬性是一個簡單的第一次變更 （請記住，從方法後，我們第一次啟動時，屬性位於 app.component.ts）"SpeakerApp 」 並檢查若要查看其顯示。（別忘了變更單元測試中 app.component.spec.ts，順便一提。） 進行變更，請確定您的單元測試階段，然後再次執行"npm 執行 e2e"，並記下失敗。嗯，嘗試要注意失敗 — 瀏覽器將會關閉，但您已執行"npm"的 [主控台] 視窗會反白顯示 （以紅色標示） 測試失敗。
因此下, 一個步驟中，然後，若要修改的端對端測試，以反映您對程式碼所做的變更。
頁面和物件
端對端測試使用 ProtractorJS framework (在protractortest.org) 來執行瀏覽器中的 「 自動化 」 模式，以及程式碼 Protractor 位於 app.po.ts 檔案的磁碟機。到目前為止，，"ts"後置詞應該都很熟悉，但是"po"表示 page 物件，也就是 Web 的端對端測試環境中一般慣用句。Page 物件是，也就是物件，表示可能在指定的網頁上的所有動作，因此 app.po.ts 頁面會代表應用程式的首頁上，根據命名慣例。果然，如果您看看它在編輯器中，您會看到：
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
請注意，此處的程式碼不執行任何測試，這實際上是提供端對端測試，而不需要其他的公用程式角色的程式碼的組合。NavigateTo 方法可簡化將瀏覽器中，此頁面，並使用 CSS 選取器來尋找出對應至應用程式根元件 DOM 將 H1 項目 getParagraphText 方法只擷取過的標題文字。事實上，這可能是一種命名的方法 — 真的應該呼叫 getTitleText，現在讓我們來進行該項變更，然後執行實際的測試程式碼中相對應的變更。（請注意，如果您 monkey 瀏覽器的標題，透過 < 標題 > HTML 標記，您可能想要重新思考方法名稱時，一次，但因為它不是生產應用程式，我不要透過它進行壓力）。
現在在 e2e 目錄中，開啟另一個檔案 app.e2e-spec.ts:
import { AppPage } from './app.po';
describe('full-app App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagrahText()).toEqual('Welcome to app!');
});
});
您可以在這裡看到測試函式，並請注意，測試如何 AppPage 執行個體設定，就會引發，瀏覽至，，然後測試加入至段落文字是否符合預期的格式，具有描述方法且其一般 Jasmine。我知道我需要進行兩項變更，若要將文字變更為 「 歡迎到 SpeakerApp，"，才能反映變更標題中的使用已重新命名的 getTitleText 方法，而另一個。一旦這些變更，並叫用"npm 執行 e2e"，所有項目為綠色一次。
Protractor 101
Protractor 網站具有完整文件集，但幸好大多 Protractor API 很自我記錄，至少從高階觀點來看。Protractor 首頁上有一個相對較簡單的端對端測試執行的 「 待辦事項 」 清單應用程式，示範如何尋找的項目頁面上，使用任一個的 CSS 選取器的範例 (element(by.css(...)))、 模型物件 (element(by.model(...)))，或即使抓取透過 Angular 的重複項目的集合 (element.all(by.repeater(...))) 可用，則來計算和個別檢查，視。Protractor 教學課程也會提及項目可由 HTML 的識別項 (by.id(...)) 和繫結，這表示項目繫結至指定的變數 (by.binding(...));這些所有統稱為 ElementFinders Protractor 文件中，如果需要更多詳細資料。
一旦 e2e 測試設定啟動並執行，不過 （和預設 Angular CLI scaffolding 強式階段在放棄，假設它提供的起點），撰寫 e2e 測試是一種撰寫任何其他測試相同： 排列、 作用、 判斷提示。假設這是一個 Javascript 為基礎的世界，當然您可以變更，如果您選擇如此，但假設您使用 CLI 建立現成的相同工具，您已經在撰寫一組完整的 e2e tes 為止，您使用的測試架構ts。
含有一提的是一件事： 您是否使用頁面物件完全是您個人的選擇，但坦白說，指定該 e2e 測試通常更多的 「 巨集 」 測試 （亦即，您通常不會先測試只在一個頁面或元件，但一整個系列的步驟） 和 （或)使用者接受度樣式測試它是否通常十分有幫助頁面物件可讓測試更方便閱讀及 — 特別是，維護。請記住，通常是一個通常會在使用者示範期間會轉移那些事的 UI，而且頁面物件的方法能盡量減少 「 劇烈變動 」，因為使用者變更 e2e 測試可能會發生。
將 Server 位元
假設我建議執行端對端測試表示使用伺服器和執行 e2e 測試應該是很常見的做法，可能是個不錯的主意，請確定執行 e2e 測試所也會引發的伺服器設定。否則人類需記得要執行某項目之前執行 e2e 測試，，而且這通常是一種配方可以長期來看的挫折。若要這樣做，一個方法當然是撰寫批次檔或 PowerShell 指令碼來執行;另一種方法是直接編輯 package.json 檔案問題的"e2e"部分，將產生的 Angular 啟動 API 伺服器的本機版本的正確的殼層命令。（它不是真是完美的方法，但它現在可做）。 如此一來，您都保持一致使用 Angular CLI 慣例。
假設伺服器組件位於名為 「 伺服器 」 的子目錄 (且您使用我寫了回於 2017 年 10 月的 LoopbackJS 伺服器 (msdn.com/magazine/mt826349)，則您只需要取得 「 npm 執行 」 問題 」節點的伺服器 」 命令，將會放入伺服器目錄和問題 」 節點。，"即足以啟動 Loopback 位元：
{
"name": "full-app",
// ...
"scripts": {
"ng": "ng",
"start": "ng server",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "start node server & ng e2e"
},
// ...
}
「 節點伺服器 」 前面的"start"是告訴殼層拋出到個別的命令視窗; 的節點伺服器這會有保留執行之後，e2e 測試都完成，但它現在就夠了 [伺服器] 視窗的副作用。（如果這真的建立不少，取代兩個命令的批次檔或 PowerShell 指令碼，而且就在最佳-的-同時-領域的領域）。 現在，伺服器已啟動並執行，並在用戶端可以開始對其進行呼叫。
在論證上，這個值是真正的端對端測試，e2e 測試應該操作對共用的伺服器，但就回不具決定性的測試中的問題。其他可能不同意，但我偏好本機伺服器，透過遠端/共用一個這類的測試。
總結
順便一提，雖然這實際上應該不是撰寫本文之際，現在需要考量 Angular 小組剛推出 Angular 7。這表示此資料行已看到至少六個重要的版本的 Angular 自開始，並假設沒有任何我們建立任何重大重寫，這將使我們採用的任何長時間執行的應用程式的 Angular 特定緩和層級而且希望解決幾個朝向採用 Angular 貴公司或小組的考量。
在邏輯記錄中，此資料行標示 30 的 MEAN 堆疊上撰寫的文章和雖然沒有明顯更多我無法深入探討，資料行名稱是 「 程式設計師雜談，「 不 」 表示程式設計人員，「 就可以開始著手。Angular 的非經常性存取和所有項目，但這無法感知，以及有許多其他有趣的事情，能瀏覽： 新C#新功能F#功能，以及或許我甚至將探討在 CLR 中或在 JavaScript 引擎 （的內部運作方式V8，其中隨附 NodeJS，或是 Chakra，Microsoft 的 V8 版本） 的位元。之前結束，不過，我們是 gracious 的取用者，而且說，感謝您，Angular，過去幾年，我們會看到您周圍的所有好記憶。寫出好作品中，且我們會先喝快顯通知給您，當您叫用 Angular 10 和 15 到 20，依此類推。現在，不過，費用也和 smooth 航行。
一如往常，快樂的程式碼 ！
Ted Neward是西雅圖的 polytechnology 顧問、 演說家和 mentor，目前正在處理工程總監以及在開發人員關係協理Smartsheet.com。他已撰寫了無數的文章，撰寫與合著過十幾個書籍，並在世界各地發表演說。與他連絡ted@tedneward.com或閱讀他的部落格blogs.tedneward.com。
非常感謝下列技術專家檢閱這篇文章：Garvice Eakins (Smartsheet.com)