功能测试Rails应用程序中的AngularJS视图在从ERB切换到Angular时中断

Question

首先,我有一个工作轨道'show'页面,显示项目名称和属于项目的条目.当使用angular $ scope显示项目名称并使用ERB中的块使用条目时,我的测试通过了.当我用角度指令'ng-repeat'替换条目ERB代码时,只有我的条目测试场景开始失败.有趣的是,该应用程序仍然在浏览器中工作.请记住,我视图中的另一个$ scope变量仍然使用几乎相同的测试.

使用show.html.erb(在ERB中查看的条目):

<div ng-controller="ProjectCtrl">
  <h1>This is {{ project.details.name }}</h1>

  <h2>Entries</h2>
  <% @entries.each do |e| %>
  <ul>
    <li>
        <%= e.title %>
    </li>
    <li>
        <%= e.summary %>
    </li>
  </ul>
  <% end %>
</div>

打破show.html.erb(以Angular方式查看的条目):

<div ng-controller="ProjectCtrl">
  <h1>This is {{ project.details.name }}</h1>

  <h2>Entries</h2>
  <ul ng-repeat=" e in project.entries ">
    <li>
        {{ e.title }}
    </li>
    <li>
        {{ e.summary }}
    </li>
  </ul>
</div>

Angular Controller,数据已被返回的JSON替换.

@ProjectCtrl = ["$scope", "$http", ($scope, $http) ->
  $http.get().success (data) ->
    $scope.project = {"details":{"name":"Project1","author":"brian"},"updated_at":"2013-04-13T16:48:46.406Z","entries":[{"title":"Test Title","summary":"Summary Test"},{"title":"The Third Entry","summary":"Summary of Third Entry"}]}

]

这是一个先前有效的示例测试但在用ng-repeat替换ERB后失败:

scenario "Displays Entries Summary" do
  project = Project.create!(details: {name: "aproject"})
  Entry.create!(data: {summary: "Should Be Displayed"}, project_id: project.id)
  Entry.create!(data: {summary: "Should Not Be Displayed"})
  visit project_path(project.id)
  page.must_have_content "Should Be Displayed"
  page.wont_have_content "Should Not Be Displayed"
end

我错过了什么或者我是否必须改变我的功能测试方式？

Answer 1

为了完成这项工作,我将Capybara的javascript驱动程序设置为poltergeist.这需要安装phantomJS(> = 1.8.1)并在我的集成测试中将js设置为true.

这是一个过程:

安装PhantomJS 1.9(显示32位操作系统方向的ubuntu 12.10,相应调整):

$ cd
$ wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-i686.tar.bz2
$ tar jxvf https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-i686.tar.bz2
$ sudo mv phantomjs-1.9.0-linux-i686.tar.bz2
$ phantomjs --version

将poltergeist添加到Gemfile并捆绑安装:

group :test do
  gem 'poltergeist'
end

在'test_helper.rb'文件中,或类似文件:

require 'capybara/poltergeist'
Capybara.javascript_driver = :poltergeist

在集成/功能测试中,请确保包含'js:true',如下所示:

scenario "Your test with Angular.js views", js: true do
  # test is here
end

# OR

it "Your test with Angular.js views", js: true do
  # test is here
end