前言
- 前提是客戶端已配置好 node 環(huán)境
- 對于自動化的一些深入知識可以移步至 前端自動化測試解決方案探析 | ouvenzhang的博客 進行了解
- 使用
npm如果慢的話可以使用 淘寶 NPM 鏡像 因為一個是請求的國外的服務器乌逐，一個是國內(nèi)淘寶的服務器氨菇，詳情可至上面的官網(wǎng)了解
//在命令行終端輸入下面的命令即可使用 cnpm 來替代 npm 裝包了
npm install -g cnpm --registry=https://registry.npm.taobao.org
karma npmjs 網(wǎng)址
A simple tool that allows you to execute JavaScript code in multiple real browsers.
The main purpose of Karma is to make your test-driven development easy, fast, and fun.
一個簡單的工具，允許你在多個真正的瀏覽器中執(zhí)行JavaScript代碼。
karma 的主要目的是讓你的測試驅動開發(fā)簡單缚窿、快速和有趣。
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
Jasmine 是一個用于測試JavaScript代碼的行為驅動開發(fā)框架容达。它不依賴于任何其他JavaScript框架衙猪。它不需要DOM。它有一個干凈的哑芹、明顯的語法炎辨，這樣您就可以輕松地編寫測試。
PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS是無頭的WebKit腳本與JavaScript API聪姿。它支持各種Web標準：DOM處理碴萧、CSS選擇器、JSON末购、畫布和SVG破喻。-- 百度翻譯
簡單點來說他就是一個無頭（無界面）的瀏覽器，除了沒有界面與常用的谷歌瀏覽器之類的基本功能一樣盟榴。
實例 Demo
- 以管理員身份運行命令行終端軟件低缩，我這里是 windows 系統(tǒng)，使用的是下載的 cmder （較好用）曹货，當然你也可以選擇 cmd.exe
- 接著在命令行終端中輸入命令咆繁，溫馨提示：終端不同可能會導致命令不同，這里我列舉的只是 cmder 終端上的命令
//進入桌面
cd Desktop
//創(chuàng)建項目文件夾
mkdir karmatest
//進入文件夾中
cd karmatest
image.png
- 在終端中初始化項目
//項目初始化 之后會有一系列的讓你輸入項目信息的提示一直回車就可以了
npm init
image.png
- 初始化之后找到桌面的 karmatest 文件夾并在編輯器中打開顶籽，這里我使用的是 sublime text 玩般，剛才在命令行中將項目初始化后，項目中會自動新增一個 package.json 項目配置文件
image.png
- 接著在項目文件夾中新建目錄結構如下
src -> index.js
這個 spce 后綴是必須要加的礼饱，這樣 karma 才能正確的識別
test -> index.spce.js
image.png
- 在編輯器 sublime text 中編輯文件
index.js
//給全局增加一個 add 方法
window.add = function (num) {
return num + 1;
}
index.spce.js
//語法詳情參照 https://jasmine.github.io/
describe("簡單的測試加法", function() {
it("簡單的測試加法", function() {
expect(window.add(1)).toBe(2);
});
});
- 在命令行中輸入命令
//全局安裝 karma 坏为，第一次安裝之后就不用再安裝了究驴，可以直接寫下面的命令
npm install -g karma
//在當前項目中安裝 karma
npm install karma --save
//karma 初始化 初始化成功之后會在項目中新建一個 karma.conf.js 文件
karma init
//下面是提示語中需要 使用鍵盤的上下鍵去選擇的選項結果 選中之后直接回車即可
jasmine
no
PhantomJS
回車
回車
回車
no
- 在編輯器 sublime 中編輯上面初始化時在項目中生成的 karma.conf.js 文件
//17~18行
files: [
'./src/*.js',
'./test/*.spce.js'
],
//64行
//這個設置為 true 會在執(zhí)行之后自動退出
singleRun: true,
- 在命令行中輸入命令
//安裝 karma 使用的 jasmine 斷言庫
npm install jasmine --save
//安裝 karma 使用的 phantomjs 無頭瀏覽器
npm install phantomjs --save
- 裝完之后可查看項目中的 package.json 文件，可以確定上面裝的包確實安裝成功了
image.png
- 接著在命令行中運行 karma
karma start
- 命令行中輸出如下證明執(zhí)行成功了
image.png
- 這個時候可以故意修改 index.spce.js 文件將其中之前寫的結果 2 修改為 3
image.png
- 再在命令行中運行 karma
karma start
- 命令行會輸出如下：報了一個錯誤匀伏，而且把錯誤的具體位置也輸出了
image.png
- 將修改的 3 再改回來 運行 karma
karma start
- 也還是執(zhí)行成功了洒忧，整個 Demo 到此結束
image.png
總結
- 這只是一個很基本的單元測試的實例，希望自己可以走前端邁向全棧的路上够颠，越走越遠熙侍。
