簡單易用、穩定的前端單元測試工具:totoro

jopen 10年前發布 | 29K 次閱讀 totoro 單元測試

簡單易用、穩定的前端單元測試工具:totoro
簡單易用、穩定的前端單元測試工具。

0. 特性

  • 在真實的瀏覽器中運行
  • 支持所有的測試框架
  • 支持調試
  • 自動測試覆蓋率
  • 足夠健壯,可用于實戰

1. 安裝

node 版本要求

>= 0.10.12

從 npm 安裝

$ npm install totoro -g

從 Github 安裝

可以體驗開發中的最新功能

$ git clone git@github.com:totorojs/totoro.git
$ cd totoro
$ sudo npm install -g

2. 快速上手

簡單起見,我們已經為你準備好了一個可供測試的例子:

注意:測試前請先指定測試服務

$ totoro config --server-host={{yourServerHost}}

默認為阿里巴巴集團的內部測試服務,你也可以 啟動自己的測試服務

$ git clone git@github.com:totorojs/totoro.git
$ cd totoro/examples/simple
$ totoro

如無意外,你將看到如下結果:

簡單易用、穩定的前端單元測試工具:totoro

  • 小圓點為即時進度反饋。成功顯示為綠色圓點,失敗顯示為紅色小叉。
  • 單個瀏覽器測試結果中包含運行時間和測試覆蓋率。
  • 測試成功的瀏覽器會以綠色字符輸出顯示,失敗或超時的瀏覽器會以紅色字符顯示,并輸出錯誤詳情。

推薦的項目目錄結構

project-dir/
  dist/
  src/ or lib/
  tests/ or test/
    runner.html or index.html

其中:

  • 你需要在 project-dir/ 目錄運行 totoro 命令
  • dist/ 為編譯或打包后的輸出目錄
  • src/ 或 lib/ 為源碼目錄
  • tests/ 或 test/ 為測試目錄,其中的 runner.html 或 index.html 都能被識別為 runner

3. 命令行配置項

3.1 totoro

--runner

測試 runner。接受本地文件和 URL。

默認:自動查找當前目錄,teststest 子目錄下的 runner.htmlindex.html 均可被識別。

--code

方便的 debug 途徑。接受 單個 表達式、 JS 文件和 URL。totoro 將返回指定表達式計算的值或 JS 文件中所有 console.log() 輸出結果。例如:

$ totoro --code document.getElementsByClassName
$ totoro --code examples/code/code.js  // 我們真的準備了這個例子,試試看!

注意: --code--runner 是互斥的選項!

--adapter

測試框架的適配器,用于發送測試報告。接受內置關鍵字、本地路徑和 URL。

已支持的內置關鍵字有:mocha, jasmine

自定義適配器寫法可參考 static/adapters/mocha.js

默認:如果 --runner 指定的是本地路徑,則會先查看 runner 所在的位置是否有 totoro-adapter.js;如果沒找到或者 --runner 指定的是 url 則 totoro-server 會自動掃描 --runner 的內容嘗試查找匹配的內置關鍵字。

--browsers

指定要測試的瀏覽器,多個以逗號分隔。例如:

chrome,firefox,safari,ie  //不指定版本
ie/6,ie/7,ie/8,ie/9  //指定版本

默認:自動選取測試服務端可用的桌面瀏覽器。

--timeout

客戶端超時時間,單位為分鐘。

默認:5

--server-host

測試服務 host。

默認:阿里的內部host

--server-port

測試服務 port。

默認:9999

--client-root

如果 --runner 是一個本地文件,totoro 在測試時會起一個臨時的 HTTP 服務,該選項這個服務的根目錄,接受相對路徑和絕對路徑。

默認:根據 --runner--adapter 進行猜測。

--skip-coverage

跳過代碼覆蓋率檢查.

默認:false

--verbose

顯示更詳細的信息:

  • debug 日志
  • 如果啟用測試代碼覆蓋率, 將會顯示沒有覆蓋到行的詳細信息.

默認:false

3.2 totoro list

顯示當前可用的測試瀏覽器。配置項可通過 totoro list -h 查看。

簡單易用、穩定的前端單元測試工具:totoro

3.3 tororo config

讀取或者設置全局配置。配置項可通過 totoro config -h 查看。

讀取全局配置

$ totoro config

設置全局配置

totoro config --server-host=10.15.52.87 --server-port=''

將 server-host 設置為 10.15.52.87,將 server-port 置空。

4. 配置文件

除了命令行配置項和全局配置,你還可以為你的項目建立名為 totoro-config.json 的配置文件,放在項目根目錄下。

這 3 種配置方式的優先級為:命令行 > 配置文件 > 全局配置 > 內置默認配置。

以下為一個配置文件的例子:

{
  "browsers": ["chrome", "ie/10.0"],
  "serverHost": "127.0.0.1",
  "serverPort": 9999
}

5. 關于

totoro 的名字來自于宮崎駿導演的奇幻動畫電影《龍貓》。

項目主頁:http://www.baiduhome.net/lib/view/home/1392617617928

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!