Gulp-protractor keep saying "Spec patterns did not match any files" - angularjs

I'm trying to run my end to end tests written with protractor and jasmine. It works perfectly when I call protractor protractor.config.js directly.
However, when I use gulp-protractor, I keep getting the "Spec patterns did not match any files" error and the tests do not run.
This is my protractor runner gulp task:
gulp.task('protractor-run', function (done) {
return gulp.src(["./e2e-tests/**/*-spec.js"])
.pipe(protractor({
configFile: "./config/protractor-config.js",
args: ['--baseUrl', 'http://127.0.0.1:8000']
}))
.on('error', function(e) { throw e })
});
and this is the error:
WARNING - pattern C:\path\to\app\e2e-tests\login\login-spec.js did not math any files.
[launcher] Process exited with error code 1
C:\path\to\app\node_modules\protractor\node_modules\q\q.js:126
throw e;
^
Error: Spec patterns did not match any files.
What am I missing?

I managed to get it working. By providing an empty readable stream. Then you specify your spec files in the config file instead.
var protractor = require('gulp-protractor').protractor;
gulp.task('protractor', ['webdriverUpdate'],function(){
return gulp.src([])
.pipe(protractor({
configFile: __dirname + '/protractor.conf.js'
}));
});
also don't forget the webdriverUpdate
var webdriverUpdate = require('gulp-protractor').webdriver_update;
gulp.task('webdriverUpdate', webdriverUpdate );
and in the config file this:
seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.47.1.jar',
With this I stopped getting the error.
Update
The issue #2551 is closed and fixed since 2.5.0

I resolved this in a gulpfile that launches protractor tests by putting a file path into the parameter of gulp.src(['file_path_goes_here']). The task I was trying to run had no file path between the brackets, and was throwing the error.
gulp.task('works', 'Run some tests', function() {
gulp.src(['path/to/test.spec.js'])
.pipe(protractor({
configFile: __dirname + '/../test/protractor.conf.js',
args: ['--baseUrl', 'http://localhost:9099']
}))
});
gulp.task('error', 'Run feature tests locally', function() {
gulp.src([''])
.pipe(protractor({
configFile: __dirname + '/../test/protractor_local.conf.js',
args: ['--baseUrl', 'http://localhost:9099']
}))
});

Related

gulp build fails on yo angular

I have tried many times to init a webapp by "yo angular" and chosen gulp instead of grunt,but failed with
Task 'wiredep' is not in your gulpfile
Please check the documentation for proper gulpfile formatting
then without any moving on task.
when I use ctrl + C to stop it and run with "gulp serve" or "gulp", it shows no error or warning, but the browser's console shows "Uncaught ReferenceError: angular is not defined".
then I tried to replace
gulp.task('bower', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: yeoman.app + '/bower_components',
ignorePath: '..'
})) "
.pipe(gulp.dest(yeoman.app + '/views'));
});
with
gulp.task('wiredep', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: 'bower_components',
ignorePath: '..'
}))",
.pipe(gulp.dest(yeoman.app ));
});
and delete the dist folder, just do like this click here
and I have also tried to update my npm, but they all don't work.
Any ideas?

Starting protractor through gulp

I'm trying to run protractor as a gulp task but I can't get it to work.
I've tried the gulp-protractor plugin like this:
gulp.task('protractor-server', function (done) {
var called = false;
nodemon({
script: 'test/e2e/server/server.js',
stdout: true,
ignore: ['app/**', 'node_modules'],
watch: 'test/e2e/**/*.js'
})
.on('start', function () {
if (!called) {
done();
}
called = true;
});
});
gulp.task('run-protractor', ['protractor-server'], function (done) {
return gulp.src(['test/e2e/**/*.js'])
.pipe(protractor({
configFile: __dirname + '/protractor.conf.js'
}))
.on('error', function (error) {
console.log('gulp error: ', error);
throw error;
});
});
However, firstly why do I need to use gulp.src(['test/e2e/**/*.js']) and then pipe protractor? Is it not possible to run protractor by it self since i have specified the spec files in the protractor.conf-file. (fyi I did try that but it didn't work).
Secondly, when I try and run like specified in the above snippet I keep getting errors like this: WARNING - pattern C:\[absolutepath]\test\e2e\[subfolder]\[filename].js did not match any files. for all files that exist in the e2e folder and sub-folders. What could be the reason for this?
this is my protractor conf file:
exports.config = {
specs: [
'test/e2e/[subfolder]/*.page.js',
'test/e2e/[subfolder]/*.spec.js'
],
baseUrl: 'http://localhost:3000'
};
If I start the server separately and the run protractor from the command prompt it works fine. I was thinking to use child_process.spawn and start a protractor child process but i haven't gotten that to work either. Any suggestions on how to start protractor from a gulp task?
No need to use 'test/e2e/**/*.js']
Provide all configuration in protractor.conf.js file it self.
You can use task like
gulp.task('run-protractor', ['run-server','run-webdriver'], function (done) {
//run protractor conf here
})
create run-server and run-webdriver gulp taks, test them separately once they are working, utilize them into run-protractor task.

Browserify recipe for AngularJS + source maps + minification

I am looking for a working recipe that can minify my AngularJS code and still provide a source map. Currently I have this gulp task but minification won't work:
gulp.task('browserify', function(cb) {
var bundler = browserify({
entries: [paths.browserEntry],
globals: false,
debug: !settings.PRODUCTION
})
bundler
.bundle()
.on('error', cb)
.on('log', util.log)
.pipe(gulpif(!settings.PRODUCTION, mold.transformSourcesRelativeTo(paths.js)))
.pipe(source(paths.js))
.pipe(buffer()) // because the next steps do not support streams
.pipe(concat('bundle.js'))
.pipe(gulpif(settings.server.minify.js, rename({suffix: '.min'})))
.pipe(gulpif(settings.server.minify.js, uglify()))
.pipe(gulp.dest(paths.js))
.on('end', function() {
cb()
})
})
Any clues?
You may see an example here. The example will output a minified bundle.min.js plus a bundle.map. The crucial points which makes the example works:
Installed debowerify
Installed minifyify
package.json - added transform property
"browserify": {
"transform": [
"debowerify"
]
}
Gruntfile.js - using preBundleCB to make minifyify work
preBundleCB: function (b) {
b.plugin( minifyify,
{ output: './dist/bundle.map',
map:'bundle.map'
});
}
Hope the example is useful to you.

angular-mock testing in Karma+Mocha can't find module

I'm learning AJS unit testing, with RequireJS, Karma, Mocha, Chai and angular-mocks. I've had some luck with the first four, but need to get into "real" testing and can't get angular-mocks to work. There's a lot going on, so I'll be as succinct as possible.
test/karma.conf.js
module.exports = function (config) {
config.set({
// requirejs may need to be listed before other modules (see https://github.com/princed/karma-chai-plugins#limited-requirejs-support)
frameworks: ["requirejs", "mocha", "chai"],
files: [
// load the RequireJS config files first
{pattern: "client/app/require-shared.js", watched: false},
{pattern: "test/require-test.js", watched: false},
// set included to false for files to be loaded via RequireJS
{pattern: "client/**/*.js", included: false },
{pattern: "bower_components/**/*.js", included: false, watched: false},
// Mocha stuff
{pattern: "test/unit/mocha.conf.js", watched: false},
// test files
{pattern: "test/unit/**/pageSelectorTest.js", included: false }
],
exclude: [
"client/app/bootstrap.js",
"client/app/require-main.js",
"*.conf.js"
],
reporters: ["spec"],
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
browsers: [
"PhantomJS"
],
singleRun: true
});
};
test/unit/mocha.conf.js
window.mocha.setup({
ui: "tdd"
});
test/unit/MyTest.js
define([
"angular-mocks"
,"app"
], function () {
"use strict";
var MODULE_NAME = "PageSelector";
var assert = chai.assert;
suite("Unit testing " + MODULE_NAME, function() {
suite(MODULE_NAME + " module", function () {
var appModule;
setup(function () {
// "ng" and "ngMock" modules automatically loaded
appModule = angular.mock.module(MODULE_NAME);
console.log(appModule);
});
// setup(function () {
// angular.mock.inject(function () {
//
// });
// });
test("should exist", function () {
assert.isDefined(appModule, "module exists");
});
}); // end module tests
});
});
I'll skip posting all the RequireJS config. I'm pretty sure I'm getting angular and angular-mocks, because I've worked through those errors already.
My Gruntfile simply has an option to load karma.conf.js. The output of grunt karma is:
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket WJUF8xogEo-XCG-8zzJX with id 10483911
PhantomJS 1.9.7 (Linux)
LOG LOG: undefined
Unit testing PageSelector
PageSelector module
✗ should exist
AssertionError: module exists: expected undefined to not equal undefined
at /home/client/node_modules/chai/chai.js:925
at assertEqual (/home/client/node_modules/chai/chai.js:1402)
at /home/client/node_modules/chai/chai.js:3627
at /home/client/node_modules/chai/chai.js:2648
at /home/client/test/unit/utility/pageSelectorTest.js:37
at callFn (/home/client/node_modules/mocha/mocha.js:4338)
at /home/client/node_modules/mocha/mocha.js:4331
at /home/client/node_modules/mocha/mocha.js:4728
at /home/client/node_modules/mocha/mocha.js:4819
at next (/home/client/node_modules/mocha/mocha.js:4653)
at /home/client/node_modules/mocha/mocha.js:4663
at next (/home/client/node_modules/mocha/mocha.js:4601)
at /home/client/node_modules/mocha/mocha.js:4625
at done (/home/client/node_modules/mocha/mocha.js:4300)
at callFn (/home/client/node_modules/mocha/mocha.js:4343)
at /home/client/node_modules/mocha/mocha.js:4331
at next (/home/client/node_modules/mocha/mocha.js:4626)
at /home/client/node_modules/mocha/mocha.js:4625
at done (/home/client/node_modules/mocha/mocha.js:4300)
at callFn (/home/client/node_modules/mocha/mocha.js:4343)
at /home/client/node_modules/mocha/mocha.js:4331
at next (/home/client/node_modules/mocha/mocha.js:4626)
at /home/client/node_modules/mocha/mocha.js:4630
at timeslice (/home/client/node_modules/mocha/mocha.js:5763)
PhantomJS 1.9.7 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.003 secs / 0.002 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
If I change angular.mock.module(MODULE_NAME); to angular.module(MODULE_NAME);, the assert works. What am I missing? (I apologize if there isn't enough info above. I can post more, as needed.)
I dug into angular-mocks.js. module is just a set-up for inject. On its own, it doesn't actually load a module, like angular.module does. I was using it unnecessarily for "module-level" testing, where angular.module is appropriate.
When getting in to actual controller/directive/etc. testing, I'll need the module+inject pair.

How can I automate both E2E and unit tests with Yeoman & AngularJS?

I'm using Yeoman and generator-angular to manage AngularJS apps, but I'm having trouble with automated testing.
Running grunt test will run unit tests once. I can get E2E tests to run after unit tests by altering the karma config block in Gruntfile.js, adding e2e:
karma: {
//...
e2e: {
configFile: 'karma-e2e.conf.js',
singleRun: true
}
},
Great: now when I type grunt test all tests are run. But they're only run one time, and there's a big overhead (starting compass, running the server, launching the Chrome processes, etc.). Instead, the server and Chrome processes should remain running and, when I save a test, tests should be re-run.
I can achieve this by modifying both karma.conf.js and karma-e2e.conf.js and setting singleRun = true, then running karma start in one terminal pane, and karma start karma-e2e.conf.js in another. Provided none of the ports in the karma configs conflict (which they do by default), this works. Now I'm bypassing Grunt and just doing my own thing (which seems a little silly, as Grunt is supposed to make things easier).
Anyway, after a few more changes (fixes?) — not detailed for brevity — this works but doesn't cut it: I now have to run two different commands and keep an eye on two different terminal panes. Surely there's a better way.
How can I run a single command to watch my test files and re-run tests appropriately?
Bonus question: why on Earth is this functionality not provided as is? Is it just a question of the developer(s) of generator-angular not having enough time to implement this stuff? I ask because I'm only just getting into Angular/Yeoman/Karma (as you probably noticed), and feel that automated testing of both E2E and unit tests are crucial to workflow.
As I mentioned in a comment to your question - PhantomJS saves a lot of hassle. That aside, I believe you can handle everything from within your Gruntfile and just continue to run grunt test to start the whole thing.
grunt-karma allows full customization of your karma options with some handy add-ons.
From the docs:
....
You can override any of the config file's settings directly:
karma: {
unit: {
configFile: 'karma.conf.js',
runnerPort: 9999,
singleRun: true,
browsers: ['PhantomJS']
}
}
Sharing Configs
If you have multiple targets, it may be helpful to share common
configuration settings between them. Grunt-karma supports this by
using the options property:
karma: {
options: {
configFile: 'karma.conf.js',
runnerPort: 9999,
browsers: ['Chrome', 'Firefox']
},
continuous: {
singleRun: true
browsers: ['PhantomJS']
},
dev: {
reporters: 'dots'
}
}
Additionally you may want to snoop around in Yeoman's generator-angular Gruntfile code to see what else may be available or at least mockable.
You can try this to run only e2e tests
grunt karma:e2e
Within the karma.conf.js file (approx line:38) find autoWatch = false; and change it to true.
Now if you run grunt karma:unit you will find that it leaves the test server running and any changes to project files immediately run the tests again.
//
// test/midway/appSpec.js
//
describe("Midway: Testing Modules", function() {
describe("App Module:", function() {
var module;
before(function() {
module = angular.module("App");
});
it("should be registered", function() {
expect(module).not.to.equal(null);
});
describe("Dependencies:", function() {
var deps;
var hasModule = function(m) {
return deps.indexOf(m) >= 0;
};
before(function() {
deps = module.value('appName').requires;
});
//you can also test the module's dependencies
it("should have App.Controllers as a dependency", function() {
expect(hasModule('App.Controllers')).to.equal(true);
});
it("should have App.Directives as a dependency", function() {
expect(hasModule('App.Directives')).to.equal(true);
});
it("should have App.Filters as a dependency", function() {
expect(hasModule('App.Filters')).to.equal(true);
});
it("should have App.Routes as a dependency", function() {
expect(hasModule('App.Routes')).to.equal(true);
});
it("should have App.Services as a dependency", function() {
expect(hasModule('App.Services')).to.equal(true);
});
});
});
});

Resources