[譯]開始對Angular App進行單元測試（1）

Tikitoo 發布于2019-08-19 18:27 / 1624人閱讀

摘要：小結我們初步了解了使用來進行測試，這樣有利于我們接下來去理解使用進行單元測試翻譯中

這是一些列文章，陸續翻譯整理中...

原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/

@ Bradley Braithwaite

前言

在寫測試之前，我們還得對基礎的JS的單元測試框架和如何寫測試用例等一些問題做一個簡要的介紹。

先說說 jasmine ，它算作一個行為驅動開發(behaviour driven development,BBD)的 JavaSciprt的框架，會讓人困惑的是，它也可以用測試驅動開發(test driven development,TBD)的思想來寫測試。
BBD和TBD兩種風格會有些區別，但是使用jasmine確實可以用TBD的方式。jasmine會提供一種結構去組織你的測試以及一些函數來進行代碼輸出的斷言。究竟是TBD還是BBD實際取決于開發者自己的如何去組織自己的測試，當然下文我們僅僅用TBD來進行講解。

開始你的第一個測試

先建一個項目文件比如jasmine-test,然后粘貼下面的代碼到一個html文件中。

用瀏覽器打開該文件。界面如圖:

注意specs，它實際上指的是用例，它同樣也是BBD的專業術語之一。截下來我們先來點簡單的邏輯判斷。

describe("calculator", function () {
    it("1 + 1 should equal 2");
});

將上面的代碼粘貼到剛才的html文件中。

函數describe實際指的就是前文提到的specs（測試的邏輯分組），而函數it實際會展現這組測試。
運行結果如下圖:

由于我們實際上沒有添加測試的主體，因此狀態上方顯示的是pending,截下來我們會添加一段函數.

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(1);
});

上面的截圖，實際上反應的就測試失敗，因為1+1并不等于2。

上面出現了兩個新函數expect以及toBe，Expect代表著預期，我們將需要使用的測試放進區，然后函數會進行運行結果的斷言。而toBe呢則代表著匹配器,卡框架提供的匹配器還有很多，常用的大概有下面這些：

expect(true).toBe(true);
expect(false).not.toBe(true);
expect(1).toEqual(1);
expect("foo").toEqual("foo");
expect("foo").not.toEqual("bar");

我們再把這段代碼改成正常的。

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(2);
});

刷新瀏覽器，我們就可以看到正確的結果了。

前面我們大致了解了jasmine的基本用法，實際上測試驅動開發的的一個基本原則就是我們再寫功能的同時寫測試，花些時間去掌握這項技能有利于提升我們的工作效率的。

流程大致如圖三個部分，我們所寫的每個測試都英國是遵循這三個流程。

紅色部分:失敗的測試，有利于我們消除bug;

綠色部分：需要我們寫足夠的代碼讓我們的測試通過，透過前面的部分，我們可以了解這些bug;

黃色部分，代碼重構過程我們可以避免重蹈覆轍，并且提升安全性。

Demo

記下來我們寫一些代碼去體會上面的流程

寫一個不通過的測試

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

2.使測試通過

如果我們開始寫足夠多的代碼時候，其中一些可能類似下面：

var calculator = {
    sum: function(x, y) {
        return 2; // <-- note this is hardcoded
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

這樣做有利于我們避免代碼更多的錯誤

3.重構

在我們確保我們的邏輯正常后，我們可以測試更多用例，直到結果能夠一直和期望的一致。

var calculator = {
    sum: function(x, y) {
        return x + y;
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

小結

我們初步了解了使用jasmine來進行TBD測試，這樣有利于我們接下來去理解使用karama進行單元測試（翻譯中...）

GPU云服務器云服務器對數據進行分析單元測試對郵箱空間進行清理對數據進行統計排行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79621.html

[譯] 如何對 Angular Controller 進行單元測試

摘要：原文地址上面一篇文章簡單介紹了如何使用進行的單元測試我們用了一段簡單的代碼進行計算的測試。添加測試接下來終于到了我們的主題，添加一些單元測試給我們忽略代碼中部分，主要集中在的代碼中。原文地址：http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/@Bradley Braithwaite show...

aboutU 2019-08-21 10:53 評論0 收藏0
[譯]使用karma進行angular測試

摘要：前面我們寫過了的一篇文章開始對進行單元測試而提供了非常有用的工具去幫助我們進行的測試。接下來，會增加一些內容寫測試用例接下來我們可以開始進行測試了，我們在命令行工具里輸入下面的命令我們將下面的代碼粘貼到中去。 showImg(https://segmentfault.com/img/bVx65M); 緊隨前文如何對Angular Controller進行單元測試,但是我們也提到了前文工...

Tony 2019-08-19 18:30 評論0 收藏0
[譯] 通過 Webpack 實現 AngularJS 的延遲加載

摘要：雖然這些東西都是非常棒的，但是它們都不是實現延遲加載所必需的東西。我們通過的配置對象中的屬性就可以實現延遲加載。單元測試的技巧把改成是全局依賴并不意味著你應該從控制器中刪除它。因為在單元測試中，你只會加載這一個控制器而非整個應用模塊。原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁應用擴大，...

Zhuxy 2019-08-19 17:42 評論0 收藏0
[譯] 在 Angular 中使用 HammerJS (觸摸手勢)

摘要：是一個為應用添加觸摸手勢的非常受歡迎的庫文中將看到結合一起使用是多么的簡單原文示例是針對版本經過測試在目前最新的版本中此教程依然適用文章將以來統一代稱版本名詞滑動和類似但滑動更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構建一個頭像輪播可以 HammerJS 是一個為 web 應用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結合 HammerJS 一起使用是多么的簡單 ...

lifesimple 2019-08-20 17:29 評論0 收藏0
【譯】《精通使用AngularJS開發Web App》（一） --- 相關背景、社區、工具介紹

摘要：下一篇譯精通使用開發二原版書名第一章之道這一章主要是介紹，包括這個框架以及它背后的項目。幸運的是，擁有一個活躍的，支持度高的社區。另外，社區還為已經存在的工具箱里貢獻了許多有意思的工具。下一篇：【譯】《精通使用AngularJS開發Web App》（二）原版書名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 評論0 收藏0