I'm trying to write a test using jasmine. It's for an angular app where I'm opening a window using $window.open and then settings a couple of event listeners.

Here is controller:

$scope.login = function() {

    LoadingService.show();
    AccountsService.setPro($scope.pro);

    if ($scope.pro) {
        options.scope.push("repo");
    }

    var githubUrl = '?';
    var authUrl = githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scope;
    var authWindow = $window.open(authUrl, '_blank', 'location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=Close,clearcache=yes');

    authWindow.addEventListener('loadstart', function(e) {

        var url = (typeof e.url !== 'undefined' ? e.url : e.originalEvent.url),
            raw_code = /code=([^&]*)/.exec(e.url) || null,
            code = (raw_code && raw_code.length > 1) ? raw_code[1] : null,
            error = /\?error=(.+)$/.exec(e.url);

        if (code || error) {
            authWindow.close();
        }

        // If there is a code, proceed to get token from GitHub
        if (code) {
            requestToken(code);
        } else if (error) {
            AlertService.raiseAlert("Oops! Something went wrong and we couldn't log you in using Github. Please try again.");
            LoadingService.hide();
        }

    });

    // If "Done" button is pressed, hide "Loading"
    authWindow.addEventListener('exit', function(e) {
        LoadingService.hide();
    }, false);

};

And here is the test that I wrote passes because it can't get in authWindow.addEventListener('loadstart', function(e) { ... }

it("Should go to the wele screen.", function () {

    spyOn(loadingService, 'show');
    spyOn(accountsService, 'setPro');

    spy = jasmine.createSpy('message');

    window.addEventListener('message', function (e) {
        console.log(Object.keys(e), e.data);
        spy();
    });

    expect(scope.pro).toBeFalsy();

    var controller = createController();

    scope.togglePro();
    expect(scope.pro).toBeTruthy();

    scope.login();
    expect(loadingService.show).toHaveBeenCalled();

    window.postMessage('loadstart', '/?code="12313123');
    // window.postMessage('exit', '*');

    expect(accountsService.setPro).toHaveBeenCalledWith(scope.pro);

});

Any idea how I'll make it call that event listener?

I'm trying to write a test using jasmine. It's for an angular app where I'm opening a window using $window.open and then settings a couple of event listeners.

Here is controller:

$scope.login = function() {

    LoadingService.show();
    AccountsService.setPro($scope.pro);

    if ($scope.pro) {
        options.scope.push("repo");
    }

    var githubUrl = 'https://github./login/oauth/authorize?';
    var authUrl = githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scope;
    var authWindow = $window.open(authUrl, '_blank', 'location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=Close,clearcache=yes');

    authWindow.addEventListener('loadstart', function(e) {

        var url = (typeof e.url !== 'undefined' ? e.url : e.originalEvent.url),
            raw_code = /code=([^&]*)/.exec(e.url) || null,
            code = (raw_code && raw_code.length > 1) ? raw_code[1] : null,
            error = /\?error=(.+)$/.exec(e.url);

        if (code || error) {
            authWindow.close();
        }

        // If there is a code, proceed to get token from GitHub
        if (code) {
            requestToken(code);
        } else if (error) {
            AlertService.raiseAlert("Oops! Something went wrong and we couldn't log you in using Github. Please try again.");
            LoadingService.hide();
        }

    });

    // If "Done" button is pressed, hide "Loading"
    authWindow.addEventListener('exit', function(e) {
        LoadingService.hide();
    }, false);

};

And here is the test that I wrote passes because it can't get in authWindow.addEventListener('loadstart', function(e) { ... }

it("Should go to the wele screen.", function () {

    spyOn(loadingService, 'show');
    spyOn(accountsService, 'setPro');

    spy = jasmine.createSpy('message');

    window.addEventListener('message', function (e) {
        console.log(Object.keys(e), e.data);
        spy();
    });

    expect(scope.pro).toBeFalsy();

    var controller = createController();

    scope.togglePro();
    expect(scope.pro).toBeTruthy();

    scope.login();
    expect(loadingService.show).toHaveBeenCalled();

    window.postMessage('loadstart', 'http://www.github./?code="12313123');
    // window.postMessage('exit', '*');

    expect(accountsService.setPro).toHaveBeenCalledWith(scope.pro);

});

Any idea how I'll make it call that event listener?

• javascript
• angularjs
• unit-testing
• jasmine
• karma-jasmine

Share Improve this question Follow asked Mar 26, 2015 at 19:53 manosimmanosim 3,6901313 gold badges4747 silver badges6868 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

// in your test add a mock for window (remember to reset back to normal window after)
windowmock.open = function(url, target, settings){

    //test the url, target and settings

    return {
        addEventListener: function(event, callback){
            if (event == 'loadstart'){
                callback({
                    url: 'something. or whatever you're expecting,
                    originalEvent:{},

                });
            }
        },
        close: function(){}
    }
};