Karma singleRun not quitting automatically - gulp

My karma test runner isn't automatically quitting after tests have finished, even though my config has singleRun set to true and I'm not auto-watching files, which should make the test runner run once, then quit according to the docs.
module.exports = function(config) {
config.set({
basePath: '',
browsers: ['PhantomJS'],
frameworks: ['browserify', 'jasmine'],
files: [
{ pattern: 'test/*.js', watched: false }
],
preprocessors: {
'static/js/src/*.js': ['browserify'],
'test/*.js': ['browserify']
},
browserify: {
debug: true,
transform: [["babelify", { "presets": ["es2015"] }]]
},
colors: true,
reporters: ['progress'],
singleRun: true,
autoWatch: false
});
};
When run via my gulp test command:
gulp.task('test', function(done) {
new Karma({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, done).start();
});
the tests complete:
[09:18:38] Using gulpfile ~/static-projects/tic-tac-toe-es6/gulpfile.js
[09:18:38] Starting 'test'...
04 02 2016 09:18:40.502:INFO [framework.browserify]: bundle built
04 02 2016 09:18:40.509:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/
04 02 2016 09:18:40.523:INFO [launcher]: Starting browser PhantomJS
04 02 2016 09:18:41.157:INFO [PhantomJS 1.9.8 (Linux 0.0.0)]: Connected on socket /#xIZCPzrCyB2xljZ7AAAA with id 64233425
PhantomJS 1.9.8 (Linux 0.0.0): Executed 9 of 9 SUCCESS (0.042 secs / 0.003 secs)
[09:18:41] Finished 'test' after 3.1 s
However, I have to manually quit the test runner via Ctrl + c. What am I doing wrong?

I'm having this same problem. There are various threads that elude to this problem with various fixes claimed for this:
https://github.com/karma-runner/gulp-karma/issues/3
https://github.com/karma-runner/karma/issues/1035
However, as far as I can tell this is still an issue (or maybe it's resurfaced?). The only way I've found to successfully execute karma from grunt is by spawning a child process to start karma.
var spawn = require('child_process').spawn;
gulp.task('test', function(done) {
spawn('karma', ['start', __dirname + '/karma.conf.js'], { stdio : 'inherit' });
});

Related

GULP - Running task conditionally on the first time and then always on watch (done is not a function)

I have this task from RealFaviconGenerator that creates all the favicon based on a single file:
function generateFavicon(done) {
return $.realFavicon.generateFavicon({
masterPicture: 'app/favicon.svg',
dest: 'app/favicon/',
iconsPath: '/favicon',
design: {
ios: {
pictureAspect: 'backgroundAndMargin',
backgroundColor: '#ffffff',
margin: '14%',
assets: {
ios6AndPriorIcons: false,
ios7AndLaterIcons: false,
precomposedIcons: false,
declareOnlyDefaultIcon: true
}
},
desktopBrowser: {},
windows: {
pictureAspect: 'noChange',
backgroundColor: '#ffffff',
onConflict: 'override',
assets: {
windows80Ie10Tile: false,
windows10Ie11EdgeTiles: {
small: false,
medium: true,
big: false,
rectangle: false
}
}
},
androidChrome: {
pictureAspect: 'noChange',
themeColor: '#ffffff',
manifest: {
display: 'standalone',
orientation: 'notSet',
onConflict: 'override',
declared: true
},
assets: {
legacyIcon: false,
lowResolutionIcons: false
}
},
safariPinnedTab: {
pictureAspect: 'blackAndWhite',
threshold: 57.03125,
themeColor: '#004c96'
}
},
settings: {
scalingAlgorithm: 'Mitchell',
errorOnImageTooSmall: false,
readmeFile: false,
htmlCodeFile: false,
usePathAsIs: false
},
markupFile: FAVICON_DATA_FILE
}, function () {
done();
});
}
I want to run this task while i'm running gulp serve only if the favicon folder that creates the generateFavicon task is missing.
So I have done this:
serve = series(clean, favicon = (done) => {
fs.existsSync('app/favicon/') ? done() : generateFavicon();
}, parallel(views, styles, scripts, modernizr, fonts), startAppServer);
By doing this the task creates all the assets I need but the series won't continue:
[09:37:24] Starting 'serve'...
[09:37:24] Starting 'clean'...
[09:37:24] Finished 'clean' after 7.27 ms
[09:37:24] Starting 'favicon'...
[09:37:59] 'favicon' errored after 35 s
[09:37:59] TypeError: done is not a function
Running gulp serve again now that the directory exists will make everything go ok:
[09:43:51] Starting 'serve'...
[09:43:51] Starting 'clean'...
[09:43:51] Finished 'clean' after 6.99 ms
[09:43:51] Starting 'favicon'...
[09:43:51] Finished 'favicon' after 293 μs
[09:43:51] Starting 'views'...
[09:43:51] Starting 'styles'...
[09:43:51] Starting 'scripts'...
[09:43:51] Starting 'modernizr'...
[09:43:51] Starting 'fonts'...
[09:43:58] Finished 'fonts' after 6.76 s
[09:43:59] Finished 'modernizr' after 7.77 s
[09:44:11] Finished 'scripts' after 19 s
[09:44:11] Finished 'views' after 19 s
[09:44:11] Finished 'styles' after 20 s
[09:44:11] Starting 'startAppServer'...
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:9000
External: http://192.168.13.117:9000
---------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
---------------------------------------
[Browsersync] Serving files from: .tmp
[Browsersync] Serving files from: app
On the other end though, I also have a watch from when the favicon file will change (and it will) and it runs ok:
watch('app/favicon.svg', generateFavicon);
[09:47:57] Starting 'generateFavicon'...
[09:48:28] Finished 'generateFavicon' after 31 s
What can i do with the error "done is not a function"?d
You need to pass done to your generateFavicon in the serve task:
serve = series(clean, favicon = (done) => {
fs.existsSync('app/favicon/') ? done() : generateFavicon(done);
}, parallel(views, styles, scripts, modernizr, fonts), startAppServer);

Why does gulp watch continuously output starting\finished to terminal

After migrating gulp to gulp 4, terminal continuously outputs "Starting" and "Finished" after a single change\save to a scss file. Is this normal? The script is doing it's job, but the infinite output does not seem right. My script is small, so maybe someone sees something that I do not. My site is running on localhost IIS 7.5 website with bindings set to IP address.
Help is much appreciated. Thanks!
The only gulp migration added is gulp.series('css')
var sitename = 'mysitename';
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + sitename + '/',
scss = root + 'sass/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root + '/dist/css/'))
//.pipe(browserSync.stream());
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
host: 'example.com',
proxy: 'example.com',
port: 80
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], gulp.series('css') );
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
gulp.task('default', gulp.series('watch') );
If my style.scss file is saved, terminal output continues infinitely...
C:\Workspace\mysite\gulp-dev>gulp
[12:00:37] Using gulpfile
C:\Workspace\mysite\gulp-dev\gulpfile.js
[12:00:37] Starting 'default'...
[12:00:37] Starting 'watch'...
[Browsersync] Proxying: http://example.com
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:81
External: http://example.com:81
-----------------------------------
UI: http://localhost:3001
UI External: http://example.com:3001
-----------------------------------
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 117 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 32 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 55 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 63 ms
[12:00:49] Starting 'css'...
[12:00:49] Finished 'css' after 26 ms
It is occurring because you are watching the folder you are outputting the css to:
gulp.watch([root + '**/*.css'
.pipe(gulp.dest(root + '/dist/css/')
If a "globstar" [the **] is alone in a path portion, then it matches zero or
more directories and subdirectories searching for matches.
"And subdirectories" is the part that is catching you. So your "root/**/.css" includes "root/dist/css". Everytime the 'css' task is riggered it writes to the folder you are watching again, so the task gets retriggered...etc. This is why you don't usually watch your entire root, just wherever the src is located and then write out to a different place.
glob primer

Can not access Chrome headless debug

I am running a angular 5 unit test on a headless server in Karma and Jasmine. I am using chrome headless to run the tests.
I am not able to access Chrome's debug mode when using with --remote-debugging-port=9223. I tried with http://35.1.28.84:9223 in my remote chrome url.
I made sure the all interfaces are listening with host: '0.0.0.0'. I made sure the port was open also.
How come I am not able to access chrome's debugger remotely?
START:
29 03 2018 15:38:05.480:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
29 03 2018 15:38:05.482:INFO [launcher]: Launching browser MyHeadlessChrome with unlimited concurrency
29 03 2018 15:38:05.497:INFO [launcher]: Starting browser ChromeHeadless
29 03 2018 15:38:18.487:INFO [HeadlessChrome 0.0.0 (Linux 0.0.0)]: Connected on socket pfKmImL3pGU9ibL7AAAA with id 10485493
headless-karma.conf.js
module.exports = function(config) {
config.set({
host: '0.0.0.0',
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-mocha-reporter'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('#angular/cli/plugins/karma')
],
reporters: ['mocha'],
port: 9876, // karma web server port
colors: true,
angularCli: {
environment: 'dev'
},
browsers: ['MyHeadlessChrome'],
customLaunchers: {
MyHeadlessChrome: {
base: 'ChromeHeadless',
flags: [
'--disable-translate',
'--disable-extensions',
'--no-first-run',
'--disable-background-networking',
'--remote-debugging-port=9223',
]
}
},
autoWatch: false,
singleRun: true,
concurrency: Infinity
});
};
one#work:~/github/MCTS.UI (dh/headless-unittests)
$ google-chrome --version
Google Chrome 64.0.3282.167
one#work:~/github/MCTS.UI (dh/headless-unittests)
$ google-chrome-stable --version
Google Chrome 64.0.3282.167
There is another parameter you need to supply to chrome:
--remote-debugging-address=0.0.0.0
Use the given address instead of the default loopback for accepting remote debugging connections. Should be used together with --remote-debugging-port. Note that the remote debugging protocol does not perform any authentication, so exposing it too widely can be a security risk.

BrowserSync.reload causes "write after end" during gulp task

I am trying to get browserSync to work with a watch task for a Polymer app. Here is my gulp file:
function source() {
return project.splitSource()
.pipe(gulpif('**/*.html', html.lint())).on('end', log('Linted HTML'))
.pipe(gulpif('**/*.html', html.minify())).on('end', log('Minified HTML'))
.pipe(gulpif('**/*.js', javascript.minify())).on('end', log('Minified Javascript'))
.pipe(gulpif('**/*.js', javascript.babelify())).on('end', log('Transpiled Javascript'))
.pipe(gulpif('**/*.{gif,jpg,svg}', images.minify())).on('end', log('Minified Images'))
.pipe(project.rejoin()); // Call rejoin when you're finished
}
function dependencies() {
return project.splitDependencies()
.pipe(project.rejoin());
}
gulp.task('default', gulp.series([
clean.build,
project.merge(source, dependencies),
project.serviceWorker
]));
gulp.task('reload', function(){
browserSync.reload();
} );
gulp.task('dev', gulp.series(
project.merge(source, dependencies)
));
gulp.task('browser-sync', function(){
return new Promise(function(resolve){
resolve( browserSync({
port: 5000,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
server: {
baseDir: ['./'],
}
})
)
});
})
gulp.task('watch', function(){
gulp.watch(['**/*.html'], gulp.series('dev','reload'));
gulp.watch(['**/*.js'], gulp.series('dev', 'reload'));
});
gulp.task('serve',
gulp.series(
'dev',
gulp.parallel('browser-sync','watch')), function(){
return gulp.src('**/*.html', {passthrough:true})
}
);
The project.splitSource is a polymer starter kit specific function that splits web components into seperate html , css, js entities so you can perform whatever tasks you need on them.
When I run 'gulp serve' , the tasks complete and my app is served.
As soon as I change the contents of a file, the watch runs the 'dev' task and attempts to run the reload task, and thats where it crashes. Here is the command line messages for this entire process :
→ gulp serve
[08:53:43] Using gulpfile ~/Documents/Projects/unicef/etools-dashboard/gulpfile.js
[08:53:43] Starting 'serve'...
[08:53:43] Starting 'dev'...
[08:53:43] Starting 'output'...
[08:55:20] Linted HTML
[08:55:20] Minified HTML
[08:55:20] Minified CSS
[08:55:20] Minified Javascript
[08:55:20] Transpiled Javascript
[08:55:20] gulp-imagemin: Minified 511 images (saved 212 kB - 3.1%)
[08:55:20] Minified Images
[08:55:29] Finished 'output' after 1.75 min
[08:55:29] Finished 'dev' after 1.75 min
[08:55:29] Starting 'browser-sync'...
[08:55:29] Starting 'watch'...
[08:55:30] Finished 'browser-sync' after 551 ms
[PSK] Access URLs:
--------------------------------------
Local: http://localhost:5000
External: http://192.168.0.102:5000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.102:3001
--------------------------------------
[PSK] Serving files from: ./
[08:56:20] Starting 'dev'...
[08:56:20] Starting 'output'...
[08:56:20] Finished 'output' after 288 ms
[08:56:20] Finished 'dev' after 290 ms
[08:56:20] Starting 'reload'...
[PSK] Reloading Browsers...
Error: write after end
at writeAfterEnd (_stream_writable.js:159:12)
at StreamAnalyzer.Writable.write (_stream_writable.js:204:5)
at PassThrough.ondata (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:546:20)
at emitOne (events.js:77:13)
at PassThrough.emit (events.js:169:7)
at readableAddChunk (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:217:18)
at PassThrough.Readable.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:176:10)
at PassThrough.Transform.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:123:32)
at afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:79:51)
at TransformState.afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:58:12)
[08:56:21] The following tasks did not complete: serve, <parallel>, watch, <series>, reload
[08:56:21] Did you forget to signal async completion?
Any idea why the reload causes this to crash? I've googled this "write after end" and seems like the stream needs to be returned or async actions need an explicit done cb, but I'm not sure how to do that with gulp 4. Any advice would be of great help.

gulp and karma, file karma.conf.js does not exist

I have a basic AngularJS app and want to have all my terminal command run with gulp tasks eg $ gulp dev for the development server and $ gulp unitTest for testing etc.
I have installed Gulp as per the Docs using $ npm install --save-dev gulp with my gulpfile.js in the root of the project file. I have also done the same for karma's install and config file.
It is worth stating now that I want all the npm installs tagged with --save for easily move the project around the office and servers.
When it comes to adding the task to Gulp I have to us a relative (to the karma module) path for the configFile option to find the config but then It does not find the tests.
the following gulpfile.js produces the error ERROR [config]: File karma.conf.js does not exist!
var gulp = require('gulp'),
// ....
karma = require('karma').Server;
gulp.task('test', function(done) {
var karmaServerOptions = {
configFile: 'karma.conf.js', // works if relative path from ./node_modules/karma/lib/config.js
singleRun: true
};
karma.start(
karmaServerOptions,
function(exitStatus) {
done(exitStatus ? 'There are failing tests' : undefined);
}
);
});
karma.conf.js:
// Karma configuration
// Generated on Thu Aug 06 2015 13:38:12 GMT+0100 (BST)
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: [
// '**/*js',
'node_modules/angular/angular.js',
'app/**/*.js',
// 'unitTests/**/*Spec.js',
// 'unitTests/**/*spec.js'
'unitTests/**/*.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_INFO,
// 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: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
}
note: The files array is a bit of a mess as it still has some, but not all, of my experiments in it.
See gulp task can't find karma.conf.js for an explantation about __dirname.
Or use:
var Server = require('karma').Server
gulp.task('test', function (done) {
new Server({
configFile: require('path').resolve('karma.conf.js'),
singleRun: true
}, done).start();
});