Travis CI | 替專案申請認證，讓把關一目了然 feat. coveralls
今天禮拜六，就來說些稍微輕鬆一點的主題吧！筆者這幾天都在撰寫測試，除了讓專案內的 Component 更容易維護外，也是為了之後要學習重構所使用，當然，測試所產生的覆蓋率報告等資料都能讓自己更明白專案是否有問題或測試狀況，但當有天你開發了什麼產品或是作品，需要讓其他人也知道專案的運行狀況或開發時有沒有好好做測試呢？
這時候就會需要一個認證標章
標章的樣子就如下方，可能大家已經看過很多次，但卻不曉得怎麼產生的，本文會使用 Travis CI 取得 build 及 coverage 的認證！
Travis CI
Travis CI 的服務主打著與 GitHub 做連結，並輕鬆部署測試專案，一開始會想說是不是需要設定一堆有的沒的，才能夠使用這個功能，但其實不需要，只要透過 GitHub 的帳號登入 Travis CI ，就可以選擇要監聽的專案甚至是某個分支，當有專案被 Push 到該分支時， Travis CI 會自動運行設定好的指令，例如各位平常在做的那些 npm run test ，其實流程差不多也都說完了，接下來直接實作吧！
登入 Travis - CI
進入到 Travis CI 的首頁後就會看到以下畫面，直接以 Sign up with GitHub 做登入：
然後很抱歉當時手速太快沒有截到畫面，總之連結 GitHub 登入後會看到這個畫面：
下一步直接點選 Activate 選擇 GitHub 內的專案加入監聽：
上方的第一個選項為直接加入所有專案的監聽，第二個選項能夠自行選擇 GitHub 的專案，選擇的專案會被列在下方，如果要取消可以點選專案旁的叉叉，決定好後就可以按下 Approve & Install 結束這個步驟。
那 Right now ，在專案 Push 到 GitHub 之前，還得需添加一個 Travis CI 的設定文件 .travis.yml 到專案中：
內部的設定也很易懂：
- language ：用什麼語言寫的，除了
node_js外還有python等。 - node_js ：設定版本，這裡可以設定多個，確認在不同版本下專案是否都能正常執行。
- install：安裝依賴套件，直接下
npm install。 - script： 任何想要在 push 上後執行的指令都可以在這裡設定，一樣可以輸入多個， Travis CI 會一行一行執行，然後需要注意的是，這裡執指令必須先在
package.json的scripts中設定，然後直接透過npm run執行，最後再提醒一點，如果這裡沒設定要指令，預設是npm run test哦。
新增完後就直接 add 、 commit 、 push 了，此時雖然是推送到 GitHub 上，但是可以發現 Travis CI 的網站也默默地有了動作：
進入 Running 頁籤中會看到正在做執行的專案，下方的 Job log 則會有類似命令提示字元的視窗，可以看目前執行狀況：
當跑完成功的那一刻，畫面上就會出現該專案最後一次推送到 GitHub 的 Commit ，且專案名稱右邊會產生出第一個要取得的認證標章：
但如果失敗，就會顯示紅色的錯誤，像下圖就是第一次設定的時候沒有指定好 node_js 的版本，所以運行失敗：
所有的歷史紀錄都會列在 Build History 中，下圖灰色的 Commit 是被取消的：
因為那一次的 .travis.yml 內被我加上了 webpack-dev-server 結果就一直開著無法結束，只好手動取消，如果大家有遇到類似的狀況，取消的按鈕在這邊：
接下來得到標章後怎麼把它貼到 GitHub 的專案上呢？只需要在標章上點一下，就會跳出一個彈跳視窗，可選擇用哪些方式呈現：
上方選擇的是 Markdown ，因此只要將下面產生的語法複製起來，貼到專案中的 README.md上，就可以讓其他人在專案上看到這是認證過可以運行的，且因為它是連結，所以點選還會跳到 Travis CI 的網站上顯示該專案在 push 時運行、測試了什麼！
如果之後要繼續添加專案，可以從 Settings 的頁面中點選 Mange repositories on GitHub 進入設定專案的畫面：
coveralls
取得了 build 的認證勳章後，在後頭等著的是覆蓋率，覆蓋率算是在測試時滿重要的指標，因為它代表了程式有沒有正確的被測試到，如果能夠讓使用者看見測試時的覆蓋率是完整的，那用起來也會放心許多。
而 coveralls 便是我們取得 coverage 的途徑，首先進入 coveralls 的官方網站，並點選左邊的 「 GET STARTED FOR FREE 」：
下個畫面會詢問你要用哪一種方式做登入，這裡與 Travis CI 不同，可以選擇三種遠端儲存庫做登入，但我們要配合 Travis CI 使用，所以依舊點選 「 GITHUB SIGN UP 」：
點選後的畫面這次有截到了，會彈出一個視窗，詢問是否能夠取得在 GitHub 中的權限，確認過沒問題就點選「 Authorize lemurheavy 」：
順利登入後，左邊就會出現側邊選單，選擇第二個「 ADD PEROS 」，頁面會列出 GitHub 中所有的專案，在專案名稱的左邊會有一個開關，可以在那裡將它開啟，狀態也會變成 ON ：
開啟後，可以點回選單欄第一項「 REPOS 」，確認開啟的專案是否有出現在該頁面中：
之後回到專案中需要 install coveralls 的套件：
npm install coveralls -save-devpackage.json 的部分要在 scripts 中加上一條指令，：
要注意前方的 jest — coverage 為 Jest 產生覆蓋率報告的指令，不是使用 Jest 的話，記得改成正在用來產生覆蓋率的套件指令，而後方的 ./coverage/lcov.info 要對應到覆蓋率報告的路徑，如果各位專案中的路徑和我不同，那就會有問題。
最後回到 .travis.yml ，在 script 後加上 after_success ，意思是在 build 成功後執行，並在該寫下剛剛在 package.json 中設定的指令：
after_success:
- npm run coverage一切都設置後就可以將專案重新 Push 上 GitHub ，看看 build 是否正常，而 Build 完成後，又會將覆蓋率報告交給 coveralls ，因此最後在 coveralls 內的專案會出現最後一次 Push 的測試覆蓋率結果及認證勳章：
再往下滑一點，會有該一次的 commit 覆蓋率的詳細資料：
而這次產生的勳章則是點選框框內右上方的 EMBED ：
直接把 Markdown 語法複製下來貼到 README.md 中，就能讓你辛辛苦苦寫的測試結果讓大家看見，然後該標章和 Build 一樣也是個超連結，只要點下就能跳到 coveralls 中查看該專案的覆蓋率測試報告，所以一切都是假不了的！
