亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

[譯]開(kāi)始對(duì)Angular App進(jìn)行單元測(cè)試（1）

Tikitoo / 1669人閱讀

摘要：小結(jié)我們初步了解了使用來(lái)進(jìn)行測(cè)試，這樣有利于我們接下來(lái)去理解使用進(jìn)行單元測(cè)試翻譯中

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

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

@ Bradley Braithwaite

前言

在寫測(cè)試之前，我們還得對(duì)基礎(chǔ)的JS的單元測(cè)試框架和如何寫測(cè)試用例等一些問(wèn)題做一個(gè)簡(jiǎn)要的介紹。

先說(shuō)說(shuō) jasmine ，它算作一個(gè)行為驅(qū)動(dòng)開(kāi)發(fā)(behaviour driven development,BBD)的 JavaSciprt的框架，會(huì)讓人困惑的是，它也可以用測(cè)試驅(qū)動(dòng)開(kāi)發(fā)(test driven development,TBD)的思想來(lái)寫測(cè)試。
BBD和TBD兩種風(fēng)格會(huì)有些區(qū)別，但是使用jasmine確實(shí)可以用TBD的方式。jasmine會(huì)提供一種結(jié)構(gòu)去組織你的測(cè)試以及一些函數(shù)來(lái)進(jìn)行代碼輸出的斷言。究竟是TBD還是BBD實(shí)際取決于開(kāi)發(fā)者自己的如何去組織自己的測(cè)試，當(dāng)然下文我們僅僅用TBD來(lái)進(jìn)行講解。

開(kāi)始你的第一個(gè)測(cè)試

先建一個(gè)項(xiàng)目文件比如jasmine-test,然后粘貼下面的代碼到一個(gè)html文件中。

用瀏覽器打開(kāi)該文件。界面如圖:

注意specs，它實(shí)際上指的是用例，它同樣也是BBD的專業(yè)術(shù)語(yǔ)之一。截下來(lái)我們先來(lái)點(diǎn)簡(jiǎn)單的邏輯判斷。

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

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

函數(shù)describe實(shí)際指的就是前文提到的specs（測(cè)試的邏輯分組），而函數(shù)it實(shí)際會(huì)展現(xiàn)這組測(cè)試。
運(yùn)行結(jié)果如下圖:

由于我們實(shí)際上沒(méi)有添加測(cè)試的主體，因此狀態(tài)上方顯示的是pending,截下來(lái)我們會(huì)添加一段函數(shù).

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

上面的截圖，實(shí)際上反應(yīng)的就測(cè)試失敗，因?yàn)?b>1+1并不等于2。

上面出現(xiàn)了兩個(gè)新函數(shù)expect以及toBe，Expect代表著預(yù)期，我們將需要使用的測(cè)試放進(jìn)區(qū)，然后函數(shù)會(huì)進(jìn)行運(yùn)行結(jié)果的斷言。而toBe呢則代表著匹配器,卡框架提供的匹配器還有很多，常用的大概有下面這些：

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

我們?cè)侔堰@段代碼改成正常的。

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

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

前面我們大致了解了jasmine的基本用法，實(shí)際上測(cè)試驅(qū)動(dòng)開(kāi)發(fā)的的一個(gè)基本原則就是我們?cè)賹懝δ艿耐瑫r(shí)寫測(cè)試，花些時(shí)間去掌握這項(xiàng)技能有利于提升我們的工作效率的。

流程大致如圖三個(gè)部分，我們所寫的每個(gè)測(cè)試都英國(guó)是遵循這三個(gè)流程。

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

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

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

Demo

記下來(lái)我們寫一些代碼去體會(huì)上面的流程

寫一個(gè)不通過(guò)的測(cè)試 
describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});
2.使測(cè)試通過(guò)

如果我們開(kāi)始寫足夠多的代碼時(shí)候，其中一些可能類似下面：

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);
    });

});

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

3.重構(gòu)

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

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);
    });

});
小結(jié)

我們初步了解了使用jasmine來(lái)進(jìn)行TBD測(cè)試，這樣有利于我們接下來(lái)去理解 使用karama進(jìn)行單元測(cè)試（翻譯中...）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79621.html

相關(guān)文章

  • [譯] 如何對(duì) Angular Controller 進(jìn)行單元測(cè)試

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

    aboutU 評(píng)論0 收藏0

  • [譯]使用karma進(jìn)行angular測(cè)試

    摘要：前面我們寫過(guò)了的一篇文章開(kāi)始對(duì)進(jìn)行單元測(cè)試而提供了非常有用的工具去幫助我們進(jìn)行的測(cè)試。接下來(lái)，會(huì)增加一些內(nèi)容寫測(cè)試用例接下來(lái)我們可以開(kāi)始進(jìn)行測(cè)試了，我們?cè)诿钚泄ぞ呃镙斎胂旅娴拿钗覀儗⑾旅娴拇a粘貼到中去。 showImg(https://segmentfault.com/img/bVx65M); 緊隨前文如何對(duì)Angular Controller進(jìn)行單元測(cè)試,但是我們也提到了前文工...

    Tony 評(píng)論0 收藏0

  • [譯] 通過(guò) Webpack 實(shí)現(xiàn) AngularJS 的延遲加載

    摘要：雖然這些東西都是非常棒的，但是它們都不是實(shí)現(xiàn)延遲加載所必需的東西。我們通過(guò)的配置對(duì)象中的屬性就可以實(shí)現(xiàn)延遲加載。單元測(cè)試的技巧把改成是全局依賴并不意味著你應(yīng)該從控制器中刪除它。因?yàn)樵趩卧獪y(cè)試中，你只會(huì)加載這一個(gè)控制器而非整個(gè)應(yīng)用模塊。 原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁(yè)應(yīng)用擴(kuò)大，...

    Zhuxy 評(píng)論0 收藏0

  • [譯] 在 Angular 中使用 HammerJS (觸摸手勢(shì))

    摘要：是一個(gè)為應(yīng)用添加觸摸手勢(shì)的非常受歡迎的庫(kù)文中將看到結(jié)合一起使用是多么的簡(jiǎn)單原文示例是針對(duì)版本經(jīng)過(guò)測(cè)試在目前最新的版本中此教程依然適用文章將以來(lái)統(tǒng)一代稱版本名詞滑動(dòng)和類似但滑動(dòng)更快速無(wú)粘滯左滑右滑上滑下滑頭像輪播簡(jiǎn)介我們將構(gòu)建一個(gè)頭像輪播可以 HammerJS 是一個(gè)為 web 應(yīng)用添加觸摸手勢(shì)的非常受歡迎的庫(kù),文中,將看到 Angular 結(jié)合 HammerJS 一起使用是多么的簡(jiǎn)單 ...

    lifesimple 評(píng)論0 收藏0

  • 【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（一） --- 相關(guān)背景、社區(qū)、工具介紹

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

    ddongjian0000 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Tikitoo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<