VSCodeで開いているRSpecのテストファイルをショートカットキーで実行する

## はじめに
先日、参加出来なかった[GENBA #1 〜RubyとRails開発の現場〜](https://timeedev.connpass.com/event/300473/) の資料が公開されていて、その中で`ikuma-t`さんが紹介されていた [Railsアプリをコスパよく読むための環境整備
](https://speakerdeck.com/ikumatadokoro/railsapuriwokosupayokudu-mutamenohuan-jing-zheng-bei) の中で実装されていた「テストをシュッと実行する」を拝見して自分でも取り入れたいと思い、今回実装しました。

### Monorepo（モノレポ）で実装
ほぼ上記の資料通りの実装ですが、自分の開発環境が **Monorepo** なので、ディレクトリを意識して現状にあった実装に少しだけ修正しています。自分と同じような構成で実装している方、しようとしている方の参考に少しでもなれば幸いです。

**こちらのPRが今回実装した差分になります**

https://github.com/aki366/caian-app/pull/412

### Monorepo（モノレポ）って何？
という方向けに、簡単に説明すると1つのリポジトリにサービスを構成する全てのコードを管理している管理手法です。自分のリポジトリですがREADMEに簡単にディレクトリのイメージを記載していますので良ければ参考にしてください。

https://github.com/aki366/caian-app#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90monorepo

## 実装の概要

- プロジェクトのrootディレクトリ配下に`.vscode/tasks.json`を作成
- 実装したコードが下記になります
    ```json
    // tasks.json
    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "Run RSpec current file with line",
          "type": "shell",
          // localとコンテ内のディレクトリ構成が違うため、sedコマンドで不要なディレクトリを削除
          "command": "docker compose -f docker-compose.yml exec -it app /bin/bash -c \"bundle exec rspec -fd -ff ./$(echo ${relativeFile} | sed 's|apps/backend/||'):${input:LineNumber}\"",
          "group": "test",
          "problemMatcher":[
            {
              "owner": "ruby",
              "fileLocation": [ "relative", "${workspaceFolder}" ],
              "pattern": {
                "regexp": "^rspec\\s+(.*):(\\d+)\\s+#\\s+(.*)$",
                "file": 1, "line": 2, "message": 3
              }
            }
          ]
        } ],
        "inputs": [
          {
            "id": "LineNumber",
            "type": "promptString",
            "description": "Enter the line number to run RSpec on:"
          }
        ]
    }
    ```

## 自分の環境に合わせて実装したところ

こちらがlocal環境とコンテナ内のディレクトリを合わせた箇所になります。
```json
// localとコンテ内のディレクトリ構成が違うため、sedコマンドで不要なディレクトリを削除
"command": "docker compose -f docker-compose.yml exec -it app /bin/bash -c \"bundle exec rspec -fd -ff ./$(echo ${relativeFile} | sed 's|apps/backend/||'):${input:LineNumber}\"",
```

### 長いので、それぞれ分けて解説
コンテナ内でRSpecを実行するので、`docker-compose.yml`ファイルを指定してDocker Composeコマンドを実行しています。
```json
docker compose -f docker-compose.yml
```
`-it`オプションでインタラクティブモードで実行してターミナル入力を可能にしています。`/bin/bash -c`で、Bashシェルを使用して、引き続き指定されたコマンドを実行させるようにしています。
```json
exec -it app /bin/bash -c
```
`-fd`、`-ff`がRSpecのフォーマットオプションになります。
- `-fd` (format documentation) はテストの説明を詳細に表示
- `-ff` (format failures) は失敗したテストの詳細を表示
```json
bundle exec rspec -fd -ff
```
- `${relativeFile}`はテストファイルのlocal環境のパスになりますが、コンテナ内のディレクトリに`apps/backend/`は存在しないので、`sed`コマンドで`sed 's|apps/backend/||'`として、コードで不要な文字列を空にして渡しています。
- `:${input:LineNumber}`はRSpecの行番号指定をするためのもので、VSCodeからの入力を受け取って行番号を指定して実行することができます。
```json
./$(echo ${relativeFile} | sed 's|apps/backend/||'):${input:LineNumber}\"
```

## 実行手順
ちょっと雑ではありますが、Wikiに実行手順をまとめているのでそちらをそのまま、記載します。

https://github.com/aki366/caian-app/wiki/05.-%E9%96%8B%E7%99%BA#vscode%E3%81%A7rspec%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%82%92%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC%E3%81%A0%E3%81%91%E3%81%A7%E5%AE%9F%E8%A1%8C

### 使い方
テスト実装しているファイルがあったという前提の説明です
- 実装中のテストファイルをVSCodeで開いたままにして下さい（スクショは例として`user_spec.rb`を開いています）
- VSCodeで、`cmd`+`shift`+`P`を実行
- `>Tasks: Run Task`と検索（2回目からは上位に出てくるので検索しなくて済みます）
![スクリーンショット 2023-11-19 22.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2316171/be0a5a61-afe4-d596-4413-0eb0b95f8816.png)

- Enter
- `"Run RSpec current file with line"`のタスクを選択または検索（ピン留めしておいてもいいかもしれません）
![スクリーンショット 2023-11-19 22.26.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2316171/2348ed15-bd05-c256-01fd-39dbdde07acb.png)

- Enter
- テストを実行したい行番号を入力（全部実行したい場合は１を入力）
![スクリーンショット 2023-11-19 22.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2316171/b241c6d3-882f-2770-9bcb-92142d731e53.png)

- Enter
- 自動でターミナルが開いて実行される。ターミナルに戻したい場合はEnterとかなんでも押せば閉じます
![スクリーンショット 2023-11-19 22.28.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2316171/a7293377-30d8-2a9a-32e8-26f6e981fe2c.png)

## まとめ
実行のイメージが湧いたと思いますので、この辺りでおしまいにしたいと思います。この記事が誰かの何かの役に立てれば幸いです。

### 私のこと
気が向いたらnoteにブログも書いているので、良ければ見てやって下さい。

https://note.com/aki_366

最後までお読みいただきまして、どうもありがとうございました。