前回の記事の続き。
会社で開発中でオープンソース化していないテストツールがまたいくらか便利になったので進捗報告してみる。 ツールの概要は上の記事で説明しているけど、一言で言うと「mocha から puppeteer 叩いて express に届いたリクエストにアサーションをかける」ようなテストが楽に書ける。
前との差分
以下、前回より便利になったポイントを自慢していく。
API のカバレッジが取れるようになった
API が一度でも叩かれたかどうかを調べて網羅率を見る。 テストが一通り終わった後、こういうのが出る。
[ OK ] GET /foo/foo [ OK ] PUT /foo/foo [ OK ] GET /bar/:barId/bar [ NG ] POST /bar/:barId/bar covered 3/4
ページのカバレッジが取れるようになった
こちらはテストケースで訪問したページの網羅率を見る。 全体でどんなURLがあるかはサイト内をクローリングして調べる。
[ OK ] /#/ [ OK ] /#/config [ OK ] /#/articles [ NG ] /#/articles/(number) covered 3/4
UI のカバレッジが取れるようになった
こちらはページ内の UI をどれだけ網羅したか。
/#/articles/(number) [ OK ] #article-tilte-input [ OK ] #article-body-input [ OK ] #submit-button [ NG ] #submenu-toggle covered 3/4
テストケースに併せてモックデータを差し替え可能になった
今まで一枚岩のデータしか無かったのが、柔軟に適切なデータをサーバーから返してもらえるようになった。 これでログイン中のユーザーの権限を変えてみたり、ページネーションのテストために大量のデータを放り込める。
おかしな HTML 要素を警告するようになった
<a>
なのに href
が無いぞーだったり a11y 的によろしくないものを警告する。
まあこの辺は普通の E2E のツールにありそうな機能ではある。
記法が進化した
前回ちょっとダサかったアサーションが power-assert でいい感じになった。
it("should send fields correctly", async () => { await inputText("#signup-email-address", "a@b.c"); await inputText("#signup-password", "Passw0rd"); await inputText("#signup-user-name", "A B"); await $.click("#signup-submit"); at("POST /auth/signup", results => { assert(results.length === 1); assert(results[0].body.email_address === "a@b.c"); assert(results[0].body.password === "Passw0rd"); assert(results[0].body.user_name === "A B"); }); });
TypeScript 化した
時代は TypeScript らしいですよ。
以上
応援してもらってオープンソース化と出社のモチベーションを高めたい。