protractor 3.0.0 and cucumber automated testing - javascript

I am currently using protractor, cucumber and chai/chai-as-promised for my automated tests. My current code is using protractor 1.8.0 and I would like to update it to the most recent version. The problem is that the most recent version of protractor doesn't support cucumber.
To use cucumber as your framework, protractor (http://angular.github.io/protractor/#/frameworks) points you to using protractor-cucumber-framework (https://github.com/mattfritz/protractor-cucumber-framework). I have tried integrating this with my current code and some smaller example projects with no luck at getting them working. The main error I get is:
Error: Step timed out after 5000 milliseconds at Timer.listOnTimeout
(timers.js:92:15)
I have tried changing the default timeout globally as cucumber suggests by:// features/support/env.js
var configure = function () {
this.setDefaultTimeout(60 * 1000);
};
module.exports = configure;
But I seem to be missing something with my setup.
So, does anyone know of a good example that can show me the proper setup for the new protractor/cucumber framework? If not, does anyone know of an example that shows how to change the default timeout globally?

You should add
this.setDefaultTimeout(60000);
to one of your step_def files. For example:
module.exports = function () {
this.setDefaultTimeout(60000);
this.After(function (callback) { ... }
}
Or you should add //features/support/env.js to
cucumberOpts:{require: ['//features/support/env.js']}
to array with your stepDefinition files

thx to #Ivan,
with cucumber-protractor-framework and typescript:
in protractor.conf.js
cucumberOpts: {
compiler: "ts:ts-node/register",
require: [
'./src/env.ts', //<- added
'./src/**/*.steps.ts'
]
},
in src/env.ts:
import {setDefaultTimeout} from 'cucumber';
setDefaultTimeout(9001);

Related

differentiate between make and package in Electron Forge config

I have an Electron Forge config file set up with many options and it all works automagically and beautifully (thanks Forge team!!). But I have found certain situations where I might want to handle a bare npm run package differently than a full npm run make (which as I understand it runs the package script as part of its process). Is there any way to programmatically detect whether the package action was run direct from the command line rather than as part of the make process, so that I can invoke different Forge configuration options depending? For example sometimes I just want to do a quick build for local testing and skip certain unnecessary time-consuming steps such as notarizing on macOS and some prePackage/postPackage hook functions. Ideally I'm looking for a way to do something like this in my Forge config file:
//const isMake = ???
module.exports = {
packagerConfig: {
osxNotarize: isMake ? {appleId: "...", appleIdPassword: "..."} : undefined
},
hooks: {
prePackage: isMake ? someFunction : differentFunction
}
}
You can do it by process.argv[1]:
let isMake;
if (process.argv[1].endsWith('electron-forge-make.js') {
isMake = true;
} else {
isMake = false;
}
module.exports = {
// ...
}
When calling process.argv, it returns an array with two strings: The first one with node.js directory and the second one with electron forge module directory.
The make module ends with electron-forge-make.js and package module ends with electron-forge-package.js. So you can look at the end of it and determine whether it's package or make.

Integrating Jest and Rewire

Working on getting a project transitioned over from Mocha to Jest to take advantage of the speed in running tests as well as the Jest framework itself and running into an issue. Rewire is used pretty extensively in the codebase and I'm having an issue when running the gulp-jest task and only for those files that use rewire. I assume it has something to do with modules loading or not loading, but I'm stumped. Here's the really bare-bones gulp task, doesn't have much to it. I've already run through an extensive codemod on the codebase and many tests pass, just not those that use rewire.
gulp.task('jest', function() {
process.env.NODE_ENV = 'test';
return gulp.src('name/path').pipe(
jest({
preprocessorIgnorePatterns: ['<rootDir>/node_modules/'],
automock: false,
resetModules: true,
setupFiles: ['./jestsetup.js']
})
);
});
gulp.task('newtest', function(callback) {
runSequence('env', 'jest', callback);
});
Any time the rewire-related files are run, they complain about the file not being found. Am I missing anything here? I'm certain the modules themselves have the correct path set for the require.
Here's the actual error from jest/rewire:
FAIL path/to/folder/file/app.test.js
● Test suite failed to run
Cannot find module '../../../../path/to/folder/file/app'
at Function.Module._resolveFilename (module.js:469:15)
at internalRewire (node_modules/rewire/lib/rewire.js:23:25)
at rewire (node_modules/rewire/lib/index.js:11:12)
at Object.<anonymous (path/to/folder/file/app.test.js:10:14)
at process._tickCallback (internal/process/next_tick.js:109:7)
Using node 6.X, jest 20.x
Thanks in advance!
Jest has its own mechanism of mocking import, it's called jest.mock.
You will need to switch to using that instead of rewire.
Example
// banana.js
module.exports = () => 'banana';
// __tests__/test.js
jest.mock('../banana');
const banana = require('../banana'); // banana will be explicitly mocked.
banana(); // will return 'undefined' because the function is auto-mocked.
example was taken from here
To my surpise, Proxyquire was not compatible with jest. To mock a dependency you would need to utilize a mocking library, like rewiremock.
Please have a look at this answer and this REPL example on how to successfully mock dependent packages.

ember tests passing in chrome, not in phantomjs

I have tests for an addon which pass in chrome, but fail in phantomjs.
It seems to be a problem similar to this question. However, I tried the solution there and it didn't work for me.
The code is all available in the public repo linked above. The failures are exhibited in the failing travis build on github. Any ideas on how to diagnose better and fix?
EDIT -- actual error message
Died on test #1 at http://localhost:7357/assets/test-support.js:3062
at test (http://localhost:7357/assets/test-support.js:1945)
at test (http://localhost:7357/assets/dummy.js:2090)
at http://localhost:7357/assets/dummy.js:2885
at http://localhost:7357/assets/vendor.js:150
at tryFinally (http://localhost:7357/assets/vendor.js:30)
at http://localhost:7357/assets/vendor.js:156
at http://localhost:7357/assets/test-loader.js:29
at http://localhost:7357/assets/test-loader.js:21
at http://localhost:7357/assets/test-loader.js:40
at http://localhost:7357/assets/test-support.js:6775: Can't find variable: Symbol
UPDATE
Following up on a hint from #knownasilya, I tried forcing optional babel transform es6.spec.symbols on: in ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberAddon(defaults, {
// Add options here
+ babel: {
+ optional: ['es6.spec.symbols']
+ }
});
However -- no luck. It does look like an es6 transpilation problem, though. Did I not pass the option successfully? Any other hints? I'll be happy to post code snippets if you don't want to look in the repo. :)
UPDATE 2
Including as well:
+ includePolyfill: true
works!
Now I'm on to:
ReferenceError: Can't find variable: requestAnimationFrame
I'm looking for a polyfill for this as well... but looking at the testem configuration for ember-collection, which seems to have a similar configuration, I notice that phantomjs testing is turned off! Now the question is: best way to test requestAnimationFrame in phantomjs?
The offending culprit is Can't find variable: Symbol, which is an ES2015 (ES6) feature, which is why the es5 shim didn't work for you.
Since babel doesn't include polyfills by default, you need to force ember-cli-babel to include the polyfills.
// ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
const app = new EmberApp(defaults, {
'ember-cli-babel': {
includePolyfill: true
}
});
return app.toTree();
};
For details of the available options, see https://github.com/babel/ember-cli-babel#options
For a more comprehensive solution, give babel6 (https://github.com/ember-cli/ember-cli/pull/6828) and targets (https://github.com/ember-cli/ember-cli/pull/6776) a try.
Note: The polyfill includes core.js which includes Symbols.

Using Jasmine Ajax

I am writing some tests with Jasmine. I am running those tests via Gulp. I want to use the Jasmine Ajax plugin. However, I cannot figure out how to include it into my tests. Right now, I have the following:
tests.js
describe('MyApp', function() {
beforeEach(function() {
jasmine.Ajax.install();
});
it('should run an ajax request', function() {
// test ajax
});
});
Once again, I'm running this via Gulp. So, in my gulpfile.js I have the following:
gulpfile.js
var gulp = require('gulp');
var jasmine = require('gulp-jasmine');
gulp.task('test', function() {
return gulp
.src('tests/*.js')
.pipe(jasmine());
});
When I execute this, I get the following from the command-line:
TypeError: Cannot read property 'install' of undefined.
Its like Jasmine Ajax isn't getting loaded. Yet, I'm not sure how to load it. Can someone please help me solve this issue?
Thank you.
I haven't tested this myself since I don't have enough info to recreate your setup, but you could try to put the mock-ajax.js file in the helpers directory, that is where the default configuration of jasmine-npm, which is used by gulp-jasmine, looks for them.

Switch between angular test/dev module and production module

I am implementing and an Angular app. In e2e tests, I want to mock some of the request to the server and pass through some i.e I want to use e2e httpBackend.
Here is Vijittas example of how to use the HttpBackend.
` http://jsfiddle.net/vojtajina/DQHdk/ `
Now, here is the dilemma: When I am testing I want my application to boostrap with development module i.e.
<html ng-app="AppDevModule">
and when I run the server I want the production module to be included.
<html ng-app="AppCoreModule">
but I don't find it reasonable to change the HTML whenever I want to change between development mode and production mode.
The documentation of e2e httpBackend
provides a code snippet for including a development module, but they didn't mentioned anything about the problem and the inclusion of the dev app.
I am using angular testacular. I tried to configure it in the e2e tests like this:
describe("DHCP Client e2e. ", function () {
beforeEach(function () {
var fakeAppModule = angular.module('AppCoreModule', ['AppCoreModule', 'ngMockE2E']);
fakeAppModule.run(function ($httpBackEnd) {
var networkInterface = [
{
'secondarySubnets':[
{"dhcpOfferOptions":{"dnsServers":["8.8.8.8"], "offerTime":"400", "leaseTime":"600"}, "rangesLimits":[],
"network":"192.168.0.0", "slash":"24", "gateway":"192.168.0.1",
"isDynamic":"dynamic", "description":"asdsadsa"}
]
},
{
'secondarySubnets':[
{"dhcpOfferOptions":{"dnsServers":["8.8.8.8"], "offerTime":"400", "leaseTime":"600"}, "rangesLimits":[],
"network":"192.168.0.0", "slash":"24", "gateway":"192.168.0.1",
"isDynamic":"dynamic", "description":"asdsadsa"}
]
}
];
$httpBackEnd.whenGET('/^\/view\//').respond(200, '<div></div>');
$httpBackEnd.whenGET('/r/networkInterface').respond(200, networkInterface);
$httpBackEnd.whenGET('./../main/webapp/r/networkInterface').respond(200, networkInterface);
});
fakeAppModule.config(function ($provide) {
$provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});
});
but, things do not go as I expect.
Based on the following thread:
https://groups.google.com/forum/?fromgroups=#!topic/angular/3Xm7ZOmhNp0
it looks like mock backend is ment to be used when the real one is not yet implemented. After this is in place the real one is recommended to be used as maintaining two versions may lead to tests not really proving the production application working correctly.
To sum up switching between two application modules for testing and production should be avoided if possible.

Categories

Resources