AngularJS end
I have end-to-end tests for my AngularJS app and I'm using Karma as my test runner. I currently have the following in my Karma config:
config.proxies = {
'/': 'http://localhost:9292/'
};
I have to separately start up a simple Rack app that serves my single static AngularJS HTML file. I want to have end-to-end tests that test a static file, much like loading file:///Users/sarah/my-app/index.html . I've tried not setting a proxy and doing browser().navigateTo 'index.html' in my tests, but the tests all fail because my element calls "did not match any elements". It looks like the index.html page is not getting loaded.
I've also tried setting a proxy where '/': 'file:///Users/sarah/my-app/ and then doing browser().navigateTo '/index.html' in my tests, but that failed with the error "options.host and options.port or options.target are required". While I guess I could set the port to 80, there is no host--that's the point.
My goal with this is I want to have my end-to-end tests run automatically on Semaphore, where my AngularJS unit tests currently run. The unit tests are different because they don't require an instance of my app to be accessed.
Is what I'm wanting to do possible? If not, is there any way I can run both unit and end-to-end tests of my AngularJS app on Semaphore without hosting my app on some public server that Semaphore can access?
Okay, I got my end result: automated end-to-end testing on Semaphore. The trick was to create a separate test-index.html that uses a test version of my app. It has <html ng-app="TestMyApp"> instead of <html ng-app="MyApp"> . It also includes the following extra JavaScript that my actual index.html does not:
<script src="http://code.angularjs.org/1.0.7/angular-mocks.js" type="text/javascript"></script>
<script src="spec/e2e/test_api_app.js" type="text/javascript"></script>
My test_api_app.js is actually compiled from CoffeeScript by the karma-coffee-preprocessor, but here is the CoffeeScript source:
angular.module('TestMyApp', ['MyApp', 'ngMockE2E']).run ($httpBackend) ->
$httpBackend.when('GET', 'http://some-api-my-app-uses/images').respond
status: 'success'
images: [...]
// more mocked calls MyApp makes
Then in my karma-e2e.config.js, I don't set urlRoot , and the only proxies I set are just because my CoffeeScript app files live in a coffee directory and the app expects the compiled Javascript to be at /js:
config.proxies = {
'/base/js/app.js': 'http://localhost:' + config.port +
'/base/coffee/app.js',
// other mapping from the URLs my app expects to exist to where
// karma-coffee-preprocessor puts the compiled JavaScript
The neat thing here is that Karma runs a server itself, so it hosts my static test-index.html file for me. In my proxies above, the 'http://localhost:' + config.port part is referring to the Karma server. config.port is defined elsewhere in my Karma config to be 9876.
I defined my Karma config.files to include:
'https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js',
'http://code.angularjs.org/1.0.7/angular-mocks.js',
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
'coffee/**/*.coffee',
'http://code.angularjs.org/1.0.7/angular-resource.min.js',
'spec/e2e/**/*_spec.coffee',
'spec/e2e/test_api_app.coffee',
{
pattern: 'css/*.css',
watched: true,
included: false,
served: true
},
{
pattern: 'img/spinner.gif',
watched: true,
included: false,
served: true
},
{
pattern: 'test-index.html',
watched: true,
included: false,
served: true
}
Then in my end-to-end tests, I do:
browser().navigateTo '/base/test-index.html#/'
I have a package.json with the following script:
"scripts": {
"test": "bundle exec sass scss/my-app.scss css/my-app.css ; ./node_modules/.bin/karma start spec/karma-unit-functional.config.js --single-run --browsers Firefox ; ./node_modules/.bin/karma start spec/karma-e2e.config.js --single-run --browsers Firefox"
}
I compile the CSS file so that when I run end-to-end tests it doesn't give a 404 error about my-app.css not existing. My build commands on Semaphore are:
bundle install
npm install
npm test
And the tests pass!
链接地址: http://www.djcxy.com/p/39112.html下一篇: AngularJS结束