elm-reactorを使った超目grep

Kyash Advent Calendar 2019 3日目のnoteです。

Kyashのエンジニア、スズキです。
最近はKyash MeetupでElmはステキですよ。なんて話をしました。
Kyash DirectではElmを利用していますよ。

そんなKyash Directのフロントエンドではvisual regression testingを行なっています。

visual regression testingとは
画像回帰テストで、画面上の見た目が意図しない形で変更されていないかチェックするようなテストです。

そんなテストを簡単に実現できる`reg-suit`を利用させてもらっています。
UIのbefore -> afterになる画像を用意するといい感じにdiffを出してくれる最高にcoolなツールです。

微妙なテキストのズレを見逃さない見事な仕事っぷり

Kyash Directでの活用

Kyash Direct上ではgithubでPRが作られるとci上で実行されてPRのコメントに画像のdiffを上げてくれます。
画像のdiffやgithubへの連携は自分で作ったものは一切なくreg-suit提供のツールを利用しています。
画像の収集に関してだけ少し妙なことをしてるので紹介していきたいと思います。

PRに対して気の利くコメントを残すreg-suit、`this report`をクリックすると差分が閲覧できます。

testのための画像収集

画像の収集はstorybookがあるとプラグインを利用してstorybook上でカタログ化されたUIコンポーネントから行えますが、elmにはstorybookのサポートがないです。
そこでelm-reactorをstorybookのようにuiカタログとして使い、e2eテストフレームワークでelm-reactor上のページをクローリングして画像の収集を行っています。

elm-reactor

elmのコンパイラのインストールをすると付いてくる開発ツールです。
ファイルエクスプローラでelmのファイルを選ぶとelmで作ったモノが動きます。storybookのようにuiカタログとして便利な機能はないですが、visual regression testing目的の画像収集では困ることには遭遇してません。今の所。

elm-reactorの様子

UIで選んだファイルの...

こんな感じのコードが...

こう見えるのじゃ

最後に

こんな感じで超目grepしてます。ちょっと要素がズレた！というのも場合によっては重要なテキストが切れてしまったり、ツールチップが見えなくなったり色々困りますよね。
そうならないようなチェックを一々自分で見るのが嫌でシュッと導入してみましたが、だんだん`reg-suit`の画面上でdiffを見るのが楽しくなってきました。
diffがでないことがPRのコメントからわかればソースコードのレビューだけで大手を振ってapproveできるので心が清らかです。