GAミント至上主義

Web Monomaniacal Developer.

mochaとsupertestを使ってexpressとHeadless Chromeを使ったアプリのテストを書く

Headless Chrome(以下HC)を使ったPDFサーバーのテストを書いた。

github.com


HCが別プロセスのため非同期処理などではまり面倒だったため、外からHTTPリクエストを投げるテストにした。結合テスト
だいぶ雑だけど今まで手でたたいていたのに比べれば効率化できたともう。
GitHub - visionmedia/supertest: Super-agent driven library for testing node.js HTTP servers using a fluent API

supertestとmochaを使う。

npm install mocha supertest

package.json

//省略
  "dependencies": {
    "body-parser": "^1.18.3",
    "connect-timeout": "^1.9.0",
    "debug": "^3.1.0",
    "express": "^4.16.3",
    "mocha": "^5.2.0",
    "morgan": "^1.9.0",
    "npm": "^6.4.0",
    "puppeteer": "^1.7.0",
    "supertest": "^3.1.0"
  },
//省略

supertestをrequireした関数request にexpressのappを渡してもいいけど、URLを渡せばリクエストを投げて、ステータスコードとか各種ヘッダーなどのレスポンスをexpectできる。

test/requests.js

const request = require('supertest')
const SERVER_URL = process.env.HCEP_TEST_SERVER_URL || 'http://localhost:8000'
const TAREGT_URL = process.env.HCEP_TEST_TAREGT_URL ||'https://www.google.com'
const HTML_TEST_STRINGS = '<html>ok</html>'
console.log('SERVER_URL:', SERVER_URL)
console.log('TAREGT_URL:', TAREGT_URL)

describe('requests routes', (done) => {
  req = request(SERVER_URL);
  it('Health Check GET /hc', async () => {
    await req.get('/hc')
      .expect(200, 'ok', done)
  })
  it('GET / with no url', async () => {
    await req.get('/')
      .expect(400, 'get parameter "url" is not set', done)
  })
  it('GET / with url ' + TAREGT_URL, async () => {
    await req.get('/?url=' + TAREGT_URL)
      .expect('Content-Type', 'application/pdf')
      .expect(200, done)
  })
  it('POST / html=' + HTML_TEST_STRINGS, async () => {
    await req.post('/')
      .send('html=' + encodeURI(HTML_TEST_STRINGS))
      .expect('Content-Type', 'application/pdf')
      .expect(200, done)
  })
  it('GET /screenshot with url ' + TAREGT_URL, async () => {
    await req.get('/screenshot?url=' + TAREGT_URL)
      .expect('Content-Type', 'image/png')
      .expect(200, done)
  })
  it('POST /screenshot html='+ HTML_TEST_STRINGS, async () => {
    await req.post('/screenshot')
      .send('html=' + encodeURI(HTML_TEST_STRINGS))
      .expect('Content-Type', 'image/png')
      .expect(200, done)
  })
})

変換サーバーという都合上、レスポンスボディの多くはPDF、PNGなどのバイナリなので文字列チェックは行えず、とりえあず面倒なのでcontent typeだけ見てる。

今後出力サイズの変更機能をテストしたくなったらPDFを読むライブラリなどを使わなければいけないだろうか。

テストの仕方は、まずhcep-pdf-serverのDockerを起動した状態で
execで直接叩くか、

sudo docker exec {container id} mocha

一度bashで入ってから叩くのもできる

sudo docker ecec -it {container id} bash

Nodeクックブック

Nodeクックブック

Vue.js + Reactもくもく会@東銀座#43に参加8/21 Vueのデザインフレームワーク調査

個人開発のため、もくもく会を探していたところ、超近所でぴったりなテーマがあったので参加。

medpeer.connpass.com

やること

Ubuntuが入った古いレッツノートにVue.jsの開発環境構築

個人開発用のVueのUIフレームワークを選定する

以下作業中のメモ

Ubuntu18.04のノートPCに環境づくり

nodeやyarnの最新版インストール

vueコマンドのパスが通ってない → この記事で解決
yarn global addしたパッケージのパスを通す

個人アカウントでFirebaseプロジェクト作成

Atomインストール

Atom Vue系のプラグイン追加

デザインフレームワーク探し
まとめ記事がいっぱいでてくる

The best Vue.js Frameworks - Made with Vue.js
Vue.js いろいろまとめ
25+ Best Vue.js Frameworks » CSS Author
21 Top Vue.js UI Libraries For Your App – Hacker Noon

個人的重要ポイント
あんまり機能はいらない。
サイズ小さい方がいい
Notificationをクリックでイベントできるのないか

Framework7 Vue
単体で存在しているもののVue版
なんかすごく高機能 覚えるの大変そう
スワイプで移動とかリロードとかネイティブに近いのがついてる。いらない

N3 - N3 components built with Vue.js
シンプル Elementと似ててちょっと物足りない

Buefy: lightweight UI components for Vue.js based on Bulma
Bulma min+zipで60KB
ボタンがHTMLのbuttonタグにCSSがついてるだけとか

at-ui.github.io
AT UI

他の汎用UIフレームワークのVue版はサイズや機能が多くて個人開発には向かないかも。
Vue専用に限ってしまってよさそう

結論

有名どころはコンポーネントや使い勝手にそんなに大きな違いはなさそう
大きな違いはCSS系(SASS、LESS、Stylus等)と、スポンサー、ユーザーの国・ドキュメントやコミュニティの言語に偏りがあること

自分でがっつりカスタマイズしないのであれば、利用者が多いやつでよさそう

仕事終わりの2時間すわりっぱですごい疲れた

ヘッドレスChromeを使ったPDF変換サーバーをGoogle App Engineに対応させた

yagishでも使っているHeadless Chromeを使ったHTML→PDF変換サーバーhcep-pdf-server。

github.com
これまでDockerコンテナだけだったけど、Google App Engineでも同一コードで動くようにいろいろ変えた。
まだ実運用はしてないのでベータ版。
現在テストで使っているapp.yamlも同梱したのでそのままデプロイできる。

詳しくは前回の記事
uyamazak.hatenablog.com

シンプルなアプリケーションだけど、まだJSのコード知識が少なさを感じる。
現状美しくはないけど動いているので、処理には手をつけられていない。