1
definiert ist, kann ich keinen eckigen App-Inhalt finden. Ich kann in Rspec-Testszenarien keinen Inhalt von Seiten für ng-view oder Ui-View, wenn ng-app auf div oder body anstelle von HTML-Tag definiert ist. Aber wenn ng-app auf HTML-Tag-Inhalt definiert ist, ist es für ng-view sichtbar.RSpec, Capybara, Poltergeist: In Testszenarien, in denen ng-app auf einem div- oder Body-Element anstelle von HTML-Tag
capybara_config.rb
require 'capybara/rspec'
require 'capybara/poltergeist'
require_relative '../rack/rack_config'
Capybara.register_driver :poltergeist do |app|
options = {debug: false, js_errors: false, timeout: 180, phantomjs_logger: StringIO.new, logger: nil,
extensions: [File.expand_path("../../js_libraries/jquery.js", __FILE__), File.expand_path("../../js_libraries/jquery-ui.min.js", __FILE__),
File.expand_path("../../js_libraries/jquery-ui.min.css", __FILE__), File.expand_path("../../js_libraries/jquery-ui.theme.min.css", __FILE__)],
phantomjs_options: ['--load-images=no', '--ignore-ssl-errors=yes']}
Capybara::Poltergeist::Driver.new(app,options)
end
Capybara.javascript_driver = :poltergeist
Capybara.ignore_hidden_elements = false
Capybara.default_wait_time = 5
spec_helper.rb
require 'rspec/core'
RSpec.configure do |config|
config.include Capybara::DSL
end
angular_test_spec.rb
require 'spec_helper'
require_relative '../config/capybara/capybara_config'
describe "Employee Index Page UI content" , js: true do
it "employee index page " do
visit('https://app.employes.nl')
puts(page.body)
end
end
Gemfile
source 'https://rubygems.org'
gem "rspec"
gem "capybara"
gem "poltergeist"
Auf Code inspizieren von app.employes.nl
<body ng-app="employeesApp" class="ng-scope"> <!-- uiView: --><ui-view class="ng-scope"><div class="container ng-scope"> <!-- uiView: --><ui-view class="ng-scope"><div class="container-small ng-scope"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-signin ng-pristine ng-valid-email ng-invalid ng-invalid-required" ng-submit="login()"> <div class="row"> <div class="col-xs-12 text-center"> <img style="height: 2em" src="images/LogoEmployes.52a47633.png"> </div> </div> <hr> <label for="inputEmail" class="sr-only">Je emailadres</label> <input type="email" id="inputEmail" class="form-control ng-pristine ng-empty ng-valid-email ng-invalid ng-invalid-required ng-touched" placeholder="Je e-mailadres" ng-model="formData.email" required="" autofocus="" style=""> <label for="inputPassword" class="sr-only">Je wachtwoord</label> <input type="password" id="inputPassword" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" placeholder="Je wachtwoord" ng-model="formData.password" required=""> <button class="btn btn-lg btn-primary btn-block" type="submit">Inloggen</button> </form> <p class="text-muted small text-center"> <a href="#/signup" ui-sref="signup">Nog geen account?</a> | <a href="#/reset-password" ui-sref="reset-password">Wachtwoord vergeten?</a> </p> </div> </div> </div></ui-view> </div> <footer class="footer ng-scope"> <div class="container"> <p class="text-center text-muted small"> © Employes B.V. 2016 | <a href="" data-toggle="modal" data-target="#help">Heb je vragen? Neem contact met ons op.</a> </p> </div> </footer> <!-- Contact modal--> <div class="modal fade ng-scope" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Neem contact op</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12 text-center"> <p>Heb je vragen, bel of mail gerust!</p> <a href="mailto:[email protected]">Mail ons</a><br>of<br> <a href="callto:0537893036">Tel. 053-789 30 36</a> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> </div></ui-view> <!-- Full page loader. --> <div class="pg-loading-screen pg-loading ng-hide" style="background-color: #E6E6E6" ng-show="isAppLoading"> <div class="pg-loading-inner"> <div class="pg-loading-center-outer"> <div class="pg-loading-center-middle"> <h1 class="pg-loading-logo-header"> <img style="height: 1.5em" class="pg-loading-logo" src="images/LogoEmployes.52a47633.png"> </h1> <div class="pg-loading-html pg-loaded"> <p class="loading-message"></p> <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" async="" src="https://widget.intercom.io/widget/{app_id}"></script><script src="https://drrjhlchpvi7e.cloudfront.net/libs/stamplay-js-sdk/1.3.3/stamplay.min.js"></script> <script src="scripts/vendor.11815825.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.0/angular-locale_nl-nl.js"></script> <script src="scripts/scripts.9367f845.js"></script> <!-- Snippet for Intercom.io --> <script type="text/javascript">(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;
s.src='https://widget.intercom.io/widget/{app_id}';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script> <iframe style="display: none;"></iframe></body>
bekam aber auf angular_test_spec.rb Ausführung folgende Ausgabe:
<body ng-app="employeesApp"> <ui-view></ui-view> <!-- Full page loader. --> <div class="pg-loading-screen pg-loading" style="background-color: #E6E6E6" ng-show="isAppLoading"> <div class="pg-loading-inner"> <div class="pg-loading-center-outer"> <div class="pg-loading-center-middle"> <h1 class="pg-loading-logo-header"> <img style="height: 1.5em" class="pg-loading-logo" src="images/LogoEmployes.52a47633.png"> </h1> <div class="pg-loading-html pg-loaded"> <p class="loading-message"></p> <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" async="" src="https://widget.intercom.io/widget/{app_id}"></script><script src="https://drrjhlchpvi7e.cloudfront.net/libs/stamplay-js-sdk/1.3.3/stamplay.min.js"></script> <script src="scripts/vendor.11815825.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.0/angular-locale_nl-nl.js"></script> <script src="scripts/scripts.9367f845.js"></script> <!-- Snippet for Intercom.io --> <script type="text/javascript">(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;
s.src='https://widget.intercom.io/widget/{app_id}';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script> </body>
Wie in der Ausgabe von Terminal ui-Ansicht angezeigt haben keinen Inhalt. Weiß nicht, warum dieses seltsame Verhalten jedes Mal auftritt. Also kann jeder Körper mich bitte führen, wie kann ich ng-view Inhalt bekommen, wenn ng-app auf Körper nicht als HTML-Tag definiert ist?
Welche Version von Phantomjs verwenden Sie? und erhalten Sie das erwartete Ergebnis, wenn Sie zwischen "visit" und "puts" ein paar Sekunden schlafen? –
Mit PhantomJS 1.9.8 und Schlaf funktioniert auch nicht dafür. –
Phantomjs 1.9.8 entspricht Safari 5 und ist wirklich veraltet. Es stellt Function.prototype.bind() nicht zur Verfügung, das von angular benötigt wird - wenn Sie in Ihrer Treiberkonfiguration js_errors nicht auf false gesetzt hätten, würden Sie einen Fehler sehen. Upgrade auf Phantomjs 2.1 + –