How do I get Yeoman to continuously run tests - gruntjs

When I run grunt server, my file edits are picked up and the browser refreshed through livereload.
When I run grunt test, it runs once and shuts down.
This behavior can be simulated by running
yo angular --minsafe mytest
grunt test
When I change karma.unit.singlerun = false in the Gruntfile, grunt test now says that a watcher is running, but no file changes seem to trigger running the tests again.
How do I get the reload capability with the tests similar to the way linemanjs works?

You were almost there! There's an additional option you can set in the Gruntfile called autoWatch, which monitors the files specified in your karma.conf.js for changes. A complete entry in your Gruntfile could look like this:
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true,
autoWatch: false
},
server: {
configFile: 'karma.conf.js',
singleRun: false,
autoWatch: true
}
}

I set up as following
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: false,
autoWatch: true
}
}
It stands but can't rerun unit test when I change files, grunt karma:unit output
PhantomJS 1.9.7 (Linux) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
Expected 3 to be 100.
PhantomJS 1.9.7 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.04 secs / 0.014 secs)
Found it: I use shared folder in Virtual and changing it outside virtual machine so that autoWatch can't recognize these changes.

Related

How to force jshint to print source file where the the hint applies?

I am running jshint from grunt.
Here is my config:
jshint: {
files: ['Gruntfile.js', 'app/htmlplayer/js/directives/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
But after running grunt test which triggers jshint in the console are printed hints and at the end is printed:
"118 errors in 30 files"
Here is one example
How I can find a file where this problem is found?
Is there a way to configure jshint to specify source file responsible for each error?
You will need to change the reporter option, to modify the plugin's output.
By default (when reporter value is null), the output is like -
Switching to checkstyle reporter, will give an output like -
Switching to jslint reporter, will give an output like -
Other than this, you can use custom reporters as well, for example the jshint-stylish -
The grunt task configuration would be -
jshint: {
all: ['entry.js'],
options: {
reporter: require('jshint-stylish')
}
}
You can find other custom reporters at - https://www.npmjs.com/search?q=jshint%20reporter

Looking for Modernizr references

I'm trying to use the grunt-modernizr plugin in my project but I'm receiving the following output when I run tasks:
Running "modernizr:dist" (modernizr) task
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
I'm not receiving any type of error the terminal just goes back to the directory that I'm in, as if it's just giving up.
Here is my grunt file:
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr: {
dist: {
"dest": "javascripts/modernizr-custom.js",
"parseFiles": true,
"customTests": [],
"devFile": "javascripts/modernizr-custom.js",
"outputFile": "javascripts/min/modernizr-custom.min.js",
"tests": [
"pointerevents",
"css/pointerevents"
],
"extensibility": [
"setClasses"
],
"uglify": false
}
},
cssmin: {
target: {
files: {
'css/min/bootstrap.min.css': ['css/bootstrap.css']
}
}
},
});
grunt.loadNpmTasks("grunt-modernizr");
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr', 'cssmin']);
};
Output from running grunt --verbose:
Initializing
Command-line options: --verbose
Reading "gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Registering "grunt-modernizr" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr
Registering "grunt-contrib-cssmin" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Loading "cssmin.js" tasks...OK
+ cssmin
Loading "gruntfile.js" tasks...OK
+ default
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "modernizr" task
Running "modernizr:dist" (modernizr) task
Verifying property modernizr.dist exists in config...OK
Files: -> javascripts/modernizr-custom.js
Verifying property modernizr exists in config...OK
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
This is something I just came across too and seems to be grunt-modernizr stopping after customizr doesn't find any files to crawl (it crawls by default).
If you add "crawl": false to your modernizr:dist task that should fix the problem.
Also, I think "extensibility": [ "setClasses" ], should be "options": [ "setClasses" ],.
To use the grunt-modernizr task to crawl your code for Modernizr references you'll have to look at the config properties for the customizr task as this is part of grunt-modernizr 's node_modules:
modernizr: {
dist: {
dest: 'bower_components/modernizr/build/modernizr.custom.js',
uglify: false,
options: [
'setClasses',
'addTest'
],
files: {
src: ['js/app/**/*.js', 'js/app/*.js']
}
}
}
devFile: doesn't seem to matter where you point at
dest: instead of outputFile, note I'm just outputting to a build directory that's not part of the package
uglify: false if you have other minifying options like bundleconfig.json
options: to bypass the default options { "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }
files: to enlist your crawlable director(y|ies), make sure you take care of the root files and/or subdirectories as well
Load the required tasks, in my case:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-modernizr');
grunt.loadNpmTasks('grunt-contrib-copy');
Refer to the 'modernizr:dist' task => grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);
Which results in an unminified 34kb file:
Running "clean:files" (clean) task
19 paths cleaned.
Running "modernizr:dist" (modernizr) task
Looking for Modernizr references
1 match in js/app/classes/yambo.options.js
bgpositionxy
1 match in js/app/modules/yambo.audio.js
audio
Ready to build using these settings:
setClasses, addTest
Building your customized Modernizr...OK
Success! Saved file to bower_components/modernizr/build/modernizr.custom.js
Process terminated with code 0.
Running "copy:main" (copy) task
Copied 11 files
Done, without errors.
This way there's no need to even go to the online build to add a feature test. Simply reference Modernizr throughout your js code:
window.Yambo = (function($, modernizr, ns){
ns.Audio = {
extension: (function () {
return modernizr && modernizr.audio.mp3
? 'mp3'
: modernizr.audio.ogg
? 'ogg'
: 'wav';
}())
};
return ns;
}(window.jQuery, window.Modernizr, window.Yambo || {}));
Make sure to use the correct property name for a feature detection, so customizr can pick it up and provide a test to your custom build.
This should be also possible for css but haven't been testing that for the moment.
It looks like you missed source files.
http://gruntjs.com/configuring-tasks#files-object-format
Try to include
"dist": {
"files": {
"src": ['!<%= appDir %>assets/js/bower/modernizr/**']
}
}

How to run multiple karma targets in Grunt?

We're using Grunt to build multiple, but similar, applications in one build.
It's a rather complex and large project with a folder for each application and a folder named share with lots of shared components.
multiple karma targets
Angular injects dependency by name (String) and our applications have files with the same names like HomeController, MenuController. This forces us to split up the karma targets per application so dependencies are loaded only from the shared and specific application being tested.
Fatal error
When using grunt to run the karma targets it only runs the first successful and fails to run the second. Fatal error: listen EADDRINUSE The error is somehow related to a port being used.
Karma config (simplified)
module.exports = function(config) {
'use strict';
config.set({
autoWatch: false,
basePath: '../',
frameworks: ['jasmine'],
exclude: [],
browsers: ['PhantomJS'],
plugins: [
'karma-html-reporter',
'karma-junit-reporter',
'karma-coverage',
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-brackets'
],
singleRun: false,
colors: true,
logLevel: config.LOG_DEBUG
});
};
Grunt-karma config
var dep = [
'bower_components/**/*.js',
'app/shared/**/*.js',
];
module.exports = {
options: {
configFile: 'test/karma.conf.js',
reporters: ['brackets', 'html', 'junit', 'coverage'],
browsers: ['PhantomJS'],
port: 9002,
singleRun: true
},
A: {
options: {
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
};
How can I run both karma targets (A and B) in the same the grunt task?
My guess is I have to either reset the karma server (phantomJs?) or run them as separate "sets" on the same target, but I can't find out how to do it.
Hope anyone out there might help! Thanks!
Update1
This issue on github seems to address the same problem, but has not yet made it to a release.
Maybe you can just move your port option into the targets and choose a different port for each one?
A: {
options: {
port: 9011,
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
port: 9012,
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
workaround that works
Remove the the karma tasks from the the distribution task.
Instead of trying to run multiple karma targets in one grunt task, you can execute multiple grunt commands separately from the command line (mainly on the continuous integration server. For development there is rarely a need to run all targets)
The command could be: (optional xxxxxx is any task you want to run after testing has completed)
grunt testA && grunt testB && grunt xxxxxx

Grunt Browserify max call stack size exceeded

I am using grunt-browserify to compile my react/flux application. I've also enabled Watchify under browserify options so speed up the compile process. It compiles fine when first run, but once I change a file and it compiles again, a Maximum Call Stack Size Exceeded error appears in the browser's console and breaks the application.
It seems that Watchify is adding react/flux/other dependencies again on a recompile which causes the error. Just a theory.
Any ideas?
Grunt Task
browserify: {
dist: {
files: {
'public/dist/bundle.js': ['public/js/**/*.jsx', 'public/js/**/*.js']
},
options: {
debug: true,
bare: true,
alias: [
'./node_modules/react/dist/react-with-addons.js:react',
'./node_modules/flux/index.js:flux',
'./public/lib/react-router/react-router.js:react-router',
'./node_modules/lodash/index.js:lodash'
],
transform: [react.browserify],
watch: true,
keepAlive: true
}
}
}
Register
grunt.registerTask('compile', ['browserify']);
Did you try ignore 'public/dist/bundle.js' for watching ?

grunt-php task springing open multiple browser instances

I'm building a Gruntfile.js.
I'm trying to create tasks for responding to php requests.
Other tasks include live compiling compass/sass and live-reload.
I've hit an interesting snag:
When I start grunt, I can see in the terminal that the watch tasks is running, and that the php server is running: I get messages in terminal about certain files not being in place.
Now heres the thing... a couple of seconds after I start grunt, firefox windows start opening. (I start the task without firefox running at all. I generally use chromium and chrome).
New windows keep opening. ff messages about firefox crashing sometimes pop up. I also get windows popping up telling me that my ff profile is inaccessible - which is what I'd expect if I try and run 'firefox' from the terminal while ff is already running.
They keep popping up until I stop grunt from running. They all close immediately when I stop the task, by Ctrl-c from the terminal.
What could be causing this?
Here is my gruntfile
module.exports = function (grunt){
grunt.initConfig({
compass : {
dist : {
options : {
cssDir : 'css',
sassDir : 'sass',
debugInfo : true
}
}
},
php :{
dist : {
options : {
keepalive : true,
port: 9000
}
},
watch : {
files : ['*.html', '*.php', 'js/*', 'sass/*', 'css/*'],
tasks : ['compass'],
options : {
livereload: true
}
}
},
});
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', ['php', 'watch']) ;
} ;
Your watch task specifies that you want to use livereload - so, that's (kind of) expected, right?
See here:
https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
http://livereload.com/

Resources