search

yevhenpavliuk / ng-mock-e2e

Fake HTTP back end in Protractor end-to-end tests similarly to how it's done in AngularJS unit tests.
MIT License
15 stars 1 forks source link

httpBackend is not available when access http in a new window #6

Closed hyrongo closed 6 years ago

hyrongo commented 6 years ago

I am using Protractor and ng-mock-e2e to test my AngularJS application. When I test page(B) which is opened from page(A) by window.open, I hope the $http in page(B) will be faked by $httpBackend but it seems not available.

My Code is like

const ngMockE2E = require('ng-mock-e2e');
const {$httpBackend} = ngMockE2E;

describe('example with ngMockE2E', () => {
  beforeEach(() => {
    ngMockE2E.addMockModule();
    ngMockE2E.addAsDependencyForModule('appName');
    ngMockE2E.embedScript('bower_components/angular-mocks/angular-mocks.js');
  });

  afterEach(() => {
    ngMockE2E.clearMockModules();
  });

  it('It works!', () => {
    $httpBackend.when('GET', 'heading').respond('It works!');
    browser.get('/pageA');
    element(by.id('openB')).click();      // *(1) 
  });

*(1) This will open pageB in a new window (by window.open())and pageB will access "http://.../heading" in it‘s init.

How can I fake http in a new window that is opened by application.

yevhenpavliuk commented 6 years ago

Hi,

This requires some investigation. I’ll look into it hopefully till the end of the week and let you the result.

hyrongo commented 6 years ago

This requires some investigation. I’ll look into it hopefully till the end of the week and let you the result.

Thank you very much！

yevhenpavliuk commented 6 years ago

Hi @iport2018,

I’ve created a demo for you in the example project: https://github.com/yevhenpavliuk/ng-mock-e2e-example/commit/8ecead84af4802e6e54d2a780a912a52bac8aaec

If you’re unfamiliar with the project, check it out first — it’s a tiny demo for ngMockE2E: https://github.com/yevhenpavliuk/ng-mock-e2e-example

I added:

  1. An HTML page for a popup: 
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ngMockE2E Example</title>
</head>
<body ng-app="example">
<h1>{{::heading}}</h1>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
  2. A button to the main page — index.html — that opens the popup with window name popup: 
    <button type="button" id="open-popup-button" onclick="window.open('popup.html', 'popup', 'width=640,height=480')">Open Popup</button>

  3. Modified one of the tests to show how to switch to the popup, make assertions there, and switch back to the main window:

    fit('should have heading "It works!" if the server responds "It works!"', async () => {
$httpBackend.when('GET', 'heading').respond('It works!');
browser.get('/');
expect(browser.getCurrentUrl()).toBe('http://localhost:8000/');
expect($('h1').getText()).toEqual('It works!');

$('#open-popup-button').click();
await browser.switchTo().window('popup');
ngMockE2E.addMockModule();
ngMockE2E.addAsDependencyForModule('example');
ngMockE2E.embedScript('bower_components/angular-mocks/angular-mocks.js');
$httpBackend.when('GET', 'heading').respond('It works in a popup!');
browser.refresh();
expect($('h1').getText()).toEqual('It works in a popup!');
expect(browser.getCurrentUrl()).toBe('http://localhost:8000/popup.html');

await browser.switchTo().window('')
expect(browser.getCurrentUrl()).toBe('http://localhost:8000/');
expect($('h1').getText()).toEqual('It works!');
});

Please notice the following:

I hope this will help you.

hyrongo commented 6 years ago

Great answer, great detail！I've tried your solution and it does work.Thanks! @yevhenpavliuk

yevhenpavliuk commented 6 years ago

You’re welcome!