With Travis-CI, how do I test chrome packaged apps? - angularjs

I am writing a chrome packaged app, using angular JS.
My setup uses grunt/karma/jasmine for building/unit testing, and everything was fine until I started using the chrome.* API. This of course was an issue as I had Travis-CI set up to use PhantomJS, but Phantom doesn't know about the chrome global var.
Is there a way to run unit tests with karma that will not throw ReferenceError: Can't find variable: chrome for testing packaged apps, and so pass Travis-CI testing
Is there a way to suppress the errors that PhantomJS is throwing (this sounds bad already)

Few thoughts:
You could polyfill/stub the chrome.* apis before running your tests, to simulate the chrome app environment. Not sure if anyone has already done this already (i.e. here is one quick example for node-webkit I found). It sounds like a useful library someone should write ;)
Just skip those tests that you know will always fail on PhantomJS, by wrapping jasmine test definitions with a guard like if (!is_chrome_app) return;. One clean way to do this in jasmine is to create a defineChromeAppOnly helper that skips the define call if its not a chome app.
You probably want an alternative system for actually running tests inside a real chrome app. I've always just built my own crude CI for this (or done it manually), but since this would be cool to make easier for CI, I've filed a request with Travis CI Team to support Chrome Packaged Apps. Star that issue if you are interested in what they reply.

Related

What can I use for mock fetch-requests while e2e testing in protractor similar to addMockModule without Angular

I am writing e2e test with protractor for a typescript module. I want to use protractor for the additional features in comparison to selenium webdriver. I am using typescript standalone so I am building a non-angular application.
I searched a lot for mocking services or fetchmock etc. But I think I am searching at the wrong place. Maybe I just didn't understood what do I really need for my problem.
At the moment I have an application where I want to test the frontend. My problem is, that the application only works with a server which is setting up many data and make it available for rest. Without this server my javascript file wont work and I wont start the server for my tests, it must be server independent.
For example: my server provide the data on a specific address 192.168.1.230 and I can fetch the data with fetch api over: 192.168.1.230/users/1.
In unit tests I have mocked my fetches, but in e2e tests I need to mock the address (maybe with selenium webdriver) and want to get a dummy response if my api is fetching this data.
How can I realise that? I use protractor with npm (nodejs) and could need a npm plugin for this.
I saw another post here with the addMockModule, but this is only for angular modules and I don't use angular.

Protractor browser.driver.getCurrentUrl vs browser.getCurrentUrl

I'm running an Angular app and I'm trying to get the current URL when testing on protractor. Which one to use?
browser.driver.getCurrentUrl() or browser.getCurrentUrl() ?
If this is an Angular application under test - use browser, otherwise - browser.driver.
To quote #jmr from a relevant github issue:
If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver.
Though, note that both are gonna work if this is Angular application under test. Some people even said that found browser.driver more reliable if it the sync time is longer than usual:
Just to add to this - I find that browser.driver works better on AngularJS apps that take time to sync. I have tried both and for some reason browser.driver is more reliable.
Though, I've personally used browser.getCurrentUrl() and cannot recall any problems.

Detect if the environment is Protractor

In an AngularJS application is it possible to detect if the environment is Protractor?
I would like to disable certain functionality such as Geolocation when running my tests. It's not something I want to test at the moment and I am pretty sure it is what is causing my tests to fail to run.
In my App I use window.jasmine to disable certain polling actions when running Jasmine tests so something similar would be good.
i.e.
if(!window.protractor) {
geoLocationRun()
}
This doesn't work and there doesn't appear to be anything I can use on Window.
Note: I know I can mock out the geolocation which I can do if this isn't possible. Perhaps this is the best approach in any case however it would be good to know if there is a suitable solution. How do I enable geolocation support in chromedriver for Selenium?
I would recommend you to move your geo location code into an angular module. Then you can mock the module in your protractor tests using browser.addMockModule
http://angular.github.io/protractor/#/api?view=Protractor.prototype.addMockModule

PhantomJS integration testing with angular against live backend

I am trying to make my e2e test environment to be like the actual production environment. I discovered that when I take out the ngMockE2E from my app and run tests that actually hit the backend server then all my tests in PhantomJS fail. In all other browsers tests always pass.
I'm not sure what the cause of this is. All I know is that when I put the ngMockE2E back in then all tests pass in PhantomJS and when I take it out the tests that depend on the xhttp request fail.
One more thing the live backend is cross origin. But like I said it works fine in all other browsers. I'm wondering if PhantomJS doesn't have cors support.
Does anyone know how to remedy this? Am I supposed to always use the mocks?
For E2E testing with a real back end, I would consider using Protractor. As far as I know, ngMock and ngMockE2E are both made to fake a connection to a real server. With these libraries you can unit test your Angular project so that it works isolated.
Note that it is a bit more work to setup E2E testing with Protractor if you start from scratch. There are however also starter projects (Yeoman), which already have this setup for you. You could use generator-angular-gulp for example for your application, or you could have a look how they have set things up.

extending angular e2e testing

I have been using the Angular Scenario Runner for performing End To End tests on our codebase.
I am following:
http://docs.angularjs.org/guide/dev_guide.e2e-testing
Compared to frameworks such as capybara etc, the supplied matchers seem quite limited.
What options are available to help in End To End testing Angular Applications?
The next tool for AngularJS will be Protractor
you can use Selenium, of course.
One good thing that E2E does is to record all outgoing requests, so that it continues only after all of them are back with responses. This way you dont need to set a timer to check when your page is fully loaded. Not sure if Selenium supports that.

Resources