摘要:單元測(cè)試我們可以將其分成兩類獨(dú)立多帶帶測(cè)試與測(cè)試工具集。工具集還有更多,這一切我們將在單元測(cè)試組件與指令單元測(cè)試逐一說明。那么下一篇,我們將介紹如何使用進(jìn)行單元測(cè)試。
本文將探討如何搭建測(cè)試環(huán)境、以及Angular測(cè)試工具集。
測(cè)試環(huán)境絕大部分都是利用Angular Cli來創(chuàng)建項(xiàng)目,因此,默認(rèn)已經(jīng)集成我們所需要的npm包與腳本;當(dāng)然,如果你是使用自建或官網(wǎng) quickstart 的話,需要自行安裝;但所有核心數(shù)據(jù)全都是一樣的。
Angular單元測(cè)試我們可以將其分成兩類:獨(dú)立多帶帶測(cè)試與Angular測(cè)試工具集。
Pipe與Service適為獨(dú)立多帶帶測(cè)試,因?yàn)樗鼈冎恍枰?new 實(shí)例類即可;同樣是無法與Angular組件進(jìn)行任何交互。
與之相反就是Angular測(cè)試工具集。
測(cè)試框架介紹Jasmine
Jasmine測(cè)試框架提供了編寫測(cè)試腳本的工具集,而且非常優(yōu)秀的語義化,讓測(cè)試代碼看起來像是在讀一段話。
Karma
有測(cè)試腳本,還需要Karma來幫忙管理這些腳本,以便于在瀏覽器中運(yùn)行。
Npm 包如果你非要折騰,那么最簡單的辦法便是通過Angular Cli創(chuàng)建一個(gè)新項(xiàng)目,然后將以下Npm包復(fù)制到您折騰的項(xiàng)目中。
"jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0"
那么,我們重要還是看配置腳本部分。
配置腳本我們核心是需要讓 karma 運(yùn)行器運(yùn)行起來,而對(duì)于 Jasmine,是在我們編寫測(cè)試腳本時(shí)才會(huì)使用到,因此,暫時(shí)無須過度關(guān)心。
我們需要在根目錄創(chuàng)建 karma.conf.js 文件,這相當(dāng)于一些約定。文件是為了告知karma需要啟用哪些插件、加載哪些測(cè)試腳本、需要哪些測(cè)試瀏覽器環(huán)境、測(cè)試報(bào)告通知方式、日志等等。
karma.conf.js
以下是Angular Cli默認(rèn)提供的 karma 配置文件:
// Karma configuration file, see link for more information // https://karma-runner.github.io/0.13/config/configuration-file.html module.exports = function(config) { config.set({ // 基礎(chǔ)路徑(適用file、exclude屬性) basePath: "", // 測(cè)試框架,@angular/cli 指Angular測(cè)試工具集 frameworks: ["jasmine", "@angular/cli"], // 加載插件清單 plugins: [ require("karma-jasmine"), require("karma-chrome-launcher"), require("karma-jasmine-html-reporter"), require("karma-coverage-istanbul-reporter"), require("@angular/cli/plugins/karma") ], client: { // 當(dāng)測(cè)試運(yùn)行完成后是否清除上文 clearContext: false // leave Jasmine Spec Runner output visible in browser }, // 哪些文件需要被瀏覽器加載,后面會(huì)專門介紹 `test.ts` files: [ { pattern: "./src/test.ts", watched: false } ], // 允許文件到達(dá)瀏覽器之前進(jìn)行一些預(yù)處理操作 // 非常豐富的預(yù)處理器:https://www.npmjs.com/browse/keyword/karma-preprocessor preprocessors: { "./src/test.ts": ["@angular/cli"] }, // 指定請(qǐng)求文件MIME類型 mime: { "text/x-typescript": ["ts", "tsx"] }, // 插件【karma-coverage-istanbul-reporter】的配置項(xiàng) coverageIstanbulReporter: { // 覆蓋率報(bào)告方式 reports: ["html", "lcovonly"], fixWebpackSourcePaths: true }, // 指定angular cli環(huán)境 angularCli: { environment: "dev" }, // 測(cè)試結(jié)果報(bào)告方式 reporters: config.angularCli && config.angularCli.codeCoverage ? ["progress", "coverage-istanbul"] : ["progress", "kjhtml"], port: 9876, colors: true, // 日志等級(jí) logLevel: config.LOG_INFO, // 是否監(jiān)聽測(cè)試文件 autoWatch: true, // 測(cè)試瀏覽器列表 browsers: ["Chrome"], // 持續(xù)集成模式,true:表示瀏覽器執(zhí)行測(cè)試后退出 singleRun: false }); };
以上配置基本上可以滿足我們的需求;一般需要變動(dòng)的,我想是測(cè)試瀏覽器列表了,因?yàn)閗arma支持所有市面上的瀏覽器。另外,當(dāng)你使用 Travis CI 持續(xù)集成時(shí),啟動(dòng)一個(gè)禁用沙箱環(huán)境Chrome瀏覽器會(huì)讓我們少了很多事:
customLaunchers: { Chrome_travis_ci: { base: "Chrome", flags: ["--no-sandbox"] } }
有關(guān)karma config文件的所有信息,請(qǐng)參與官網(wǎng)文檔。
test.ts
在編寫 karma.conf.js 時(shí),我們配置過瀏覽器加載的文件指向的是 ./src/test.ts 文件。作用是為了引導(dǎo) karma 啟動(dòng),代碼也簡單許多:
// This file is required by karma.conf.js and loads recursively all the .spec and framework files import "zone.js/dist/long-stack-trace-zone"; import "zone.js/dist/proxy.js"; import "zone.js/dist/sync-test"; import "zone.js/dist/jasmine-patch"; import "zone.js/dist/async-test"; import "zone.js/dist/fake-async-test"; import { getTestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; // Unfortunately there"s no typing for the `__karma__` variable. Just declare it as any. declare var __karma__: any; declare var require: any; // Prevent Karma from running prematurely. __karma__.loaded = function () {}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. // 所有.spec.ts文件 const context = require.context("./", true, /.spec.ts$/); // And load the modules. context.keys().map(context); // Finally, start Karma to run the tests. __karma__.start();
一切就緒后,我們可以嘗試啟動(dòng) karma 試一下,哪怕無任何測(cè)試代碼,也是可以運(yùn)行的。
如果是Angular Cli那么 ng test。折騰的用 node "./node_modules/karma-cli/bin/karma" start
最后,打開瀏覽器:http://localhost:9876,可以查看測(cè)試報(bào)告。
簡單示例既然環(huán)境搭好,那么我們來寫個(gè)簡單示例試一下。
創(chuàng)建 ./src/demo.spec.ts 文件。.spec.ts為后綴這是一個(gè)約定,遵守它。
describe("demo test", () => { it("should be true", () => { expect(true).toBe(true); }) });
運(yùn)行 ng test 后,我們可以在控制臺(tái)看到:
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.031 secs / 0.002 secs)
或者瀏覽器:
1 spec, 0 failures demo test true is true
不管怎么樣,畢竟我們已經(jīng)進(jìn)入Angular單元測(cè)試的世界了。
Angular測(cè)試工具集普通類諸如Pipe或Service,只需要通過簡單的 new 創(chuàng)建實(shí)例。而對(duì)于指令、組件而言,需要一定的環(huán)境。這是因?yàn)锳ngular的模塊概念,要想組件能運(yùn)行,首先得有一個(gè) @NgModule 定義。
工具集的信息量并不很多,你很容易可以掌握它。下面我簡略說明幾個(gè)最常用的:
TestBed
TestBed 就是Angular測(cè)試工具集提供的用于構(gòu)建一個(gè) @NgModule 測(cè)試環(huán)境模塊。當(dāng)然有了模塊,還需要利用 TestBed.createComponent 創(chuàng)建一個(gè)用于測(cè)試目標(biāo)組件的測(cè)試組件。
異步
Angular到處都是異步,而異步測(cè)試可以利用工具集中 async、fakeAsync 編寫優(yōu)雅測(cè)試代碼看著是同步。
工具集還有更多,這一切我們將在[Angular單元測(cè)試-組件與指令單元測(cè)試]()逐一說明。
那么下一篇,我們將介紹如何使用Jasmine進(jìn)行Angular單元測(cè)試。
happy coding!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/87039.html
摘要:整個(gè)系列差不多涵蓋或滿足日常單元測(cè)試開發(fā)所需的知識(shí),當(dāng)然,像前面說的,你也認(rèn)同單元測(cè)試的重要性,否則看這系列并無任何意義因?yàn)椋也⒉幻枋鋈魏斡嘘P(guān)于開發(fā)技巧。 Angular單元測(cè)試在所有前端框架當(dāng)中不要太爽了,但是要全面說好它,還真需要很長的篇幅,因?yàn)楦鞣N測(cè)試方式就如同在寫一份Angular入門級(jí)開發(fā)一樣。因此,我打算使用一個(gè)系列來說明。 當(dāng)然,一切的前提是,你同我一樣認(rèn)同單元測(cè)試的重...
摘要:四結(jié)論本章幾乎所有的內(nèi)容在單元測(cè)試經(jīng)常使用到的東西特別是異步部分,三種不同異步方式并非共存的,而是需要根據(jù)具體業(yè)務(wù)而采用。否則,你會(huì)發(fā)現(xiàn)真難寫單元測(cè)試。自此,我們算是為寫單元測(cè)試打下了基礎(chǔ)。 以下是我假定那些極少或壓根沒寫單元測(cè)試的人準(zhǔn)備的,因此,會(huì)白話解釋諸多概念性問題,同時(shí)會(huì)結(jié)合 Jasmine 與之對(duì)應(yīng)的方法進(jìn)行講解。 一、概念 Test Suite 測(cè)試套件,哪怕一個(gè)簡單的類,...
摘要:簡介模塊為單元測(cè)試提供模塊定義加載注入等支持。為使用了的應(yīng)用提供單元測(cè)試的偽后臺(tái)。根據(jù)提示進(jìn)行設(shè)置即可。將該文件保存為,測(cè)試時(shí)需按順序?qū)y(cè)試項(xiàng)目文件及依賴文件引入。最后在請(qǐng)求后執(zhí)行就會(huì)立即執(zhí)行完成請(qǐng)求。參考官方單元測(cè)試學(xué)習(xí)筆記 Angular-mock簡介 Angular-mock模塊為angular單元測(cè)試提供模塊定義、加載、注入等支持。輔助Karma、Jasmine等JS測(cè)試工具來...
摘要:前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測(cè)試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期:Web 現(xiàn)狀分析與優(yōu)化策略...
摘要:感謝王下邀月熊分享的前端每周清單,為方便大家閱讀,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列,并以年月為單位進(jìn)行分類,具體內(nèi)容看這里前端每周清單年度總結(jié)與盤點(diǎn)。 感謝 王下邀月熊_Chevalier 分享的前端每周清單,為方便大家閱讀,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列,并以年/月為單位進(jìn)行分類,具...
閱讀 3400·2021-11-24 10:30
閱讀 3269·2021-11-22 15:29
閱讀 3706·2021-10-28 09:32
閱讀 1255·2021-09-07 10:22
閱讀 3336·2019-08-30 15:55
閱讀 3619·2019-08-30 15:54
閱讀 3494·2019-08-30 15:54
閱讀 2833·2019-08-30 15:44