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（＆gt; = 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

Answer 2

在你的控制器中你设置$ scope.projects所以在模板中变量'project'应该可用。在您粘贴的模板代码中，您在“project.entries”（单数）上“重复” 除非您输入了拼写错误或粘贴了伪代码，否则无法在浏览器中使用。

我对rails功能测试知之甚少，告诉你它会在它做出断言之前等待所有JS完成。如何改变Angular的路线？

我使用Angular的JS测试设置与karma和Jasmine来测试Angular页面。然后让Jasmine意识到Angular堆栈处于活动状态。

查看此帖子：http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

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

2 个答案: