Execution
With everything installed and configured, you are now ready run your tasks.
Visual Studio Code
In the previous step, you configured your VS Code tasks. To run them, there are two options:
- Ctrl+Shift+B – runs your build task which, in this case, starts a Node.js Express server and runs Karma in the background
- Ctrl+Shift+T – runs your test task which only runs your Karma tests in the background
Visual Studio
There’s not much to do in Visual Studio except for binding your Karma task to your debugging execution pipeline. In the Task Runner Explorer (NOTE: this is installed by default in Visual Studio 2015, but is an extension that must be installed for Visual Studio 2012 and Visual Studio 2013), you should see your three tasks listed.
- Right-Click on “karma”
- Under “Bindings”, choose “After Build”
Technically, because we are testing JavaScript, you could choose “Before Build,” but in larger projects you may have additional tasks in your build process (e.g. minification, bundling, jshint, etc.) Now, every time you build your application, the “karma” task will run. And, theoretically, if you are actively developing JavaScript, you’ll only need to build your project once and keep it running, while modifying your JavaScript and refreshing your browser.
Sample Application
In the attached .zip file, you’ll find a sample AngularJS application.
IMPORTANT: If you are wanting to open this in VS Code or run the Express web server, you will need to make sure you have Node.js installed on your local machine.
If you are running this in VS Code, you will need to go the folder in which you unzipped this file and run the two commands in a command prompt:
npm install .\node_modules\.bin\bower install
This will download and install all dependencies.
If you open the folder in Visual Studio, then the dependencies will be downloaded for you automatically.
Also, if you choose to run the “server” task in VS Code, you can navigate to http://localhost:45000 to see the sample default.html page (provided that nothing else is running on port 45000).
The attached project will show 4 passing tests and 1 failing test (3+10=13, not 15).
Hi, I found this very useful in setting up my tests. A simple test will work fine. I am using typescript however and it starts to add systemjs calls into the transpiled javascript if i try to add an imoprt {} statement for example. This causes an error. Any ideas how I can get that working together?
Ehh, a little more in-depth than the purpose of the post, but a few things to consider when using TypeScript:
import
statements and other ES* directivesI realize this isn’t that much insight, but hopefully it gets you going in the right direction. I’ll try to blog about how to do this in another post.
i think you meant “Task” Runner Explorer and not “Test” Runner Explorer.
In the ‘Visual Studio’ section I think the ‘Test Runner Explorer ‘ should be ‘Task Runner Explorer’, right?
yes, I mistakenly put “Test Runner Explorer” which refers to MSTest and other testing extensions. Instead, I want to view the results of my gulp tasks. Thanks for pointing it out.
Thank you Joshua,
It is first time when I configured the VS so quickly 🙂
Awesome! Glad it helped you out.
On running karma task from Task Runner Explorer window, I got error:
“karma.ps1 cannot be loaded because running scripts is disabled on this system.”
To fix this, in powershell, I had to run this (My LocalMachine was already set to RemoveSigned, only changing CurrentUser made a difference):
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Typically, you shouldn’t have to do this if you are creating the .ps file locally. Setting the policy for RemoteSigned is only needed if 1) you are downloading my source from the blog, thus, downloading code from an untrusted location; or, 2) you have local policies prohibiting the running of scripts. What I normally do, is open PowerShell as an Administrator and run VS Code from the PS prompt (as compared to running it from the DOS prompt or Windows Explorer extension). For my local admin account, I’ve set the execution policy to Bypass. By doing this, I’m running VS Code in the context of a PowerShell administrator and my local scripts run fine without restrictions. Nonetheless, I’m glad you got it working.
Great tutorial! Lots of other guides out there aren’t really for VS so it’s great to find one which is so clearly explained
Awesome! Glad it helped.
In VS 2013 you also have to install gulp
Yes. Good point. Thanks!
The karma task never stops running, what do I do about that? I’d like it to stop when I’m done debugging.
You’ll need to configure a shortcut key to terminate the tasks.
keybindings.json
add the following:{
"key": "ctrl+shift+alt+t",
"command": "workbench.action.tasks.terminate"
}
Now, while your task is running, press and hold Ctrl+Shift+Alt+T to cancel your task.
‘include’ directive in C# ???
Not sure if I understand your question. In C#, the directive is
using
, compared to C++’sinclude
.I think he meant in your guide you’ve written C# ‘include’ directive, where it should have been C++.
Ahh, fixed. Thanks for the clarity!
Joshua, first of all, excellent work. I’ve been following along with your visual studio track using a little TS Angular App of my own. I haven’t touched Karma in a couple years, so I’m catching back. But a few questions.
Configuration: Visual Studio 2015 Update 3, Win 7 Update 2, Firefox Browser:
App: Typescript/Angular
Issue 1.
Task Runner Errors on Karma
C:\Users\jim\documents\visual studio 2015\Projects\TypeScriptHTMLApp1\TypeScriptHTMLApp1> cmd.exe /c gulp -b “C:\Users\jim\documents\visual studio 2015\Projects\TypeScriptHTMLApp1\TypeScriptHTMLApp1” –color –gulpfile “C:\Users\jim\documents\visual studio 2015\Projects\TypeScriptHTMLApp1\TypeScriptHTMLApp1\Gulpfile.js” karma
[11:33:19] Using gulpfile ~\documents\visual studio 2015\Projects\TypeScriptHTMLApp1\TypeScriptHTMLApp1\Gulpfile.js
[11:33:19] Starting ‘karma’…
events.js:141
throw er; // Unhandled ‘error’ event
^
Error: spawn powershell -Command “./karma.ps1” ENOENT
at exports._errnoException (util.js:856:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:474:9)
at process._tickCallback (node.js:388:17)
at Function.Module.runMain (module.js:431:11)
at startup (node.js:139:18)
at node.js:999:3
Process terminated with code 1.
Issue 2.
Debug Renders but never shows any Data
Issue 3.
Karma renders in the browser, but never shows any data, but data does show from the command line
Issue 4.
Detailed reporter pops a browser with no url or data, but it does show data if I go dig into the temp folder and open it
Files:
#
# karma.ps1
#
Start-Process “C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe” -Argument “node_modules/.bin/karma start karma.conf.js”
Start-Process “firefox” -Argument “.\_reports\\html-results.html”
Gulp
///
‘use strict’;
var gulp = require(‘gulp’),
shell = require(‘gulp-shell’);
gulp.task(‘server’, [‘node’, ‘karma’]);
gulp.task(‘node’, shell.task(‘node app.js’));
gulp.task(‘karma’, shell.task(‘powershell -Command “./karma.ps1″‘));
gulp.task(‘default’, function () {
// place code for your default task here
});
karma.conf.js
// Karma configuration
// Generated on Tue Aug 15 2017 17:05:31 GMT-0400 (Eastern Daylight Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: ”,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [‘jasmine’],
// list of files / patterns to load in the browser
files: [
‘./test/**/*.js’
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: ‘dots’, ‘progress’
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: [‘progress’],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [‘Firefox’],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
// notify karma of the available plugins
plugins: [
‘karma-firefox-launcher’,
‘karma-jasmine’,
‘karma-phantomjs-launcher’,
‘karma-html-detailed-reporter’
],
// add ‘htmlDetailed’
reporters: [‘progress’, ‘htmlDetailed’],
// configure the HTML-Detailed-Reporter to put all results in one file
htmlDetailed: {
splitResults: false
}
})
}
Ignore my previous comment. I have everything figured out except one issue.
The Task Runner in Visual Studio 2015-3 doesn’t like the configuration of the Karma task in the gulpfile.
I did this in the pre-build even command line in the Project Properties:
Powershell.exe -ExecutionPolicy Unrestricted -file “$(ProjectDir)karma.ps1”
Which worked, but no combination seems to work out of Gulp to appear correctly in the Task Runner Explorer output window
Is the Task Runner Explorer showing you anything? Is Gulp even running correctly from within VS?
Hi there, awesome post!
I am trying to setup this environment on a Mac. Any replacement for the powershell?
I haven’t tested this, but something like the following should work.
karma.ps1
, create akarma.command
file./node_modules/.bin/karma start karma.conf.js
open -a "Google Chrome" ./_reports/html-results.html
chmod +x karma.command
gulpfile.js
, replace the PowerShell task with the following:gulp.task('karma', shell.task('open karma.command'));
Like I said, I haven’t tested this, but it should work. You may have to fiddle with it a bit.
In Output Screen at tasks.json
Its displaying as
“‘gulp’ is not recognized as an internal or external command,
operable program or batch file.”
Even when I tried to run (ctrl+shift+B) in the Sample Application (downloaded solution here), its giving the same error
I have downloaded gulp.. everything . I am not understanding why am I still getting the same message as gulp is not recognized !!
1 more doubt in the problems section besides output in tasks.json
Its showing as
“‘Warning’ message: ‘Problems loading reference ‘http://json.schemastore.org/package’: Unable to load schema from ‘http://json.schemastore.org/package’: Unable to to connect to http://json.schemastore.org/package. Error: getaddrinfo EAI_AGAIN json.schemastore.org:80′
at: ‘1,1’
source: ””
Btw I’m using Angular 4
Correct me if I’m wrong, but it appears that you are running Visual Studio? In cases like this, I would take a look at your
package.json
and make sure it’s formatted correctly as this is often the case for this error message and why VS cannot download npm packages.Hi, This looks promising. I went through all the steps but in the end, Task Runner Explorer shows “No tasks found” under Glupfile.js.
Also, you wrote: “You’ll notice that the ‘karma’ task executes a PowerShell script. Here’s the contents of the karma.ps1 script (save the contents below into a file named karma.ps1 in your project’s main directory)”
However, I didn’t see any powershell script run (I checked too!). What would trigger a run of that karma.ps1 script? Simply saving the gulfile file? (Btw, “Gulfile.js” in the Task Runner Explorer shows with a capital G. Is that normal?)
Based on what you’ve said, with the Task Runner Explorer giving you the message “No tasks found” and you not seeing any PowerShell script run, at first glances I would think you may have a typo. Additionally, I haven’t tested it, but perhaps Gulp doesn’t like the fact that your
gulpfile.js
is capitalized. Typically (and common practice), is this filename is lowercase.