small medium large xlarge

Generic-user-small
03 Jan 2017, 22:00
Andy Zhao (13 posts)

Hey there, running into an error where my test is failing because it can’t find the form to fill. Here’s the error code:

Failure/Error: expect(page).to have_content("Name")
       expected to find text "Name" in "Signed in successfully. Angular Test"

With the following code:

scenario "Our Angular Test App is Working" do

    visit "/angular_test"

    # Log In
    fill_in "Email", with: email
    fill_in "Password", with: password
    click_button "Log in"

    # Check that we go to the right page
    expect(page).to have_content("Name")

    # Test the page
    fill_in "name", with: "Pat"
    within "h2" do
      expect(page).to have_content("Hello Pat")
    end
  end

If I change the page check test to:

expect(page).to have_content("Angular Test")

The test proceeds, but can’t find the form to fill. Error:

Capybara::ElementNotFound:
       Unable to find field "name"

Here’s a link to my github repo in case you want to dig more.

Any help from anyone would be great. I’m truly a beginner when it comes to testing.

Dmfcb_pragsmall
03 Jan 2017, 18:21
David Copeland (476 posts)

Everything looks right. Does it work in a regular browser?

One thing you can try is to do puts page.html right before your assertion and see what’s actually on the page.

Generic-user-small
04 Jan 2017, 04:20
Andy Zhao (13 posts)

Thanks for the tip. After putting puts page.html I see it’s not loading <shine-angular-test>. Strange that it doesn’t, because when I visit the page in my browser it shows up just fine, with the working form and all.

I did have a Capybara error before with just RSpec and not my browser:

One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

I set js_errors as false in rails_helper.rb using:

Capybara.register_driver :poltergeist do |app| Capybara::Poltergeist::Driver.new(app, {:js_errors => false}) end

After that, I got to where I am now. Maybe JS error is the reason Angular isn’t loading? Not sure how to debug the Capybara error though.

Dmfcb_pragsmall
04 Jan 2017, 14:16
David Copeland (476 posts)

Yeah, you should not turn off JS errors. What was the error it was showing you? That is likely the cause of the problem. If things are working normally, you should not see any JS errors (or should see only irrelevant warnings)

Generic-user-small
04 Jan 2017, 15:38
Andy Zhao (13 posts)

Here’s the error:

Failures:

  1) angular test Our Angular Test App is Working
     Failure/Error: visit "/angular_test"
     
     Capybara::Poltergeist::JavascriptError:
       One or more errors were raised in the Javascript code on the page. If you don't care
about these errors, 
you can ignore them by setting js_errors: false in your Poltergeist configuration
 (see documentation for details).
     
       SyntaxError: Functions cannot be declared in a nested block in strict mode
       SyntaxError: Functions cannot be declared in a nested block in strict mode
           at http://127.0.0.1:3808/webpack/application.js:2093 in eval
           at http://127.0.0.1:3808/webpack/application.js:2093
           at http://127.0.0.1:3808/webpack/application.js:20 in __webpack_require__
     # ./spec/angular_test_app_spec.rb:15:in `block (2 levels) in <top (required)>'

or click here for an image of the error.

And here’s what I think is the relevant part of the error, from application.js. Oh, I also want to mention this is using npm and not yarn, since I wrote this before the yarn version of the book came out.

var AngularTestComponent = ng.core.Component({
  selector: "shine-angular-test",
  template: '\
  <h2 *ngIf="name">Hello {{name}}!</h2> \                <--- this is line 20
  <form> \
    <div class="form-group"> \
      <label for="name">Name</label> \
      <input type="text" id="name" class="form-control" \
             name="name" bindon-ngModel="name"> \
    </div> \
  </form> \
  '
}).Class({
  constructor: function() {
    this.name = null;
  }
});

var AngularTestAppModule = ng.core.NgModule({
  imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule ],
  declarations: [ AngularTestComponent ],
  bootstrap: [ AngularTestComponent ]
})
.Class({
  constructor: function() {}
});
Dmfcb_pragsmall
04 Jan 2017, 17:29
David Copeland (476 posts)

Ah, OK. I think this is a problem with Angular 2.3.0. Are you using yarn and the package.json from the book? This may have only been in the most recent beta, but you want to use "~2.1.0" for all the Angular dependencies.

Generic-user-small
04 Jan 2017, 20:55
Andy Zhao (13 posts)

I’m actually using npm since that was in the third beta of the book. My Angular version is ^2.0.0. Changing it to ^2.1.0 and running npm install still gives me the Capybara js_error.

Should I switch to yarn? If so, do I simply follow the instructions of the latest beta? I’m thinking there might be some conflicts with npm already installed onto this app, but I’m not sure since I haven’t used either very much.

Thanks a lot for all the help, btw. Really appreciate it!

Dmfcb_pragsmall
04 Jan 2017, 23:23
David Copeland (476 posts)

Are you sure you are using 2.1.0 of Angular? The reason I switched to yarn (other than Rails will support it in 5.1 or 5.2) is that it’s more predictable on installing the version you ask for.

Generic-user-small
05 Jan 2017, 19:09
Andy Zhao (13 posts)

So now I’ve updated everything to your beta after installing yarn successfully and clearing out anything npm might have installed. I did run into these errors after running yarn install, but ignored it:

warning Incorrect peer dependency "@angular/core@2.0.2".
warning Incorrect peer dependency "@angular/common@2.0.2".
warning Incorrect peer dependency "@angular/platform-browser@2.0.2".

My angular_test_app_spec.rb passed. I had another js_error bug but I ran the test again it and it disappeared… Not sure what happened there.

Generic-user-small
05 Jan 2017, 19:32
Andy Zhao (13 posts)

Well hope you don’t mind but I ran into another error with customer_search_spec.rb. I looked at the source code and compared it with mine, but after copy and pasting it and running the spec twice I still get the same error:

  1) Customer Search Search by Name
     Failure/Error:
       User.create!(
         email: email,
         password: password,
         password_confirmation: password
       )
     
     ActiveRecord::RecordInvalid:
       Validation failed: Email is invalid
     # ./spec/customer_search_spec.rb:25:in `block (2 levels) in <top (required)>'

  2) Customer Search Search by Email
     Failure/Error:
       User.create!(
         email: email,
         password: password,
         password_confirmation: password
       )
     
     ActiveRecord::RecordInvalid:
       Validation failed: Email is invalid
     # ./spec/customer_search_spec.rb:25:in `block (2 levels) in <top (required)>'

Here’s my code:

require 'rails_helper'

feature 'Customer Search' do
  def create_customer(first_name:,
                      last_name:,
                      email: nil)
    username = "#{Faker::Internet.user_name}#{rand(1000)}"
    email ||=  "#{username}#{rand(1000)}@" +
               "#{Faker::Internet.domain_name}"

    Customer.create!(
      first_name: first_name,
       last_name: last_name,
        username: username,
           email: email
    )
  end

  let(:email)     { "pat@example.com" }
  let(:password)  { "password123" }


  before do

    User.create!(
      email: email,                                         <---- line 25
      password: password,
      password_confirmation: password
    )

    create_customer first_name: 'Chris', last_name: 'Aaron'

    create_customer first_name: 'Pat', last_name: 'Johnson'

    create_customer first_name: 'I.T.', last_name: 'Pat'

    create_customer first_name: 'Patricia', last_name: 'Dobbs'

    create_customer first_name: 'Pat', last_name: 'Jones', email: 'pat123@somewhere.net'



    visit '/customers'
    fill_in 'Email',    with: email
    fill_in  'Password', with: password
    click_button 'Log in'
  end

  scenario "Search by Name" do
    within "section.search-form" do
      fill_in "keywords", with: "pat"
    end
    within "section.search-results" do
      expect(page).to have_content("Results")
      expect(page.all("ol li.list-group-item").count).to eq(4)
      expect(page.all("ol li.list-group-item")[0]).to have_content("Patricia")
      expect(page.all("ol li.list-group-item")[0]).to have_content("Dobbs")
      expect(page.all("ol li.list-group-item")[3]).to have_content("I.T.")
      expect(page.all("ol li.list-group-item")[3]).to have_content("Pat")
    end
  end

  scenario "Search by Email" do
    within "section.search-form" do
      fill_in "keywords", with: "pat123@somewhere.net"
    end
    within "section.search-results" do
      expect(page).to have_content("Results")
      expect(page.all("ol li.list-group-item").count).to eq(4)
      expect(page.all("ol li.list-group-item")[0]).to have_content("Pat")
      expect(page.all("ol li.list-group-item")[0]).to have_content("Jones")
      expect(page.all("ol li.list-group-item")[1]).to have_content("Patricia")
      expect(page.all("ol li.list-group-item")[1]).to have_content("Dobbs")
      expect(page.all("ol li.list-group-item")[3]).to have_content("I.T.")
      expect(page.all("ol li.list-group-item")[3]).to have_content("Pat")
    end
  end
end

I’m familiar with debugging Rails but not RSpec. Not sure how to use binding.pry with RSpec either, after fiddling with placing it in different blocks.

Dmfcb_pragsmall
05 Jan 2017, 22:13
David Copeland (476 posts)

What’s in your user.rb? And what’s in your devise initializer? That’s where the validations on the User model exist and it sounds like something is messed up there…

Generic-user-small
07 Jan 2017, 01:35
Andy Zhao (13 posts)

Oh right, I totally forgot I switched the email validation to ...@ex.com instead of ...@example.com… I guess that’s what happens when you put the book down over the holidays… Really appreciate you helping this noob.

Dmfcb_pragsmall
07 Jan 2017, 01:46
David Copeland (476 posts)

No worries. This stuff can get complicated and confusing, especially when it doesn’t work. I experienced all these issues when writing the book :)

You must be logged in to comment