ジンジャー研究室

長めのつぶやき。難しいことは書きません。

puppeteer + express + mocha で快適 TDD している話(続編)

前回の記事の続き。

jinjor-labo.hatenablog.com

会社で開発中でオープンソース化していないテストツールがまたいくらか便利になったので進捗報告してみる。 ツールの概要は上の記事で説明しているけど、一言で言うと「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 らしいですよ。

以上

応援してもらってオープンソース化と出社のモチベーションを高めたい。