Feature-Tests AngularJS-Ansichten in einer Rails-App brechen beim Wechsel von ERB zu Angular

Question

Zu Beginn hatte ich eine Arbeitsschiene 'show' Seite mit einem Projektnamen und Einträge aus dem Projekt. Wenn der Projektname mit angular $ scope und die Einträge mit einem Block in ERB angezeigt wurden, wurden meine Tests bestanden. Als ich die Einträge ERB-Code durch die Winkelanweisung 'ng-repeat' ersetzt habe, nur begann meine Einträge Testszenarien fehlgeschlagen. Interessanterweise funktionierte die Anwendung noch im Browser. Und denken Sie daran, dass die andere $ scope-Variable aus meiner Sicht war und immer noch mit einem nahezu identischen Test besteht.

Arbeiten show.html.erb (Gelesen Einträge 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> 

Brechen show.html.erb (Einträge in Angular gesehen):

<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, Daten hat ersetzt mit dem zurückgegebenen 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"}]} 

] 

Dies ist ein Beispiel-Test, bevor gearbeitet, aber nicht nach ERB ersetzt mit 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 

bin ich etwas fehlt oder werde ich die Art und Weise verändern, muss ich Feature-Tests tun?

Answer 1

Um diese Arbeit zu machen, ich Capybara Script-Treiber Poltergeist gesetzt. Dies erforderte die Installation von phantomJS (> = 1.8.1) und das Setzen von js in meinen Integrationstests auf true.

Dies ist der Prozess:

Install PhantomJS 1,9 (ubuntu 12.10 mit Richtungen 32bit OS angezeigt, entsprechend anpassen):

$ 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 In der Gemfile und bündeln installieren:

group :test do 
    gem 'poltergeist' 
end 

In der Datei 'test_helper.rb' oder ähnlich:

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

In Ihrer Integration/Funktionstests, sollten Sie ‚js: true‘, um damit wie folgt aus:

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

In Ihrem Controller setzen Sie $ scope.projects, damit in der Vorlage die Variable 'project' verfügbar sein sollte. In den Template-Code, den Sie eingefügt haben, werden Sie 'ng-repeat' über 'project.entries' (singular) Wenn Sie keinen Tippfehler oder Pseudo-Code eingefügt haben, kann dies auch nicht im Browser funktionieren.

Ich weiß nicht genug über Schienen Funktionstests, um Ihnen zu sagen, es wird warten auf alle JS zu beenden, bevor es tut es Behauptungen. Was ist mit Routenänderungen in Angular?

Ich benutze Angulars JS-Test-Setup mit Karma und Jasmin, um die eckigen Seiten zu testen. Jasmine wird dann darauf aufmerksam gemacht, dass der Angular Stack aktiv ist.

Schauen Sie sich diesen Beitrag: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html