給庫加上酷炫的小徽章 & ava、codecov、travis 示例

給庫加上酷炫的小徽章 & ava、codecov、travis 示例

GitHub 不少開源庫都會有幾個酷炫的小徽章，好比：

這些是怎麼加上去的呢？

Shields.io

首先這些徽章能夠直接去 shields.io 網站自動生成。

好比：

就是 version 這一類裏的一種圖標，選擇 npm 一欄填入包名，而後複製成 Markdown 內容，就會獲得諸如：

![npm (tag)](https://img.shields.io/npm/v/io-memcached/latest)

直接粘貼在 .md 文件中就可使用了，最後展示的就是這個圖標。

固然還有其餘不少徽章都任由你挑選，不過某些徽章是須要額外進行一些配置，好比這裏的 (自動構建經過) 和 (測試覆蓋率)。

AVA

談到測試覆蓋率必須先有單元測試，本文使用 ava 做爲示例，ava 是一個 js 測試庫，強烈推薦你使用它。

一、安裝

npm init ava

二、使用示例

編寫 test.js 文件：

import test from 'ava'
import Memcached from '../lib/memcached';


test.before(t => {
    const memcached = new Memcached(['127.0.0.1:11211'], {
        pool: {
            max: 2,
            min: 0
        },
        timeout: 5000
    });
    t.context.memcached = memcached;
});

test('memcached get/set', async t => {
    try {
        t.plan(3);

        const key = 'testkey';
        const testdata = 'testest\r\n\stese';
        const r = await t.context.memcached.set(key, testdata);
        t.is(r, 'STORED');

        const g = await t.context.memcached.get(key, testdata);
        t.is(g, testdata);

        const dr = await t.context.memcached.del(key);
        t.is(dr, 'DELETED');
    } catch (error) {
        t.fail(error.message);
    }
});

test('unit test title', t => {
    t.pass();
});

說明：

• ava 自己就支持不少 es6 及以上的特性，你不用另外再使用 babel 。
• test.before 就是一個鉤子，你能夠經過 context 向後傳遞變量並使用。
• test('title', t => {}) 函數構造咱們的單元測試，每項測試的名稱能夠本身定義，使用很是方便，多個 test 之間是併發執行的，若是你須要依次執行則使用 test.serial()。
• t.plan() 聲明瞭每項測試中應該有幾回斷言。
• t.is() 則是進行斷言判斷。
• t.fail() 聲明單項測試不經過。
• t.pass() 聲明單項測試經過。

固然這裏只是展現了不多的幾個用法，更多詳細的內容看官方文檔。

coverage

單元測試有了，可是尚未測試覆蓋率，爲此咱們還須要 nyc 。

npm install --save-dev nyc

修改 package.json 文件:

{
    "scripts": {
        "test": "nyc ava"
    }
}

獲取測試覆蓋率時會生成相關的文件，咱們在 .gitignore 中忽略它們便可:

.nyc_output
coverage*

當咱們再執行 npm test 時，其就會執行單元測試，而且獲取測試覆蓋率，結果相似於:

$ npm test

> nyc ava


  4 tests passed

--------------|----------|----------|----------|----------|-------------------|
File          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------|----------|----------|----------|----------|-------------------|
All files     |    72.07 |    63.37 |    79.49 |    72.07 |                   |
 memcached.js |    72.59 |    64.37 |    74.19 |    72.59 |... 13,419,428,439 |
 utils.js     |       68 |    57.14 |      100 |       68 |... 70,72,73,75,76 |
--------------|----------|----------|----------|----------|-------------------|

Codecov

測試覆蓋率也有了，但這只是本地的，咱們還不能生成 這種徽章。

爲此，本文選擇了 codecov 平臺，咱們須要使用 GitHub 帳號登陸 codecov 並關聯咱們的 repository 庫，同時咱們須要生成一個 token 令牌以便後續使用。

安裝 codecov :

npm install --save-dev codecov

在 package.json 文件中增長一個上報測試覆蓋率的腳本:

{
    "scripts": {
        "report-coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov"
    }
}

上報測試覆蓋率的結果給 codecov 是須要權限的，這裏的權限須要配置環境變量 CODECOV_TOKEN=<token> ，token 就是剛剛在 codecov 平臺上設置的令牌，而後執行 npm run report-coverage 纔會成功。

Travis-ci

本文使用 travis-ci 來作持續集成，一樣的你須要使用 GitHub 帳號登陸 travis-ci 並關聯咱們的 repository 庫。

編寫 .travis.yml 配置文件:

language: node_js
node_js:
  - "12"

sudo: required

before_install: sudo apt-get install libevent-dev -y

install:
  - wget -O memcached.tar.gz http://memcached.org/files/memcached-1.5.20.tar.gz
  - tar -zxvf memcached.tar.gz
  - cd memcached-1.5.20
  - ./configure && make && sudo make install
  - memcached -d

script:
    - npm ci && npm test && npm run report-coverage

• language : 聲明語言環境，這裏的 node_js 還聲明瞭版本。
• sudo : 聲明在 CI 的虛擬環境中是否須要管理員權限。
• before_install : 安裝額外的系統依賴。
• install : 示例中另外安裝了 memcached 並在後臺啓動，由於本文的測試須要。
• script : 聲明 CI 執行的腳本命令。

因爲咱們在 travis-ci 上執行 npm run report-coverage 向 codecov 上報測試覆蓋率時須要其權限，所以還須要在 travis-ci 的 Settings 中設置環境變量 CODECOV_TOKEN 。

最後，當咱們向 GitHub 庫中提交了新的內容後，就會觸發 CI 流程，虛擬化環境、安裝依賴、執行命令等等，CI 經過後就能夠獲得 徽章了。

結語

shields.io 徽章有多種，根據你的須要進行相應的配置便可，本文使用了 codecov 和 travis-ci 做爲示例，可是還有不少其餘的平臺任由你選。