Sprawdzanie cech Widoki AngularJS w aplikacji Railsowej przerywają się podczas przełączania z ERB na Angular

Question

Na początku miałem stronę roboczą "pokaż szynę" wyświetlającą nazwę projektu i wpisy należące do projektu. Kiedy nazwa projektu była wyświetlana przy użyciu kątowego zakresu $ i wpisów przy użyciu bloku w ERB, moje testy minęły. Kiedy zastąpiłem wpisy kodu ERB dyrektywą kątową "ng-repeat", tylko moje scenariusze testowania wpisów zaczęły się nie udać. Co ciekawe, aplikacja wciąż działała w przeglądarce. I pamiętajcie, że druga zmienna $ scope w moim widoku była i nadal przechodzi przy użyciu prawie identycznego testu.

robocze show.html.erb (Wpisy oglądane w 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> 

Łamanie show.html.erb (Wpisy z przeglądarką kątowa):

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

kątowa Controller, dane zostały zastąpiony zwracanym 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"}]} 

] 

To jest przykładowy test, który pracował wcześniej, ale nie po wymianie ERB z 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 

Am I czegoś brakuje albo będę musiał zmienić sposób mogę wykonać test funkcji?

Answer 1

Aby dokonać tej pracy mogę ustawić javascript sterownik Kapibara do poltergeist. To wymagało instalacji phantomJS (> = 1.8.1) i ustawienia js na true w moich testach integracyjnych.

Jest to proces:

Install PhantomJS 1.9 (ubuntu 12.10 z kierunków 32bit OS wyświetlanych dostosować odpowiednio):

$ 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 

Dodaj poltergeist do Gemfile i pakiet zainstalować:

group :test do 
    gem 'poltergeist' 
end 

W pliku "test_helper.rb" lub podobnym:

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

w badaniach integracji/fabularnych, należy pamiętać o „JS: True” tak:

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

W kontrolerze ustawiasz $ scope.projects, więc w szablonie powinna być dostępna zmienna "projekt". W wklejonym przez Ciebie kodzie szablonu "ng-repeating-over over" project.entries "(w liczbie pojedynczej) Dopóki nie zrobiłeś literówki lub wklejonego pseudo-kodu, to również nie może działać w przeglądarce.

Nie wiem wystarczająco dużo o testowaniu funkcjonalnym szyn, aby powiedzieć, że będzie czekał na zakończenie wszystkich JS zanim zrobi to twierdzenie. A co ze zmianą trasy w Angular?

Używam konfiguracji testowej JS Angulara z karmą i Jasmine do testowania stron kątowych. Następnie Jasmine zostaje poinformowana, że ​​aktywny jest stos kątowy.

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