I've searched around quite a bit on this problem, but can't find a solution.
I'm trying to mock my backend, which is well tested so I can completely isolate my frontend. I've tried using protractor-http-mock and also various efforts with angular-mocks.
Having settled on the angular-mocks method with HttpBackend, I'm getting this error when firing up my protractor tests:
MBP:test-site admin$ protractor protractor.conf.js
Using ChromeDriver directly...
[launcher] Running 1 instances of WebDriver
[launcher] Error: ReferenceError: window is not defined
at Object.<anonymous> (/Users/Ed/Sites/F4F/web/node_modules/angular/angular.js:30426:4)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (/Users/Ed/Sites/F4F/web/node_modules/angular/index.js:1:1)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
[launcher] Process exited with error code 100
This is my protractor.conf.js
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
chromeOnly: true,
chromeDriver: './node_modules/protractor/selenium/chromedriver',
// Framework to use. Jasmine 2 is recommended.
framework: 'jasmine2',
baseUrl: 'http://localhost:5000/',
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['./tests/**/*.js'],
// Options to be passed to Jasmine.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
}
};
And this is my test:
'use strict'
var angular = require('angular');
var angular_mock = require('angular-mocks');
var HttpBackend = require('httpbackend');
var backend = null;
describe("Footer", function () {
beforeEach(function() {
backend = new HttpBackend(browser);
});
afterEach(function() {
backend.clear();
});
describe("Display Values", function () {
it("should show correct contact details", function () {
backend.whenGET(/app/).respond({
"name": "ExampleApp",
"company": {
"code": "EXA",
"name": "ExampleApp",
"brand_name": "ExampleApp",
"head_office_id": 3,
"display_email": "[email protected]",
"display_tel": "+44 (0) 1234 56789"
}
});
browser.get('/');
var tel_li = $('#footer .top li:first-child');
var email_li = $('#footer .top li:last-child');
expect(tel_li.getText()).toEqual('+44 (0) 1234 56789');
expect(email_li.getText()).toEqual('[email protected]');
});
});
});
Can anybody help please?
--- Responding to @alecxe's comment
Revising the test to look like this:
'use strict'
describe("Footer", function () {
describe("Display Values", function () {
it("should show correct contact details", function () {
browser.get('/');
});
});
});
Gives the following result:
MBP:test-site admin$ protractor protractor.conf.js
Using ChromeDriver directly...
[launcher] Running 1 instances of WebDriver
Started
.
1 spec, 0 failures
Finished in 0.749 seconds
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 passed
Don't import angular-mocks
and angular
at all, httpbackend
don't need them to be imported:
'use strict'
var HttpBackend = require('httpbackend');
var backend = null;
describe("Footer", function () {
beforeEach(function() {
backend = new HttpBackend(browser);
});
afterEach(function() {
backend.clear();
});
describe("Display Values", function () {
it("should show correct contact details", function () {
backend.whenGET(/app/).respond({
"name": "ExampleApp",
"company": {
"code": "EXA",
"name": "ExampleApp",
"brand_name": "ExampleApp",
"head_office_id": 3,
"display_email": "[email protected]",
"display_tel": "+44 (0) 1234 56789"
}
});
browser.get('/');
var tel_li = $('#footer .top li:first-child');
var email_li = $('#footer .top li:last-child');
expect(tel_li.getText()).toEqual('+44 (0) 1234 56789');
expect(email_li.getText()).toEqual('[email protected]');
});
});
});
I had your exact issue, and ended up solving it by importing angular-mocks
as a raw string and injecting it via browser.addMockModule
:
const fs = require('fs');
const ngMock = fs.readFileSync(__dirname + '/../../node_modules/angular-mocks/angular-mocks.js', 'utf-8');
browser.addMockModule('ngMockE2E', ngMock);
browser.addMockModule('e2e', function e2e() {
angular.module('e2e', ['ngMockE2E'])
.run(['$httpBackend', function($httpBackend) {
// Your mocked calls here
}])
});
This will force the driver to compile the script during runtime, where window
is available. However, this breaks if you have browser.ignoreSynchronization = true;
however.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With