Testing an externally hosted app on HTTPS using Karma

Question

I have an AngularJS/Flask app that (serverside) redirects you to an HTTPS version of itself if you're not already on HTTPS. I'd like to use Karma to test the app using HTTPS, btu I can't do it locally without running an HTTPS server on my own computer (which is a hassle), so I pushed my app to a Heroku site (say at mine.herokuapp.com) that has SSL. Now, I'm trying to run my Karma tests against this external site with a config file like

var PROXYPATH = 'mine.herokuapp.com';

files = [
    ...
];

urlRoot = '/_karma_/';
singleRun = true;
browsers = ['Chrome'];

proxies = {
    '/': PROXYPATH
};

but when I try to run my tests, I get the error Sandbox Error: Application document not accessible upon navigating to the app. I'm positive nothing is wrong on the Heroku side; I can navigate there just fine. Is there a way to test HTTPS in Karma or am I on a wild goose chase?

Answer 1

I had this problem running my dev site in IIS where it would redirect all HTTP requests to HTTPS

I still haven't go it working, but I can now get it to at least load the site inside the iframe in the Karma runner

I had to specify the hostname and also allow invalid SSL certificates proxyValidateSSL

This is my config (GruntJS) formatted.

config.set({
    frameworks: [],
    files: [
        'assets/angular-scenario.js',
        'node_modules/karma-ng-scenario/lib/adapter.js',
        'tests/e2e/**/*Spec.js'],
    urlRoot: '/__e2e/',
    hostname: '10.0.0.3',
    proxyValidateSSL: false,
    proxies: {
        '/': 'https://10.0.0.3/'
    },
    browsers: ['Chrome']
});

The next problem I ran into was I use the X-Frame-Options:Deny HTTP Header to stop external sites injecting mysite into their site inside iframes

I had to change this to X-Frame-Options:SameOrigin and then my dev site would load inside Karma runner within Chrome.

My Problem

I then have the following Jasmine spec, the navigateTo works fine, but it then hangs on the expect() line and never returns.

describe('My App', function () {
    beforeEach(function () {
        browser().navigateTo('/');
    });

    it('should redirect to Login', function () {
        expect(browser().location().url()).toBe('/Login'); // <- Hangs here
    });
});

Update (6th Sep 2013)

I did some playing around to see if I could get it working. My app uses routes, and after removing the otherwise route config it worked. I still need the otherwise route so I am still not happy yet. But there must me something in there that is stopping it from loading

Fails with

    app.config(['$routeProvider', function ($routeProvider) {

        $routeProvider
        .when('/Foo', {
            templateUrl: 'foo.tpl.html',
            controller: 'FooCtrl',
            controllerAs: 'ctrl'
        }).otherwise({
            redirectTo: '/Foo'
        });

    }]);

Works with

app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
    .when('/Foo', {
        templateUrl: 'foo.tpl.html',
        controller: 'FooCtrl',
        controllerAs: 'ctrl'
    });

}]);