-
Notifications
You must be signed in to change notification settings - Fork 295
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Outsource debug configuration to launch.json #287
Conversation
Pull Request Test Coverage Report for Build 338
💛 - Coveralls |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like it, it's much cleaner than before!
With the ability to allow people customize the whole debug config, I think you strike a good balance between ease-of-use and flexibility. Now users will have a way to unblock themselves even if our default config is not right! I am glad you can do this without introducing any new variable. Good job!
In addition to address the comments, test, and coverage, we should probably also add some documentation on this new debug feature, including how to override the default config, examples etc.
src/DebugConfigurationProvider.ts
Outdated
folder: vscode.WorkspaceFolder | undefined, | ||
debugConfiguration: vscode.DebugConfiguration, | ||
token?: vscode.CancellationToken | ||
) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I got compile errors with yarn vscode:prepublish
:
src/DebugConfigurationProvider.ts(32,74): error TS6133: 'token' is declared but never used.
src/DebugConfigurationProvider.ts(54,5): error TS6133: 'folder' is declared but never used.
src/DebugConfigurationProvider.ts(56,5): error TS6133: 'token' is declared but never used.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah thanks, I just saw the warnings and thought that I maybe would use those arguments later. Is fixed.
src/JestExt.ts
Outdated
await vscode.debug.startDebugging(workspaceFolder, 'vscode-jest-tests') | ||
} catch { | ||
const debugConfiguration = this.debugConfigurationProvider.provideDebugConfigurations(workspaceFolder)[0] | ||
vscode.debug.startDebugging(workspaceFolder, debugConfiguration) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe we can capture error here as well and provides some helpful notes to improve the user experience...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately the exception throwing behavior of startDebugging
isn't documented. The only case in which it throws (a null
exception) seems to be if the requested debug configuration isn't present. If starting the debug session fails because of a wrong command in the configuration, vscode displays a more or less detailed error message by itself. The only modification I made was to show a warning message, if it falls back to the default configuration.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added a few more comments, please take a look, thx.
src/DebugConfigurationProvider.ts
Outdated
} | ||
const craCommand = tryGetCRACommand(folder.uri.fsPath).split(' ') | ||
if (craCommand.length > 1 || craCommand[0]) { | ||
debugConfiguration.runtimeExecutable = '${workspaceFolder}/node_modules/.bin/' + craCommand.shift() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
will this work in windows?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On my Windows machine it works, since cmd partially supports using slashes instead of backslashes. By the way, even Microsoft's snippets use slashes.
src/DebugConfigurationProvider.ts
Outdated
debugConfiguration.args = [...craCommand, ...debugConfiguration.args] | ||
debugConfiguration.protocol = 'inspector' | ||
} else { | ||
debugConfiguration.program = '${workspaceFolder}/node_modules/jest/bin/jest' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here, will it work in windows?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cool
package.json
Outdated
{ | ||
"type": "node", | ||
"label": "Debug Jest Tests using vscode-jest" | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if the launch.json already existed, I can't add the test config via the add configuration...
button in launch.json right now. Maybe we should add a few configurationSnippets
here, such as for default (plain jest) and CRA etc? this will make customization a lot easier... (if you don't see the snippets, might want to name the debugger with a "fake" type...)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I added those two snippets. Additionally I separated the code into two different DebugConfigurationProvider
, such that it shows up as separate environment when creating the launch.json file.
package.json
Outdated
{ | ||
"type": "vscode-jest-tests", | ||
"label": "Debug Jest tests using vscode-jest", | ||
"languages": ["javascript", "javascriptreact", "typescript", "typescriptreact"], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would prefer to target only *.test.(j|t)sx?
files, but when creating a separate language definition, it seems like I can't base it on the javascript(react)/typescript(react) definitions (including syntax highlighting, IntelliSense, ...).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that should be fine for now, if it's a platform limitation...
Should we use the In the long run my whish would be to completely remove those settings and instead in |
package.json
Outdated
{ | ||
"type": "node", | ||
"label": "Debug Jest tests using vscode-jest" | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
don't think we need this dummy one anymore...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I initially thought that it would be necessary when registering a CustomDebugProvider
, but it turned out it isn't, I therefore removed it.
src/JestExt.ts
Outdated
// if that fails, there (probably) isn't any debug configuration (at least no correctly named one) | ||
vscode.window.showWarningMessage( | ||
'Debug Jest test: No correctly named debug configuration found in launch.json, starting debugging using the default configuration.' | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no need to show warning here as it is the default behavior when the user doesn't have any custom debug config, which is not required.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added it because of your "maybe we can capture error here as well and provides some helpful notes to improve the user experience…", but see the next comment.
src/JestExt.ts
Outdated
) | ||
// therefore run the test using the default configuration | ||
const debugConfiguration = this.snippetDebugConfigurationProvider.provideDebugConfigurations(workspaceFolder)[0] | ||
await vscode.debug.startDebugging(workspaceFolder, debugConfiguration) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this startDebugging
could fail because the generated config is not correct, for example, the program or runtimeExecutable is wrong... therefore, a good place to catch and instruct users how to examine and customize their debug config.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You mean the "fallback" startDebugging
? The issue is that even in such cases startDebugging
resolves the Promise successfully (and returns true
), after automatically displaying an error message (The attribute "runtimeExecutable" doesn't exist ("/path/to/jest").
). One therefore has to initiate a change of the VS Code API or show the user a warning while falling back to the default configuration or just let VS Code show its error message.
} | ||
} | ||
] | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm... I like the snippets, but not sure about splitting DebugConfigurationProvider... I think the original single DebugConfigurationProvider is cleaner. These snippets should just work with your original DebugConfigurationProvider registered under "node" type, right? As we discussed earlier, the vscode-jest-tests
is really a fake type, our DebugConfigurationProvider is really a node type debug provider, IMHO, better to keep that clarity in code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having a single DebugConfigurationProvider
would be cleaner, for sure. However we need the vscode-jest-tests
provider such that the Debugconfigurationprovider
appears as a separate entry when initially creating a launch.json config and selecting the environment.
An alternative would be to merge the providers into one vscode-jest-tests
provider, but then dynamically switching the debug adapter has to work (submitting an issue to VS Code should be enough). Additionally since startDebugging
needs the name of the debug configuration, one then would have to enter vscode-jest-tests
both as name and as type, which is kind of less clean. In that case an option would be to add a new function to vscode for getting all debug configurations of a specific type.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having a single DebugConfigurationProvider would be cleaner, for sure. However we need the vscode-jest-tests provider such that the Debugconfigurationprovider appears as a separate entry when initially creating a launch.json config and selecting the environment.
you should be able to accomplish this via registering the same DebugConfigurationProvider under both "node" and "vscode-jest-tests" (see comments in extension.ts
), without splitting the DebugConfigurationProvider...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But then it doesn't only add the config when creating the launch configuration and selecting Debug Jest tests using vscode-jest
, but also when selecting Node.js
instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
true, but not sure why is that a problem...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found it somehow unesthetic, but since this is only the case when the extension is activated (and therefore jest is in use), I just merged them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please take a look at the comments and make sure all tests and checks pass, and yarn vscode:prepublish
compiles. (note for self: we should add this to the ci script)
src/extension.ts
Outdated
vscode.debug.registerDebugConfigurationProvider('node', extensionInstance.nodeDebugConfigurationProvider), | ||
vscode.debug.registerDebugConfigurationProvider( | ||
'vscode-jest-tests', | ||
extensionInstance.snippetDebugConfigurationProvider |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you could just register the extensionInstance.nodeDebugConfigurationProvider
here instead
src/DebugConfigurationProvider.ts
Outdated
} | ||
} | ||
|
||
export class SnippetDebugConfigurationProvider implements vscode.DebugConfigurationProvider { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
by registering DebugConfigurationProvider under both "node" and "vscode-jest-tests" (see comments in extension.ts
), we should be able to clean up and move back to the single provider implementation
src/DebugConfigurationProvider.ts
Outdated
debugConfiguration.args = [...craCommand, ...debugConfiguration.args] | ||
debugConfiguration.protocol = 'inspector' | ||
} else { | ||
debugConfiguration.program = '${workspaceFolder}/node_modules/jest/bin/jest' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cool
I updated the PR such that it adds |
I am not quite sure we should add any of these existing settings (pathToJest, pathToConfig...) at the initial implementation... I think people are using them mainly for non-debug mode, which might not be compatible or desirable during debugging, for example, it could be configured with extra params, so
Giving we really don't know how users will be using this new debug mechanism, I think it is best to keep our initial implementation as simple and clean as possible. So we could release it sooner and start to get real feedbacks ASAP, before committing more time and effort into a direction that we are not quite sure yet... I really like your initial implementation (from the first review), I thought that was a balanced approach: that we provide a simple minimal config, and users can customize it when the default one doesn't work for them -- simple and intuitive. I thought we were pretty close at review 1, just needed to add the snippets in the package.json, fix the compile error and tests, add a documentation then it should be ready to go... Other than the doc, I think you already fixed most mentioned above. I suggest we hold off the extra logic outside of that scope, so we can get this out as soon as possible. We can always come back to it later when there are more concrete use cases and actual user feedbacks... |
Ah ok, I wasn't sure about that and since including I think except documentation (beyond this PR) everything should be fixed by now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did a clean yarn install and got these errors from yarn vscode:prepublish
:
$ yarn vscode:prepublish
yarn run v1.5.1
$ yarn clean-out && tsc -p ./tsconfig.publish.json
$ rimraf ./out
node_modules/jest-editor-support/index.d.ts(173,10): error TS2503: Cannot find namespace 'editor'.
node_modules/jest-editor-support/index.d.ts(178,14): error TS2300: Duplicate identifier 'Snapshot'.
src/SnapshotCodeLens/SnapshotCodeLensProvider.ts(23,23): error TS2554: Expected 1-2 arguments, but got 0.
typings/jest-editor-support.d.ts(28,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'node' must be of type '{ loc: any; }', but here hastype '{ loc: Node; }'.
typings/jest-editor-support.d.ts(32,5): error TS2687: All declarations of 'content' must have identical modifiers.
typings/jest-editor-support.d.ts(37,9): error TS2300: Duplicate identifier 'Snapshot'.
the jest-editor-support
got pulled in is 22.4.3. Does vscode-jest now depends on a not-yet-published jest-editor-support
? If that is the case, should we update the package.json to reflect the minimal version?
@seanpoulter or @orta, should we hold off merge until jest release the next version?
[update]
never mind, looks like we have been frozen-in-time at "22.4.0" in yarn.lock... not an issue for this PR then.
tests/extension.test.ts
Outdated
it('should register a DebugConfigurationProvider', () => { | ||
activate(context) | ||
|
||
expect(vscode.debug.registerDebugConfigurationProvider).toBeCalled() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we also check the registered types here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think that we would gain much. TypeScript already enforces that we actually register a DebugConfigurationProvider
, so in my opinion further specifying the test would be more a sort of burden when changing the behavior than prevent inadvertent changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is to protect others from making unintended changes, such as removed registration for "vscode-jest-tests". Since we don't have any other tests for launch-snippets function, I think these simple tests are the least we can do to safeguard its intended logic.
All tests are creating friction for future changes, and that is not necessary a bad thing...
It should work with the unpublished state of |
package.json
Outdated
"type": "node", | ||
"name": "vscode-jest-tests", | ||
"request": "launch", | ||
"program": "${workspaceFolder}/node_modules/jest/bin/jest", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested adding these snippets in launch.json, all of them failed to start debugger... looks like the ${workspaceFolder}
is not populated. Looking at the example from here, you will most likely need to escape them, for example: "program": "^\"\\${workspaceFolder}/node_modules/jest/bin/jest\""
were you able to run with these snippets?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah thank you, since they should have been the same, I actually never tested the snippets from package.json
except with my eyes; is fixed.
I also extended the test and readme.
tests/extension.test.ts
Outdated
it('should register a DebugConfigurationProvider', () => { | ||
activate(context) | ||
|
||
expect(vscode.debug.registerDebugConfigurationProvider).toBeCalled() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is to protect others from making unintended changes, such as removed registration for "vscode-jest-tests". Since we don't have any other tests for launch-snippets function, I think these simple tests are the least we can do to safeguard its intended logic.
All tests are creating friction for future changes, and that is not necessary a bad thing...
package.json
Outdated
"request": "launch", | ||
"program": "^\"\\${workspaceFolder}/node_modules/jest/bin/jest\"", | ||
"args": ["--runInBand"], | ||
"cwd": "${workspaceFolder}", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm... it is still not quite right... here is the one generated by the DebugConfigurationProvider for CRA:
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"args": ["test", "--env=jsdom", "--runInBand"],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
"protocol": "inspector"
}
and this is the snippet injected by the vscode Add Configuration
:
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand"
],
"cwd": "",
"console": "integratedTerminal",
"protocol": "inspector",
"internalConsoleOptions": "neverOpen"
}
- the args are not the same: snippet missing
--env=jsdom
. - the "cwd" is still empty in snippet
- the break point didn't work with the snippet
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I overlooked that since it also works without a cwd
. However including the cwd
has the advantage of better directing the user if he has to change paths.
Debugging of react-scripts-ts
seems to be not working at the moment with newer versions of jest (wmonk/#276).
README.md
Outdated
This plugin provides blueprints for debugging plain Jest setups or projects bootstrapped by `create-react-app`. If those don't match your setup, you can modify the blueprints or create a completely new debug configuration, but keep in mind, that the `type` has to be `node` and that the configuration has to be named `"vscode-jest-tests"`. | ||
|
||
Starting with debugging is possible by clicking on the `debug` CodeLense above appendant `it` tests, but you can also debug all tests at once by starting debugging of `"vscode-jest-tests"` within the VS Code Debug Side Bar. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
great start. thx.
but I thought you might want to call out the following in the doc, otherwise, they might just come back as issues after we launch it:
- it won't work if the jest or react-script is not under their
default
location - it won't detect CRA if it has been ejected, thus a wrong default config will be used and debug will fail.
- it won't incorporate any of the pathToJest or pathToConfig settings
- document backward incompatibility if any(?) i.e. something used to work but will break under the new scheme. (figure you will know this best)
We do not need to make any code change (it is perfectly all right, sometimes preferable, to make best-effort guesses, provided there is an easy way for users to customize for their specific use), but it will be very helpful to call out the reason, scope, and boundary, then provide guidance for users to help themselves, such as how to generate debug config from launch.json (a link to vscode doc might be good enough), which attribute to update, arguments to add etc.
The review process has gone long enough (sorry), I won't hold off the merge for doc change once the code is ready, but please do consider addressing the above before the launch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried to address that with a separate paragraph. By the way, ejected CRA's were something I didn't thought about, but adding a working snippet was quite simple.
You don't have to feel sorry for that, with each time the quality of this PR got improved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @stephtr for putting a lot of effort into this. This is an improvement over the current debug capability and one step closer to where we want to go. 👍
I will merge it when I get home tonight.
src/DebugConfigurationProvider.ts
Outdated
debugConfiguration.runtimeExecutable = '${workspaceFolder}/node_modules/.bin/' + craCommand.shift() | ||
debugConfiguration.args = [...craCommand, ...debugConfiguration.args] | ||
debugConfiguration.protocol = 'inspector' | ||
} else if (testCommand === 'node scripts/test.js --env=jsdom') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
me: "uh-oh, this is fragile..."
me: "yeah, but that is ok because if it failed developers can just override it in their custom debug config"
me: "ok, then why do we even need this code here? when developers eject CRA, I think they would expect some adjustment to their environment, such as their debug config; on the other hand, it is not so intuitive that their trusted vscode-jest suddenly failed to debug after they changed the test script in package.json."
me: "maybe, but if vscode-jest can work out-of-box in their CRA environment, wouldn't it be "intuitive" to think it should work in ejected env as well? if the testCommand check is too fragile, there are many ways to improve it: we can parse all package.json scripts, parse the testCommand further, go down to the file system to find the binary, just to name a few; and if different CRA version has different test scripts, not a problem, if we can find CRA binary, we can find its version... there is no problem we can't resolve!"
me: "This is what we call the slippery slope... at the beginning, everything looked equally plausible, but as you travel down the path, the effect starts to compound...before you know it, there will be hundreds of lines of code serving CRA variations and yet still insufficient... now just imagine if we have chosen the other path..."
"Just because we can doesn't mean we should" 😏
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should I remove it?
At first my thought was that the DebugConfigurationProvider
should be able to handle all snippets from package.json
and simply running scripts/test.js --env=jsdom
can't be wrong when it is stated as test script.
However as it anyhow fails if one creates the debug configuration and ejects after that and as precautionary measure to inhibit PRs adding support for automatic detection of configuration xyz it could be advantageous to remove the detection for ejected CRA apps.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should I remove it?
sounds good to me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is removed.
Hi! I was looking for this exactly. But I just noticed this hasn't been published to the Marketplace. Is there any ETA? Would love to take advantage of it! |
Yeah, let's do it |
As often mentioned we need a possibility for debugging tasks if the script to be run is not the standard jest binary. The discussion #271 leaned towards using the DebugConfiguration instead of the
pathToJest
setting, since one then has more control over the settings used, which simplifies the core extension when including support for CreateReactApps and similar.With this PR debugging tests should work for most jest and CreateReactApp projects out of the box, in general one has to add a launch configuration named
vscode-jest-tests
(of typenode
).