SauceLabsのバッジを自作した

![](http://soysauce.berabou.me/u/59798/pixel.svg)

使用できるURLは2パターンあります。
## [http://soysauce.berabou.me/u/user.svg](http://soysauce.berabou.me/u/59798.svg)
  ユーザー名。`user`が行った最新のテスト結果を取得して、バッジを生成します。

## [http://soysauce.berabou.me/u/user/session.svg](http://soysauce.berabou.me/u/59798/pixel.svg)

セッション名。`user`が行った`session`の最新のテスト結果を取得して、バッジを生成します。

# 動機

[前回の記事](http://qiita.com/59naga/items/b7a6c5674196181798a6#saucelabs%E3%82%B9%E3%83%86%E3%83%83%E3%82%AB%E3%83%BC)で、SauceLabs公式が配布しているバッジは、__１アカウントごとに１つだけ作れる__ことに触れました。つまり、無料アカウントであれば、１プロジェクトのみバッジを生成できます。

しかし、バンバンテスト書いて、バンバンZuulでブラウザ互換性をチェックして、バンバン公開したい場合、このアカウントごと、という制約が面倒になります。

## APIを使う
[SauceLabsAPI](https://docs.saucelabs.com/reference/rest-api/#get-jobs)が公開されており、以下のURLで、バッジ生成の手がかりになるjsonを取得できます。

```bash
$ curl "https://saucelabs.com/rest/v1/user/jobs?name=session&full=true&limit=1"
```

上記であれば、`user`の`session`テストの最新1件が返ります。

```json
[
  {
    "browser_short_version": "5.1",
    "video_url": "https://saucelabs.com/jobs/8154b870a05b49e1a94f80828111ba7d/video.flv",
    "creation_time": 1431806251,
    "custom-data": null,
    "browser_version": "5.1.",
    "owner": "user",
    "id": "8154b870a05b49e1a94f80828111ba7d",
    "record_screenshots": true,
    "record_video": true,
    "build": null,
    "passed": true,
    "public": "public",
    "assigned_tunnel_id": null,
    "status": "complete",
    "log_url": "https://saucelabs.com/jobs/8154b870a05b49e1a94f80828111ba7d/selenium-server.log",
    "start_time": 1431806251,
    "proxied": false,
    "modification_time": 1431806317,
    "tags": [],
    "commands_not_successful": 2,
    "name": "session",
    "end_time": 1431806317,
    "error": null,
    "os": "Linux",
    "breakpointed": null,
    "browser": "android"
  }
]
```

前述の`user`が`"owner"`に、`sessoin`が`"name"`に入ります。`"passed"`は`true`または`false`、テスト中か、異常終了した場合は`null`になります。つまり、緑か赤、あるいは灰色です。

# Express + request + cheerio
SauceLabs バッジの自作には Node.js を使用しました。大まかな流れは

 * GETを[Express](https://github.com/strongloop/express)でパースする[^1]
 * パースした内容を、SauceLabsAPIに[request](https://github.com/request/request)で問い合わせる[^2]
 * テスト結果が無造作に流れてくるので、最新のものだけに抽出する[^3]
 * [cheerio](https://github.com/cheeriojs/cheerio)でSVGをレンダリング。バッジを生成する[^4]

> SVGのタグリファレンスは、DEFGHI1977氏の[svg要素の基本的な使い方まとめ](http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm)がたいへん参考になりました。

[^1]: https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L20-L35
[^2]: https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L37-L56
[^3]: https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L57-L72
[^4]: https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L91

自作バッジは[soysauce](https://www.npmjs.com/package/soysauce)という名前で公開していますが、これはExpressのmiddlewareとして使用できます。

```bash
$ npm install coffee-script --global
$ npm install express soysauce
$ coffee app.coffee
```
```coffeescript:app.coffee
express= require 'express'
soysauce= require 'soysauce'

app= express()
app.use soysauce.middleware()
app.listen 8080
```

`htpp://localhost:8080/user.svg`にアクセスすると、`user`のバッジを生成できます。