Skip to content

Commit

Permalink
feat(testing): Unify VSCode debug config (#4117)
Browse files Browse the repository at this point in the history 
For a long time, we've had the following TODO in our VSCode `launch.json` (debug config) file:

```
// TODO: these are all alike save the package, so figure out how to make that variable
```

which was there because we had an ever-expanding number of nearly identical configurations, one per package. Each time we wanted to debug the tests in a new package, we had to copy and paste and make a new PR to get it on `master`. It was inefficient and frankly kind of a pain.

When the need for yet another package's tests to be debugged came up, rather than continue the madness, I finally answered that TODO. This does a few things to make that happen:

- Add an `inputs` section to the debug configuration, to allow more than the standard values in the config to be dynamic. - Include a command for reading the one part of the config that has been different per config entry - the package name - off of the open test file.
- Use that command in the now-unified debug config.
- Add the VSCode extension[1] which enables the input command to the list of recommended extensions, and a note about it to `launch.json`.
- Add a "Debugging Tests" section to `CONTRIBUTING.md` explaining how to use the debugger.

There's also a small amount of cleanup done to both the newly-unified config entry and the one other remaining one (which runs nextjs integration tests).

[1] https://marketplace.visualstudio.com/items?itemName=augustocdias.tasks-shell-input
  • Loading branch information
@lobsterkatie
lobsterkatie authored Nov 4, 2021
1 parent 8f51ef7 commit 9f1374d
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 113 deletions.
6 changes: 5 additions & 1 deletion .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"augustocdias.tasks-shell-input"
],
}
150 changes: 38 additions & 112 deletions .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,150 +3,76 @@
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
// TODO: these are all alike save the package, so figure out how to make that variable
"inputs": [
{
"id": "getPackageName",
"type": "command",
"command": "shellCommand.execute",
"args": {
"command": "echo '${file}' | sed s/'.*sentry-javascript\\/packages\\/'// | grep --extended-regexp --only-matching --max-count 1 '[^\\/]+' | head -1",
"cwd": "${workspaceFolder}" ,
// normally `input` commands bring up a selector for the user, but given that there should only be one
// choice here, this lets us skip the prompt
"useSingleResult": true
}
}
],
"configurations": [

// @sentry/core - run a specific test file in watch mode
// must have file in currently active tab when hitting the play button
// Run a specific test file in watch mode (must have file in currently active tab when hitting the play button).
// NOTE: If you try to run this and VSCode complains that the command `shellCommand.execute` can't be found, go
// install the recommended extension Tasks Shell Input.
{
"name": "Debug unit tests - just open file",
"type": "node",
"cwd": "${workspaceFolder}/packages/${input:getPackageName}",
"request": "launch",
"cwd": "${workspaceFolder}/packages/core",
"name": "Debug @sentry/core tests - just open file",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--watch",
// this makes the output less noisy (and at some point in the past seemed necessary to fix... something)
"--runInBand",
// TODO: when we unify jest config, we may need to change this
"--config",
"${workspaceFolder}/packages/core/package.json",
"${workspaceFolder}/packages/${input:getPackageName}/package.json",
// coverage messes up the source maps
"--coverage",
"false", // coverage messes up the source maps
"${relativeFile}" // remove this to run all package tests
"false",
// remove this to run all package tests
"${relativeFile}"
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"console": "integratedTerminal", // otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on "outputCapture" option here), but not both
"internalConsoleOptions": "neverOpen", // since we're not using it, don't automatically switch to it
// otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on
// "outputCapture" option here; default is to show console logs), but not both
"console": "integratedTerminal",
// since we're not using it, don't automatically switch to it
"internalConsoleOptions": "neverOpen",
},

// @sentry/nextjs - run a specific test file in watch mode
// must have file in currently active tab when hitting the play button
{
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/packages/nextjs",
"name": "Debug @sentry/nextjs tests - just open file",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--watch",
"--runInBand",
"--config",
"${workspaceFolder}/packages/nextjs/package.json",
"--coverage",
"false", // coverage messes up the source maps
"${relativeFile}" // remove this to run all package tests
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"console": "integratedTerminal", // otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on "outputCapture" option here), but not both
"internalConsoleOptions": "neverOpen", // since we're not using it, don't automatically switch to it
},

// @sentry/nextjs - run a specific integration test file
// must have file in currently active tab when hitting the play button
// @sentry/nextjs - Run a specific integration test file
// Must have file in currently active tab when hitting the play button
{
"name": "Debug @sentry/nextjs integration tests - just open file",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/packages/nextjs",
"name": "Debug @sentry/nextjs integration tests - just open file",
"request": "launch",
// TODO create a build task
// "preLaunchTask": "yarn build",

// this is going straight to `server.js` (rather than running the tests through yarn) in order to be able to skip
// having to reinstall dependencies on every new test run
"program": "${workspaceFolder}/packages/nextjs/test/integration/test/server.js",
"args": [
"--debug",
// remove these two lines to run all integration tests
"--filter",
"${fileBasename}"
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"skipFiles": [
"<node_internals>/**", "**/tslib/**"
],
},

// @sentry/node - run a specific test file in watch mode
// must have file in currently active tab when hitting the play button
{
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/packages/node",
"name": "Debug @sentry/node tests - just open file",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--watch",
"--runInBand",
"--config",
"${workspaceFolder}/packages/node/package.json",
"--coverage",
"false", // coverage messes up the source maps
"${relativeFile}" // remove this to run all package tests
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"console": "integratedTerminal", // otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on "outputCapture" option here), but not both
"internalConsoleOptions": "neverOpen", // since we're not using it, don't automatically switch to it
},

// @sentry/tracing - run a specific test file in watch mode
// must have file in currently active tab when hitting the play button
{
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/packages/tracing",
"name": "Debug @sentry/tracing tests - just open file",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--watch",
"--runInBand",
"--config",
"${workspaceFolder}/packages/tracing/package.json",
"--coverage",
"false", // coverage messes up the source maps
"${relativeFile}" // remove this to run all package tests
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"console": "integratedTerminal", // otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on "outputCapture" option here), but not both
"internalConsoleOptions": "neverOpen", // since we're not using it, don't automatically switch to it
},

// @sentry/utils - run a specific test file in watch mode
// must have file in currently active tab when hitting the play button
{
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/packages/utils",
"name": "Debug @sentry/utils tests - just open file",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"--watch",
"--runInBand",
"--config",
"${workspaceFolder}/packages/utils/package.json",
"--coverage",
"false", // coverage messes up the source maps
"${relativeFile}" // remove this to run all package tests
],
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"console": "integratedTerminal", // otherwise it goes to the VSCode debug terminal, which prints the test output or console logs (depending on "outputCapture" option here), but not both
"internalConsoleOptions": "neverOpen", // since we're not using it, don't automatically switch to it
},
]
}
13 changes: 13 additions & 0 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,19 @@ Running tests works the same way as building - running `yarn test` at the projec

Note: you must run `yarn build` before `yarn test` will work.

## Debugging Tests

If you run into trouble writing tests and need to debug one of them, you can do so using VSCode's debugger.

0. If you don't already have it installed, install the Tasks Shell Input extension, which you'll find in the Extensions tab in the sidebar as one of the recommended workspace extensions.

1. Place breakpoints or `debugger` statements in the test or the underlying code wherever you'd like `jest` to pause.
2. Open the file containing the test in question, and make sure its tab is active (so you can see the file's contents).
3. Switch to the debugger in the sidebar and choose `Debug unit tests - just open file` from the dropdown.
4. Click the green "play" button to run the tests in the open file in watch mode.

Pro tip: If any of your breakpoints are in code run by multiple tests, and you run the whole test file, you'll land on those breakpoints over and over again, in the middle of tests you don't care about. To avoid this, replace the test's initial `it` or `test` with `it.only` or `test.only`. That way, when you hit a breakpoint, you'll know you got there are part of the buggy test.

## Linting

Similar to building and testing, linting can be done in the project root or in individual packages by calling `yarn lint`.
Expand Down

0 comments on commit 9f1374d

Please # to comment.