Running rspec tests with keyboard shortcuts in VS Code

#ruby #testing #vscode

Running tests is an important part of the code-writing process, but typing the same commands over and over again can slow down your workflow.

Earlier this year, I was pair-programming with a new friend at the virtual Ruby For Good conference, and he showed me a trick that blew my mind -- he used keyboard shortcuts for running rspec tests! He even had a shortcut that only ran the test he was currently working on.

I can't believe this hadn't occurred to me sooner.

I recently started a new job, so I decided to set up similar keyboard shortcuts in VS Code. Here's how I did it:

Create User Tasks

Tasks are a feature in VS Code that allow you to automate common workflows, like linting, building, or even testing! As with most features in VS Code, it is possible to build and customize your own tasks.

Open the "User Tasks" settings

Open the "all commands" menu by pressing Cmd + Shift + P
Type "Open User Tasks," and select the menu item that comes up
This should open a file called tasks.json, which should have the following format:

{
  "version": "2.0.0",
  "tasks": [ ... ] // <-- There'll be some stuff in this array
}

Add a new task to your User Tasks

Copy and paste the following code into the tasks array in your tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "(ruby) run all tests",
      "type": "shell",
      "command": "bundle exec rspec",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
      }
    },
  ]
}

This task has the following fields:

label: The name of the task
type: Telling VS Code to run this task as a shell command
command: The command to run in the shell (in this case, run all the rspec tests in this project)
presentation: This is a list of options determining how the output of the task is displayed. Read more about those in the VS Code Tasks Documentation.

Add the rest of your tasks to your User Tasks

In the previous step, you added one task, but you can add as many as you want! I have three tasks:

bundle exec rspec: Run all the rspec tests in the project
bundle exec rspec <filename>: Run all the tests in a file
bundle exec rspec <filename>:<line number>: Run the test at a specific line number

Here's what my tasks.json file looks like:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "(ruby) run all tests",
      "type": "shell",
      "command": "bundle exec rspec",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
      }
    },
    {
      "label": "(ruby) run tests",
      "type": "shell",
      "command": "bundle exec rspec ${relativeFile}",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
      }
    },
    {
      "label": "(ruby) run current test",
      "type": "shell",
      "command": "bundle exec rspec ${relativeFile}:${lineNumber}",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
      }
    },
  ]
}

You'll notice that these two new commands use the variables relativeFile and lineNumber. These will be replaced with the relative path to the current open file and the line number where your cursor is located.

Using these variables allows you to run all the tests in the file you currently have open, or even the specific test that you currently have your cursor on!

You can read more about these variables in VS Code's Variable Reference.

Add keyboard shortcuts

Once you've added new User Tasks, you can create custom shortcuts to run them whenever you want.

Open the Keyboard Shortcuts settings

Open the "all commands" menu by pressing Cmd + Shift + P
Type "Open Keyboard Shortcuts (JSON)," and select the menu item that comes up
This should open a file called keybindings.json

Create new shortcuts

Here's what my keybindings.json file looks like:

[
  {
    "key": "cmd+shift+0",
    "command": "workbench.action.tasks.runTask",
    "args": "(ruby) run all tests"
  },
  {
    "key": "cmd+shift+9",
    "command": "workbench.action.tasks.runTask",
    "args": "(ruby) run tests"
  },
  {
    "key": "cmd+shift+8",
    "command": "workbench.action.tasks.runTask",
    "args": "(ruby) run current test"
  }
]

For each keyboard shortcut, the key option determines which keys you have to press to activate the shortcut. I've opted for Cmd + Shift + 0, Cmd + Shift + 9, and Cmd + Shift + 8, but you should pick key combinations that feel comfortable to you and don't interfere with any existing keyboard shortcuts you like to use.

Use the args option to specify which task gets run with each shortcut. Make sure this value matches the label you used when you created the User Tasks.

Profit

Now, when you use one of your custom shortcuts, VS Code will open a new terminal tab and run your tests for you! No more typing out a long command or remembering exactly which line number your test is on.

This has saved me so much time in the past couple weeks, and I hope it saves you time, too!