AngularJS使用Karma进行端到端测试，使用静态文件而不是服务器

我的AngularJS应用程序有端到端测试，我使用Karma作为测试运行程序。我目前在我的因果报应配置中有以下内容：

config.proxies = {
  '/': 'http://localhost:9292/'
};

我必须单独启动一个简单的Rack应用程序，为我的单个静态AngularJS HTML文件提供服务。我想进行端到端测试来测试静态文件，就像加载file:///Users/sarah/my-app/index.html一样。我尝试过在测试中不设置代理并执行browser().navigateTo 'index.html'，但测试都失败了，因为我的element调用"与任何元素都不匹配"。看起来index.html页面没有加载。

我还尝试在'/': 'file:///Users/sarah/my-app/处设置代理，然后在测试中执行browser().navigateTo '/index.html'，但失败了，错误为"options.host和options.port或options.target是必需的"。虽然我想我可以将端口设置为80，但没有主机——这就是重点。

我的目标是让我的端到端测试在Semaphore上自动运行，我的AngularJS单元测试目前在这里运行。单元测试不同，因为它们不需要访问我的应用程序实例。

我想做的事情可能吗？如果没有，我有没有办法在Semaphore上运行AngularJS应用程序的单元和端到端测试，而不将我的应用程序托管在Semapur可以访问的公共服务器上？

好吧，我得到了我的最终结果：在Semaphore上进行自动化的端到端测试。诀窍是创建一个单独的test-index.html，它使用我的应用程序的测试版本。它有<html ng-app="TestMyApp">而不是<html ng-app="MyApp">。它还包括以下我实际的index.html没有的额外JavaScript：

<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>

我的test_api_app.js实际上是由karma咖啡预处理器从CoffeeScript编译而来的，但这里是CoffeeSscript的来源：

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

然后在我的karma-e2e.config.js中，我没有设置urlRoot，我设置的唯一代理只是因为我的CoffeeScript应用程序文件位于coffee目录中，并且该应用程序希望编译的Javascript位于/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

这里的巧妙之处在于Karma本身运行一个服务器，因此它为我托管了静态test-index.html文件。在我上面的代理中，'http://localhost:' + config.port部分指的是Karma服务器。config.port在我的业力配置中的其他地方被定义为9876。

我定义我的业力config.files包括：

'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
}

然后在我的端到端测试中，我做了：

browser().navigateTo '/base/test-index.html#/'

我有一个包.json，包含以下脚本：

"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"
}

我编译了CSS文件，这样当我运行端到端测试时，它就不会给出关于my-app.CSS不存在的404错误。我在Semaphore上的构建命令是：

bundle install
npm install
npm test

测试通过了！

相关内容

最新更新

热门标签：