Exploring the world of rails/angular for the first time has been an interesting journey. Currently, I am focusing on testing angular with poltergeist/capybara. While everything runs smoothly in the actual browser, it appears lifeless during testing. Despite attempts to use the gem 'capybara-angular' and experimenting with different configurations, nothing seemed to work in my favor. Suppressing JS errors did allow poltergeist to progress with the test, but alas, it failed because angular was not initialized.
I apologize if this question seems trivial, as I have scoured the internet for a solution for over 2 hours without success.
The encountered error: Failure/Error: click_link "Search"
Capybara::Poltergeist::JavascriptError:
Errors were raised in the Javascript code on the page. If you wish to ignore these errors, set js_errors: false in your Poltergeist configuration.
Error: [ng:areq] Argument 'mainCtrl' is undefined
rails_helper.rb:
ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', __FILE__)
abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'spec_helper'
require 'rspec/rails'
require 'capybara/poltergeist'
Capybara.javascript_driver = :poltergeist
Capybara.default_driver = :poltergeist
ActiveRecord::Migration.maintain_test_schema!
RSpec.configure do |config|
config.fixture_path = "#{::Rails.root}/spec/fixtures"
config.use_transactional_fixtures = false
config.infer_spec_type_from_file_location!
config.filter_rails_from_backtrace!
config.before(:suite) do
DatabaseCleaner.clean_with(:truncation)
end
config.before(:each) do
DatabaseCleaner.strategy = :transaction
end
config.before(:each, :type => :feature) do
DatabaseCleaner.strategy = :truncation
end
config.before(:each) do
DatabaseCleaner.start
end
config.after(:each) do
DatabaseCleaner.clean
end
end
angular_test_spec.rb:
require 'rails_helper'
feature "angular test" do
let(:email){ "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3a2b3d3a0e3b3d2b3c602d2123">[email protected]</a>" }
let(:password){ "password123" }
before do
User.create!(email: email,
password: password,
password_confirmation: password)
end
scenario "Angular App is working" do
visit "/"
fill_in "Email", with: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295d4c5a5d695c5a4c5b074a4644">[email protected]</a>"
fill_in "Password", with: "password123"
click_button "Log in"
expect(page).to have_content("Home")
click_link "Search"
expect(page).to have_content("Search")
fill_in "keywords", with: "some item"
within "section div h3" do
expect(page).to have_content("some item")
end
end
end
EDIT:
While Angular bindings function on a test page such as this:
<input name="test" ng-model="test">
<p>{{ test }}</p>
Unfortunately, controllers fail to initialize.
EDIT 2:
Drawing from the fact that things run smoothly in development but not during testing, I suspect an issue lies within the asset pipeline. Research led me to this insightful blog: (Better JavaScript errors in Capybara tests)
The promise of clearer error descriptions intrigued me, so I added config.assets.debug = true to /config/environments/test.rb. Miraculously, the tests now pass without any errors. This success could be attributed to Rails serving non-concatenated assets, as per Tom Walpole's insights.