テスト自動化ツール Gauge 用の coc extension coc-gauge を作った

8847 ワード
e2e Vim JavaScript neovim gauge Vim テキストリンク

久々の投稿です。

お仕事で e2e test を作ることになりまして、いろいろとツールを漁っていたところ、Gauge というツールに出会いました。なにやらテストを Markdown で書くことができて、仕様書のように人間が読める形でテストを書けるとのこと。なんだか Cucumber っぽい(使ったことないですけど)。

Gauge の Script(=Markdown) を書くための VSCode Plugin が公式で公開されており、普通はコレを使って開発していくのですが、やはり Vimmer としては Vim で書きたい、実行したい、デバッグしたい。というか VSCodeVim が重くて buggy でストレスたまる。

ということで coc extension coc-gauge を作りました。本記事はその紹介になります。

Gauge とは

公式より

Gauge is a light-weight cross-platform test automation tool with the ability to author test cases in the business language.

e2e test、というよりも受入テスト用のツールと言った方がいいでしょうか。テストを Markdown 形式で書くことで、人間が読めるシナリオとしてテストを書き、かつそれぞれの操作ステップの実装コードを再利用可能とするためのツールです。実装コードは JavaScript, Jave, Go, C#, Python, Ruby で書くことが可能です。

Taiko というブラウザオートメーションツールとセットになっており、e2e テストを主眼としていますが、ブラウザテストに限らず使えます。また、Taiko 以外のブラウザ自動化ツール、例えば Selenium や Playwright などを使うことも可能です。

ThoughtWorks がプロジェクトをサポートしていましたが、2020年一杯でそれが終了するとのこと。今後のプロジェクトの進め方について、GitHub に Issue が挙がっています。

coc-gauge

Gauge の Spec ファイルで入力補完を得るだけならば、coc config に language server の設定を書くだけでもできるんですが、テストの実行、デバッグができなければ VSCode の代わりにはならないということで、以下の機能を実装しました。

  • 編集中のテストの実行・デバッグ
  • Step の Rename (coc の組み込み機能だとうまく動かないので、特別に作成)
  • Step の参照箇所の一覧表示

詳しくは Readme を参照ください。

Install

npm で公開しているので、vim/nvim 上で次のコマンドを実行してください。

:CocInstall coc-gauge

キーマップ

デフォルトではキーマップは設定していないため、表に従って、次のようにキーマップしてください。

nmap <leader>rn <Plug>(coc-gauge-rename-step)

Debug

Debug には vimspector が必要なので、インストールしておいてください。

Gauge のプロジェクトルートに .vimspector.json の名で次の設定ファイルを配置してください。

{
  "configurations": {
    "run": {
      "adapter": "vscode-node",
      "configuration": {
        "request": "attach",
        "stopOnEntry": true,
        "protocol": "inspector",
        "console": "integratedTerminal"
      },
      "breakpoints": {
        "exception": {
          "all": "N",
          "caught": "",
          "uncaught": "Y"
        }
      }
    }
  }
}

上記設定後、coc-gauge の各種デバッグコマンドを実行すると vimspector が起動し、Debug が開始されます。

動画

実行
run

デバッグ
debug

Step参照箇所一覧
jump

Rename Step
rename

create-coc-extension

本機能は create-coc-extension を使って作りました。

coc extension の開発方法は、公式にもどこにも情報がまとまっていなくて、create-coc-extension がなければ本機能を作れなかったと思います。感謝。
まぁ、各種APIの情報もないので、ロジックは型情報、コメント、既存のコードを見ながら手探りで実装する必要があるんですが。。。

参考記事

最後に

今回初めて coc の拡張機能を作り、初めて npm へのパッケージ公開をしました。vim, neovim などなど、長年OSSをありがたく使わせて頂いており、こんな素晴らしいものをタダで使っていていいのかなぁと常日頃思っていたのですが、本機能を公開することで少しでも恩返しになればと思います。

私みたいなおっさん世代は、Web上で情報公開することに抵抗感を持つ人も多いと思いますが、ていうか自分がそうでしたが、何事も恐れずにまずはやってみるといいのではないでしょうか。

以上、お粗末です。