跟我一起基於Karma搭建一個測試環境(下)

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"More automated"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有心的小夥伴，肯定已經在我們的測試工程中的 coverage 下發現了些許端倪。lcov格式下生成的內容已經是一個可以在browser中打開的覆蓋率測試報告了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，每次只能手動來打開，肯定不是長久之計。攻城獅嘛，不偷懶怎麼能行。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡單的分析一波 coverage/lcov-report 下的內容，都是靜態資源文件。那麼，我們只要增加一個靜態資源服務就好了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"腦海中瞬間出現以下選型："}]},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用 NodeJs "},{"type":"text","marks":[{"type":"bgcolor","attrs":{"color":"#817E81","name":"black"}}],"text":" "},{"type":"text","marks":[{"type":"color","attrs":{"color":"#ffffff","name":"user"}},{"type":"bgcolor","attrs":{"color":"#817E81","name":"black"}},{"type":"strong"}],"text":"http"},{"type":"text","marks":[{"type":"bgcolor","attrs":{"color":"#817E81","name":"black"}}],"text":" "},{"type":"text","text":" 模塊 的 "},{"type":"text","marks":[{"type":"italic"}],"text":"createServer"},{"type":"text","text":" 服務"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"藉助 Express 或者 Koa 的 "},{"type":"text","marks":[{"type":"italic"}],"text":"static 中間件"},{"type":"text","text":" "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"使用 Nginx 對 coverage 目錄進行代理"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"使用 webpack 的 webpack-dev-server"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"能坐着就不站着，能躺着絕不坐着。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"方案 1 "},{"type":"text","text":"要自己從零 去實現 一個 static ，有些麻煩"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"方案 2 "},{"type":"text","text":"要引入 Express 和Koa 及其配套插件，爲了一個靜態服務 引入這麼些龐然大物，得不償失"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"方案 3 "},{"type":"text","text":"理由同上"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然我們之前有用過 webpack，那就要把他的能力再榨取一些。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安裝 webpack-dev-server"}]}]}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add webpack-dev-server -D\n\nor\n\nnpm install --save-dev webpack-dev-server"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"抽離 karma.confi.js 中的 webpack 部分爲獨立的webpack.config.js文件"}]}]}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\nmodule.exports = {\n mode: 'development,\n devtool: 'source-map',\n ++ devServer: {\n \t\t// 支持熱更新\n \thot: true,\n \tport: 3000,\n \thistoryApiFallback: true,\n \topen: true,\n \tcompress: false,\n \t\t// coverage/lcov-report 是 karma.confi.js 中的 instanbul 的 lcov 報告生成位置 \n \tcontentBase: path.join(__dirname, 'coverage/lcov-report');\n \t},\n module: {\n rules: [{\n test: /\\.js?$/,\n use: {\n loader: 'babel-loader'\n }\n }]\n }\n };"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意粘貼時刪除上文中的 ++, 此處表示當前行爲新增內容"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"package.json中加入這行 script"}]}]}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" \"scripts\": {\n \"init-karma\": \"karma init\",\n \"test\": \"karma start ./karma.conf.js\",\n ++\"reporting\": \"webpack-dev-server --config webpack.config.js\"\n }"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意粘貼時刪除上文中的 ++, 此處表示當前行爲新增內容"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此可以通過執行命令看看效果了"}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn test\n\nor\n\nnpm run test"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新開一個同路徑的terminal 窗口"}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn reporting\n\nor\n\nnpm run reporting"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/05/0504b037e27b93a4166d9b7e2628c43b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲我們在webpack-dev-server中配置了hot 開關，所以覆蓋率報告也出一同更新。"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實完全可以把 terminal 中的覆蓋率和測試錯誤報告 全部用 html 展示輸出，目前沒有找到現成的輪子，後續考慮手動擼一個適配當前框架的karma-report-plugin"}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Get your own codecov for your lib"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/75/750dfd423adbb6463349caca5b187f21.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們在 npm 或着 github 上經常會看這種類似的小徽章。有這些徽章的項目，b格就是不一樣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那我們開始 codecov 的集成"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安裝 codecov 依賴"}]}]}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add codecov -D\n\nor\n\nnpm install --save-dev codecov"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"註冊"},{"type":"link","attrs":{"href":"https://codecov.io/","title":""},"content":[{"type":"text","text":"codecov"}]},{"type":"text","text":" & 添加倉庫 獲取 CODECOV_TOKEN"}]}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/28/28988014b684018ee09c7503918e31b4.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/12/12ed70f1c7efef74677698a5870e3804.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"},{"type":"underline"},{"type":"strong"}],"text":"這個 CODECOV_TOKEN 很重要！！！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"編輯 package.json 並添加 script"}]}]}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\"codecov\": \"export CODECOV_TOKEN= YOUR_CODECOV_TOKEN && codecov\"\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"YOUR_CODECOV_TOKEN 處替換成你的 倉庫專用 CODECOV_TOKEN"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 codecov.io 中，從你當的倉庫的settings 中獲取 Badge，並在你自己項目的 README 中添加小徽章"}]}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e4/e482017a2520a68fa5080d7bd60b8753.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時會得到一個覆蓋率爲 unknown。距離成功已經不遠了"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/db/db9b8d12f6cc8280099fc024d0ee10e1.png","alt":null,"title":"","style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"border"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"執行命令"}]}]}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn codecov\n\nor\n\nnpm run codecov"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"等待 codecov 上傳完成之後，刷新下你的 git 倉庫頁面 (或者 本地重新開啓 markdown 預覽),就能得到一個有 具體 rate 值的徽章了"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/29/2984c9382ab7831791622d913822580b.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"常見的小圖標有以下幾類："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ci 流程的通過情況："}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/features/actions","title":""},"content":[{"type":"text","text":"Git-Action"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://travis-ci.com/","title":""},"content":[{"type":"text","text":"TravisCI"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://circleci.com/","title":""},"content":[{"type":"text","text":"CircleCi"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"測試覆蓋率"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://coveralls.io/","title":""},"content":[{"type":"text","text":"coveralls"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://codecov.io/","title":""},"content":[{"type":"text","text":"codecov"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下載量"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"npm downloads"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你還可以通過 "},{"type":"link","attrs":{"href":"https://shields.io/","title":""},"content":[{"type":"text","text":"shields"}]},{"type":"text","text":" 這個網站 在 README中添加自己喜歡的圖標。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"別看徽章小，它背後代表的是開發者對整個開發流程規範化的重視。能成功構建、代碼覆蓋率高的項目，"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"纔是良好的項目。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"置於如何配置CI，我就不在這裏說了。前人有好多上乘質量的文章，還有CI工具官網的hellow world。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相信這些都會對你有所幫助。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Summary"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此，基於Karma的測試環境已經初具雛形了。當然這只是前端工具鏈中的一個環節，在與其他環節對接的時候，還是有很多的問題需要去面對和解決的。一個工具的搭建不僅僅是簡單的拼裝，還要考慮模塊之間的配合，考慮基於未來的拓展。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後希望這篇文章對你有用。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Last end"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"搬運時間......"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本系列文章相關的代碼 "},{"type":"link","attrs":{"href":"https://github.com/jay0815/coverage-test/tree/browserify","title":""},"content":[{"type":"text","text":"browserify版倉庫"}]},{"type":"text","text":" "},{"type":"link","attrs":{"href":"https://github.com/jay0815/coverage-test-webpack/","title":""},"content":[{"type":"text","text":"webpack版倉庫"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"阮一峯老師寫的CI的科普文傳送門: "},{"type":"link","attrs":{"href":"http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html","title":""},"content":[{"type":"text","text":"git-actions"}]},{"type":"text","text":" "},{"type":"link","attrs":{"href":"http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html","title":""},"content":[{"type":"text","text":"Travis CI"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}