How to run specific tests using Jasmine and Visual studio code? - javascript

I have started using Jasmine (not Karma yet) with Visual Studio Code.
Works nicely with the following config:
{
"version": "0.2.0",
"configurations": [
{
"name": "jasmine",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
}
}
]
}
Now my tests are building up I wanted to know if there was a way to just run a specific test or a tests within a specific file? At the moment all my tests are running which take a while.

The same way as from the cli would be the simplest option
(since Jasmine 2.1: fit, fdescribe)
See How do I focus on one spec in jasmine.js?

Related

Odin project and running jest on Windows : how to run single test in VS code

I am working on the Odin project and I have arrived at the test driven part.
I am on windows, installed everything as instructed and I use VS code as my IDE.
Now, I use VS code debugger to run the tests i.e. for the first case hello world I run the debugger on the helloWorld.spec.js file.
The tests runs as expected ... but in fact it runs all the 14 tests not only the one I am working on. As I am curious to understand how it works I would like to succeed running only the test I am working on.
I searched on Google but I couldn't find an answer that make my quest a success.
Do you know how to achieve this ? My configuration is shown herebelow.
First, my structure :
Then, my debug config file
"version": "1.0.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest: current file",
//"env": { "NODE_ENV": "test" },
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand", "--no-cache", "--watchAll=false"],
"console": "integratedTerminal",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
}
]
}
I also installed jest extension in VS code, in the hope to solve my issues and here are the settings for that extension :
"jest.autoRun": {
"watch": false,
"onSave": "test-src-file",
"onStartup": [
"all-tests"
]
},
"jest.debugCodeLens.showWhenTestStateIn": [
"pass",
"fail",
"unknown"
],
"jest.coverageFormatter": "GutterFormatter",

Debugging Javascript in VSCode on Mac

I use VSCode for my main editor, but when I debug plain native javascript I have always done it in the browser. Reason? Because I can't get the debugger to work.
Is this possible with native javascript?
I have tried the chrome debugger extension, but that always times out.
I simply have a single line of code in my javascript file
document.write("Hello World!");
I would really like to use the debugger in vscode, but I am not having much luck.
Node version is set to v8.1.2
This is my launch.json config:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"cwd": "${workspaceRoot}",
"outFiles": ["${workspaceRoot}]/*.js"]
}
]
}
What else do I have to do?
I was able to do the same on Ubuntu and it should work on Mac too, using following configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"userDataDir": "${workspaceRoot}"
}
]
}
Obviously my html file is named index.html and resides in workspace root.

Attaching grunt to VSCODE debugger

I am trying to attach my default grunt tasks to vscode debugger. So my desired workflow is I start the debugger and it runs the default grunt tasks and then I am able to put breakpoints in my code using vscode debugger. My launch JSON file looks like this.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/node_modules/grunt/lib/grunt",
"args": ["run"],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "production"
}
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
But I am getting an error can't launch program 'node_modules/grunt/lib/grunt'; setting the 'outfiles' attribute might help
If you want to debug your compiled code, you have to define the build task in tasks.json and then specify it as a preLaunchTask in your launch.json configuration.
Also remember to augment your build config so it outputs source maps. With source maps, it is possible to single step through or set breakpoints in the original source.
You need to configure the tasks in a tasks.json file (located under your workspace .vscode folder). If you don't already have a tasks.json file, running the Tasks: Configure Task Runner action from the Command Palette (⇧+⌘+P on macOS or F1 on Windows/Linux) will offer you a set of templates to pick from. Select Grunt from the list and it will generate a file that should look like this:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "grunt",
"isShellCommand": true,
"args": ["--no-color"],
"showOutput": "always"
}
now you can define your build task:
{
...
"showOutput": "always",
"tasks": [
{
"taskName": "build",
"args": [],
"isBuildCommand": true
}
]
Assuming that your Grunt builds your app from src/app.js to dist, you can define your launch configuration like this:
{
"type": "node",
"request": "launch",
"name": "Launch",
"program": "${workspaceRoot}/src/app.js",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/**/*.js"],
"preLaunchTask": "build"
}
You can read more in the VS Code documentation - Node.js Debugging in VS Code.

Debugging Javascript with babel in VS code skips lines

I create a directory test and npm init in it. I write a simple code to index.js:
'use strict';
let i = 3*4;
console.log("HELLO TEST");
console.log("HELLO TEST");
With this in package.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
}
]
}
Now, I put a breakpoint at line two and run the code. Everything works as expected, I can step through the code line by line and see the values update (in this case, the value i updates) and write to the console after
Now I install npm install --save-dev babel-cli and modify the launch.json: "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
Now the debug line isn't aligned, it starts off here, and i isn't defined
The problem worsens when I add more lines:
i is still not defined!
A few days ago, I didn't have problems like this. I didn't change node versions. I might have changed VS code versions. Currently, I installed the latest version (1.3.1) and I get this problem. I also tried to revert to 1.2.1 and still have this problem.
I don't understand how I can get this to work again. It was perfect before! It's a big pain not to be able to debug correctly.

How do I setup VS Code for Angular Debugging?

I'm trying to setup Visual Studio Code for debugging Angular. If I just use the out-of-the-box version of launch.json and point it to the /js/app.js file, it returns:
ReferenceError: angular is not defined
So, I tried to use gulp-connect to start a server. This starts the app just fine, but the debugger isn't attached and it never stops at breakpoints.
Can someone show me how to debug an angular web with VS Code?
PS. Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Debug with gulp.js",
"type": "node",
"request": "launch",
"program": "js/app.js",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
Okay, with the help of the #code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...
First, you need to download the "Debugger for Chrome Extension." You do this by typing this:
F1
ext Install Extensions
debug (then select Debugger For Chrome)
Once that is installed, I used MSFT's instructions found here:
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:
{
"version": "0.2.0",
"configurations": [
{
// Use this to get debug version of Chrome running:
// /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "./www"
}
]
}
Also, don't forget to start Chrome in debug mode with this (for Mac):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Categories