Any easy way to add build version info to coverage test results - angularjs

I am using karma-coverage to measure the unit test coverage in my project and everything works in that regard just fine. I use HTML reporter into default directory.
However, I would need to "stamp" the coverage report with the build version information that I do have available using grunt-git-describe, which is currently used in the AngularJS app footer that loads the resulting version.json file. I didn't find any direct way to use this version.json file in the html reports from karma-coverage. So if anybody has a good idea how to do it, I would appreciate a lot.
Thanks in advance!

I did manage to implement this with a sort-of work around. I use text-replace module in grunt after running karma to do this. If some one has a better solution, please share as this is a bit of a hack, but it works ok. As karma-coverage's html reports in my environment goes to the projects' root /coverage/ folder, I made a recursive text replace into every .html file there looking for the default footer and adding my version info there...
First, installed grunt-text-replace
$ npm install grunt-text-replace --save-dev
Then I made a following replace function in gruntfile.js:
grunt.initConfig({
replace: {
coverage: {
src: ['coverage/**/*.html'],
overwrite: true,
replacements: [
{
from: '<div class="meta">Generated by',
to: function(){return grunt.config.get('task.replace.versionString');}
}
]
}
},
// and your other stuff in initConfig()
And I added a new task into grunt for this:
grunt.registerTask('coverage', 'Adds version info to coverage results', function(){
grunt.task.requires('version'); // The 'version' task creates a 'version.json' file
var vers = grunt.file.readJSON('version.json');
// Set the desired string to be used in text-replace -function
grunt.config.set('task.replace.versionString', '<div class="meta">Version ' + vers.version + ', Tag "' + vers.revision[0] + '"<br>Generated by');
grunt.task.run(['replace']);
});
A bit ugly but works like a charm ;-)

Related

JSHint in WebStorm doesn't know protractor command "browser"

I'm trying to make test for AngularJS web page in WebStorm (using Jasmine and Protractor frameworks), I'm using JHint for code inspection...
All code is OK except one command: "browser", example of code:
describe('Test',function(){
it('Open page',function(){
browser.get('https://www.angularjs.org');
browser.sleep(2000);
});
});
JSHint is still highlighting errors with browser:
Problem synopsis JSHint: 'browser' is not defined. (W117)
Unresolved function or method sleep() at line 20
In JHint Environment I have enabled:
Jasmine
Node.js
In JavaScript Libraries I have enabled:
Node.js Core
angular-protractor-DefinitelyTyped
jasmine-DefinitelyTyped
selenium-webdriver-DefinitelyTyped
Does anybody know what do I have to enable or which Library do I have to download to make JSHint understand the "browser" command please?
Do you have a .jshintrc file ?
{
"globals": {
"browser": false,
},
"jasmine": true
}
You can add browser as a global.
JSHint works on per-file basis and doesn't 'see' global variables defined in other files unless they are added to 'global' list. This can be done by either adding the corresponding comments (/* global browser*/) to your files - see http://www.jshint.com/docs/, or by adding variables/functions you'd like to use globally to the 'Predefined' list in WebStorm Preferences -> Languages & Frameworks -> Javascript -> Code Quality Tool -> JSHint -> Predefined (,separated).

grunt-angular-templates cache all templates

So I ran into an issue when trying to use toastr as a global error notification system in my angular application.
This was logged as an issue with angular-toastr and the proposed solution was to push all templates into the templatecache. Apparently this is a good thing to do and after reading up on why, I have to agree.
My problem is that I am really new to grunt (only just installed it today) and although I have now managed to successfully set up my gruntfile.js and run some tasks (minification, concatination, etc) using grunt-angular-templates is a mystery to me.
I have set up my gruntfile like this:
ngtemplates: {
options: {
module: 'project',
},
dist: {
src: [
'wwwroot/lib/angular-toastr/**.html'
],
dest: 'wwwroot/js/templates.js'
}
}
But my templates file that is generated is empty.
I assume this is because scripts are creating in the JS files.
Does anyone know how I can get access to the them so I can add them to the cache?
I would guess that your source files are not being 'seen'. This worked for me with the following configuration and I am using a similar structure where the output is in a wwwroot/lib folder. I am also using the cwd (source directory option). Make sure that the templates are copied to the wwwroot folder before the grunt task is executed. I have other grunt tasks that 'clean' the wwwroot/lib folder so I store my source html(s) in another folder. That may also help if you are not doing that.
If all else fails, run in verbose -V (like alex said). The task source file is in the following location. You can also add additional debug in this file to further trouble shoot.
node_modules\grunt-angular-templates\tasks\angular-templates.js
this.files.forEach(function(file) {
if (!file.src.length) {
grunt.log.warn('No templates found');
}
This is the setup we use.
Project structure
Source
project/assets/templates/admin/partials/(html files here)
Output
project/wwwroot/lib/templates(html files here)
Grunt Task
ngtemplates: {
app: {
cwd: 'assets/templates',
src: '**/partials/*.html',
dest: 'assets/templates/partials.js',
options: {
module: 'cms.admin'
}
}
},
The Output Generates
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('Admin/partials/navmenu.template.html',
"<nav class=\"navbar navbar-default navbar-fixed-top\">\r" +
"</nav>"
);
}]);
Your problem probably lies with your src: wwwroot/lib/angular-toastr/**.html
Maybe try using this grunt plugin, it's easy to use and does the same thing.
https://github.com/karlgoldstein/grunt-html2js
grunt.initConfig({
html2js: {
options: {
// custom options, see below
},
main: {
src: ['src/**/*.tpl.html'],
dest: 'tmp/templates.js'
},
},
})
Try running the task individually like this: grunt ngtemplates -v. The -v argument stands for verbose mode. You should get the filenames that have been read. If there are no files being read, you might have a file path problem.
For simplicity or to avoid the rabbit whole, you can also manually push the template to the cache so you can test the toastr issue.
Go to http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
Convert the html to javascript
Use the output in the following code to cache manually.
var strVar = "";
strVar += "";
strVar += "<div class=\" container-fluid wrapper-md\">";
strVar += " <h3>Title<\/h3>";
strVar += " <div id=\"markupArea\"> <\/div>";
strVar += " ";
strVar += "<\/div>";
strVar += "";
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('<CacheKEy>',strVar );
}]);

Extensible.log is undefined

I am trying to get the Calendar Pro from Extensible to work.
if I do everything as the example says here, I get an undefined for the log function on Extensible.js :
However everything looks alright in my code :
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "js/lib/extensible-1.5.2/src",
"Extensible.example": "js/lib/extensible-1.5.2/examples"
}
});
Ext.require([
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Both the src and the examples paths are correct.
My Extinsible folder structure sits next to the extjs src like this :
It seems like I am missing something or Extensible is not yet being initialised properly.
Looks like you just forgot to include the Extensible.js by adding it to your requires statement:
Ext.require([
'Extensible.Extensible', //here
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
This will include the main Extinsible.js file as well as the calendar and example files.
As mentioned on the support forums:
The Extensible.log error typically means that you are using the source
code from Github without compiling it first. Either run the build
script per the README file, or stick to the download zip containing
the pre-built files.
If you are using a properly-built version of the framework and still getting this error then you might provide more details about how you set things up.

How to turn off js indentation warning in grunt, yeoman, angular js project setup

I originally asked for help as why grunt complains js indentation for the below code. I would like to turn off grunt's indentation rather than fixing the indentation. Is there way in grunt which will turn off indentation for js files?
I use emacs to write angular js code. I have the project setup with Yeoman and grunt. I am not sure why grunt complains about indentation for the following code -
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{ color }}">Hello World</p>',
link: function (scope, elem) {
elem.bind('click', function () {
// grunt warning for the following: line Expected 'elem'
// to have an indentation at 9 instead at 3.
elem.css('background-color', 'white');
});
}
};
});
I am new to angular and have no idea why the indentation giving warning which looks ok to me. Any help on this.
I think it's likely this is JSHint, not Grunt that's complaining - Grunt is a task runner, and JShint is a common task run to enforce coding style.
At the top of your JS file, you can put the following:
/* indent: 0 */
This will disable it per file.
You can also override this in your JSHint settings in your grunt configuration file.
If you setup the project from yeoman you can find this file .jshintrc in project root directory. If the file doesn't exists then you can create one.
Add the following line to the file
{
"indent": false
}

Uglifying a RequireJS/Backbone project into one single .js file?

I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})

Resources