Now that you are using this technology and tool stack - Angular JS, Jasmine for test cases, Karma as coverage reporter, require js and Webstorm as the IDE, why not make all in one! If you are not using Grunt to run tasks, you may setup these in Webstorm itself. Just one click will run your test cases and code coverage in the Webstorm console.
9) The output of test cases will be displayed in the terminal itself. For coverage report, html files for coverage should have been created in the coverage folder (See screen grab below). Navigate to the folder and open the html file in browser.
For confidentiality reasons, I could add attach images from actual code to this post, so the screen grabs that you see here are downloaded from the web.
These steps may help you with the setup:
1) First pre-requisite for this is to have node js and npm installed globally.
NPM tips-
a) To install npm, run npm install –g npm. Then run npm init to get the package.json generated. This will ask you a bunch of questions, and then write a package.json for you. It attempts to make reasonable guesses about what you want things to be set to, and then writes a package.json file with the options you've selected. If you already have a package.json file, it'll read that first, and default to the options in there.
b) Use npm cache clean when you have no clue of what’s going on.
2) In Webstorm, go to File-> Settings. Enable karma as coverage reporter, if not already enabled. To configure code coverage , refer this URL http://www.jetbrains.com/webstorm/webhelp/run-debug-configuration-karma.html
3) Run the following commands on the project folder –
npm install -g karma-chrome-launcher
npm install karma-chrome-launcher
npm install -g karma-cli
npm install karma-cli
npm install -g karma-coverage
npm install karma-coverage
npm install -g karma-jasmine
npm install -g karma-requirejs
npm install -g requirejs
1) First pre-requisite for this is to have node js and npm installed globally.
NPM tips-
a) To install npm, run npm install –g npm. Then run npm init to get the package.json generated. This will ask you a bunch of questions, and then write a package.json for you. It attempts to make reasonable guesses about what you want things to be set to, and then writes a package.json file with the options you've selected. If you already have a package.json file, it'll read that first, and default to the options in there.
b) Use npm cache clean when you have no clue of what’s going on.
2) In Webstorm, go to File-> Settings. Enable karma as coverage reporter, if not already enabled. To configure code coverage , refer this URL http://www.jetbrains.com/webstorm/webhelp/run-debug-configuration-karma.html
3) Run the following commands on the project folder –
npm install -g karma-chrome-launcher
npm install karma-chrome-launcher
npm install -g karma-cli
npm install karma-cli
npm install -g karma-coverage
npm install karma-coverage
npm install -g karma-jasmine
npm install -g karma-requirejs
npm install -g requirejs
4) Look for tests-karma-config.js in your project's folder, set this location as the basePath in this file. In the preprocessor section of this file, add the path to the js files for which you need to check code coverage.
5) Look for tests-main.js parallel to tests-karma-config.js. In the require section, add the reference to the file that belongs to the module we are to test. Remove the other file references. For example, -
'folder-name/module-name/tests/index'
5) Look for tests-main.js parallel to tests-karma-config.js. In the require section, add the reference to the file that belongs to the module we are to test. Remove the other file references. For example, -
'folder-name/module-name/tests/index'
6) In the index.js, for which we have provided path above, add reference to the file you need to test.
7) In the project folder, create a folder called coverage and add a new file coverage.html to that. This is where you will see your code coverage reports.
8) In the directory explorer of Webstorm, right click on tests-karma-config.js, select Run tests-karma-config.js with coverage. The terminal will open automatically, which would open the browser in turn. Alternatively, you can open the Webstorm terminal, and reach upto the project folder through command, and then run this command, karma start tests-karma-config.js.
7) In the project folder, create a folder called coverage and add a new file coverage.html to that. This is where you will see your code coverage reports.
8) In the directory explorer of Webstorm, right click on tests-karma-config.js, select Run tests-karma-config.js with coverage. The terminal will open automatically, which would open the browser in turn. Alternatively, you can open the Webstorm terminal, and reach upto the project folder through command, and then run this command, karma start tests-karma-config.js.
9) The output of test cases will be displayed in the terminal itself. For coverage report, html files for coverage should have been created in the coverage folder (See screen grab below). Navigate to the folder and open the html file in browser.