5

まず、プロジェクト名とそのプロジェクトに属するエントリを表示する作業中の Rails 'show' ページを用意しました。angular $scope を使用してプロジェクト名が表示され、ERB のブロックを使用してエントリが表示された場合、私のテストは成功しました。エントリの ERB コードを angular ディレクティブ「ng-repeat」に置き換えたところ、シナリオをテストするエントリのみが失敗し始めました。興味深いことに、アプリケーションはまだブラウザーで動作していました。そして、私の見解の他の $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"}]}

]

これは、以前は機能していたが、ERB を ng-repeat に置き換えた後に失敗したテストの例です。

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

何か不足していますか、それとも機能テストの方法を変更する必要がありますか?

4

2 に答える 2

5

これを機能させるために、Capybara の JavaScript ドライバーをポルターガイストに設定しました。これには、phantomJS (>= 1.8.1) をインストールし、統合テストで js を true に設定する必要がありました。

これはプロセスです:

PhantomJS 1.9 をインストールします (32 ビット OS の指示が表示された 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

ポルターガイストを 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
于 2013-04-29T22:39:49.120 に答える
1

コントローラーで $scope.projects を設定しているため、テンプレートで変数「project」を使用できるはずです。貼り付けたテンプレート コードでは、'project.entries' (単数) に対して 'ng-repeat' を実行しています。タイプミスをしたり、疑似コードを貼り付けたりしない限り、これはブラウザでも機能しません。

Railsの機能テストについては、すべてのJSが完了するまで待ってからアサーションを実行することを伝えるのに十分な知識がありません。Angular でのルート変更はどうですか?

Angular の JS テスト セットアップをカルマとジャスミンと共に使用して、Angular ページをテストします。Jasmine は、Angular スタックがアクティブであることを認識します。

この投稿をチェックしてください: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

于 2013-04-25T20:27:02.190 に答える