Geek asks and answers

Testing Angular Functions JS Views in Rails Applications When Switching from ERB to Angular

To begin with, I had a page "showing working rails" with the name of the project and the records related to the project. When the project name was displayed using the angular $ scope and records using the block in ERB, my tests passed. When I replaced the ERB code with the angular "ng-repeat" directive, only my test scripts started to fail. Interestingly, the application was still running in the browser. And remember, another $ scope variable in my view was and remains passing using an almost identical test.

Working show.html.erb (Entries viewed in 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>

Breaking show.html.erb (Entries presented in 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 , 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

- ?

+5
2

, Capybara javascript . phantomJS ( >= 1.8.1) js true .

:

PhantomJS 1.9 (ubuntu 12.10 32- , ):

$ 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
+5

$scope.projects, 'project'. 'ng-repeat'-ing over' project.entries '( ) , .

rails, , JS , . Angular?

Angular JS Angular. , Angular .

: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

+1

More articles:


All Articles