small medium large xlarge

Generic-user-small
12 Jun 2017, 20:32
Philippe Haussy (13 posts)

Getting the following error, even after copying the source code available from the book

Failures:

  1) Customer Search Search by Name
     Failure/Error:
       within "section.search-form" do
         fill_in "keywords", with: "pat"
       end
     
     Capybara::ElementNotFound:
       Unable to find css "section.search-form"

added the following to debug. The screenshot says “Rails:test, sign in successfully”. No keyword input field as the error rightfully describes. Now, the exact same scenario is working just fine in Chrome. So looks like PhantomJS is not behaving the same way here. Basically, the page is not redirected correctly to /customers after login.


# Login to get access to /customers
    fill_in "Email",    with: email
    fill_in "Password", with: password
    click_button "Log in"

    sleep(3)
    save_screenshot("/Users/phaussy/WebDev/shine/screenshot.png")

    within "section.search-form" do
      fill_in "keywords", with: "pat"
    end

Even the following appears to not be working:

scenario "Search by Name"do
    visit "/customers"

    # Login to get access to /customers
    fill_in "Email",    with: email
    fill_in "Password", with: password
    click_button "Log in"

    visit "/customers"

    sleep(3)
    save_screenshot("/Users/phaussy/WebDev/shine/screenshot2.png")

    within "section.search-form" do
      fill_in "keywords", with: "pat"
    end

Now the following redirects correctly to root even if obviously the test fails has expected(confirmed by screenshot) ~~~ scenario “Search by Name”do visit “/customers”

# Login to get access to /customers
fill_in "Email",    with: email
fill_in "Password", with: password
click_button "Log in"

visit "/"

sleep(3)
save_screenshot("/Users/phaussy/WebDev/shine/screenshot3.png")

within "section.search-form" do
  fill_in "keywords", with: "pat"
end ~~~

Any idea?

Dmfcb_pragsmall
12 Jun 2017, 21:20
David Copeland (476 posts)

If you put puts page.html before the within, what do you see? Can you post the HTML here or link to it in a gist?

Generic-user-small
12 Jun 2017, 22:44
Philippe Haussy (13 posts)

Thanks for the quick response.

Here is the repo:

https://phaussy@bitbucket.org/phaussy/shine.git

here is what I get from the puts

Customer Search
  Search by Email (FAILED - 1)
<!DOCTYPE html><html><head>
    <title>Shine</title>
    

    <link rel="stylesheet" media="all" href="/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css">
    <script src="/assets/application-9f4e9bdb3a0fde42424854a8661de917b18eef3b881ccdf05814c586cdf7e7c0.js"></script>
    <script src="http://localhost:8080/packs/application.js"></script>
    <link rel="stylesheet" media="screen" href="http://localhost:8080/packs/application.css">
  </head>

  <body class="container">
    <h1>Rails:test</h1>
      <aside class="alert alert-info"> 
        Signed in successfully.
      </aside>
    <section>
  <shine-customer-search></shine-customer-search>
</section>
<script src="http://localhost:8080/packs/customers.js"></script>
  

</body></html>
  Search by Name (FAILED - 2)

Failures:

  1) Customer Search Search by Email
     Failure/Error:
       within "section.search-form" do
         fill_in "keywords", with: "pat123@somewhere.net"
       end
     
     Capybara::ElementNotFound:
       Unable to find css "section.search-form"
Dmfcb_pragsmall
13 Jun 2017, 00:32
David Copeland (476 posts)

Are there any other errors? It looks like Angular isn’t running at all and none of your JS is executing. Given that the <script> tag wants stuff from port 8080, are you running the webpack-dev server? In tests, the default config should be to not run the server, and you have to do RAILS_ENV=test bin/webpack before each test where you changed JS files, including the first time. Instructions are on page 111 of the latest beta (or around there).

Generic-user-small
13 Jun 2017, 04:06
Philippe Haussy (13 posts)

webpack-dev server is not running and I run webpack before the test: RAILS_ENV=test bin/webpack

No other error. I do get 2 warnings running either webpack-dev server or webpack but that does not seem to keep Chrome from running the app correctly. So I did not worry too much about it so far.

Here is the output of webpack:

MacBookPro:phaussy ~/WebDev/shine$RAILS_ENV=test bin/webpack
ts-loader: Using typescript@2.3.4 and /Users/phaussy/WebDev/shine/tsconfig.json
Hash: 1120fb2972d8bf3e27aa
Version: webpack 2.6.1
Time: 9130ms
                             Asset       Size  Chunks                    Chunk Names
                 customers_save.js    2.43 MB       0  [emitted]  [big]  customers_save
  glyphicons-halflings-regular.eot    20.1 kB          [emitted]         
  glyphicons-halflings-regular.ttf    45.4 kB          [emitted]         
 glyphicons-halflings-regular.woff    23.4 kB          [emitted]         
glyphicons-halflings-regular.woff2      18 kB          [emitted]         
  glyphicons-halflings-regular.svg     109 kB          [emitted]         
                      customers.js    2.43 MB       1  [emitted]  [big]  customers
                  hello_angular.js    2.12 MB       2  [emitted]  [big]  hello_angular
                    application.js    4.06 kB       3  [emitted]         application
                   application.css     141 kB       3  [emitted]         application
                manifest-test.json  856 bytes          [emitted]         
  [25] ./~/@angular/core/@angular/core.es5.js 468 kB {0} {1} {2} [built]
  [52] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 142 kB {0} {1} {2} [built]
 [123] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 6.09 kB {0} {1} {2} [built]
 [124] ./app/javascript/hello_angular/polyfills.ts 598 bytes {0} {1} {2} [built]
 [294] ./~/@angular/forms/@angular/forms.es5.js 203 kB {0} {1} [built]
 [295] ./~/@angular/http/@angular/http.es5.js 74.7 kB {0} {1} [built]
 [299] ./~/rxjs/observable/fromPromise.js 179 bytes {0} {1} [built]
 [300] ./~/rxjs/operator/map.js 3.29 kB {0} {1} [built]
 [301] ./app/javascript/packs/application.css 41 bytes {3} [built]
 [302] ./~/bootstrap/dist/css/bootstrap.css 41 bytes {3} [built]
 [303] ./app/javascript/hello_angular/index.ts 200 bytes {2} [built]
 [304] ./app/javascript/packs/application.js 585 bytes {3} [built]
 [305] ./app/javascript/packs/customers.js 3.33 kB {1} [built]
 [306] ./app/javascript/packs/customers_save.js 2.97 kB {0} [built]
 [307] ./app/javascript/packs/hello_angular.js 204 bytes {2} [built]
    + 305 hidden modules

WARNING in ./~/@angular/core/@angular/core.es5.js
5899:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5915:15-102 Critical dependency: the request of a dependency is an expression
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/application.css 169 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 80 bytes {0} [built]
       [1] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [2] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 80 bytes {0} [built]
       [3] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 80 bytes {0} [built]
       [4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 81 bytes {0} [built]
       [5] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 82 bytes {0} [built]
       [6] ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./~/bootstrap/dist/css/bootstrap.css 147 kB {0} [built]
MacBookPro:phaussy ~/WebDev/shine$
Dmfcb_pragsmall
13 Jun 2017, 11:11
David Copeland (476 posts)

Running RAILS_ENV=test bin/webpack should create the file public/packs-test/manifest.json. If you examine that, it should look about like so:

{
  "application.css": "/packs-test/application.css",
  "application.js": "/packs-test/application.js",
  "customers.js": "/packs-test/customers.js",
  "glyphicons-halflings-regular.eot": "/packs-test/glyphicons-halflings-regular.eot",
  "glyphicons-halflings-regular.svg": "/packs-test/glyphicons-halflings-regular.svg",
  "glyphicons-halflings-regular.ttf": "/packs-test/glyphicons-halflings-regular.ttf",
  "glyphicons-halflings-regular.woff": "/packs-test/glyphicons-halflings-regular.woff",
  "glyphicons-halflings-regular.woff2": "/packs-test/glyphicons-halflings-regular.woff2",
  "hello_angular.js": "/packs-test/hello_angular.js"
}

If you look at public/packs/manifest.json, it’ll be similar, but will reference the dev server.

It sounds like either your app is not using public/packs-test or something has configured your test env to use the dev server.

Can you post your project up on GitHub?

If not, what is in config/webpacker.yml. Should be something like:

test:
  <<: *default

  public_output_path: packs-test

Generic-user-small
13 Jun 2017, 17:46
Philippe Haussy (13 posts)

Were you not able to get the source from this link? https://phaussy@bitbucket.org/phaussy/shine.git

It looks like I was using webpacker 1.2 and you have 2.0

Somewhat better since I now have the files mentioned in your previous post…

Getting different errors now :

1) Customer Search Search by Name Failure/Error: <%= stylesheet_pack_tag “application” %>

 ActionView::Template::Error:
   Can't find application.css in /Users/phaussy/WebDev/shine/public/packs-test/manifest.json. Is webpack still compiling?

and it is missing from my /public/packs-test/manifest.json

{ “application.js”: “/packs-test/application.js”, “customers.js”: “/packs-test/customers.js”, “customers_save.js”: “/packs-test/customers_save.js”, “hello_angular.js”: “/packs-test/hello_angular.js” }

the output of RAILS_ENV=test bin/webpack


yarn run v0.24.5
$ "/Users/phaussy/WebDev/shine/node_modules/.bin/webpack" --config /Users/phaussy/WebDev/shine/config/webpack/test.js
ts-loader: Using typescript@2.3.4 and /Users/phaussy/WebDev/shine/tsconfig.json
Hash: e33263e5dee23a19a8b7
Version: webpack 2.6.1
Time: 7507ms
            Asset       Size  Chunks                    Chunk Names
customers_save.js    2.43 MB       0  [emitted]  [big]  customers_save
     customers.js    2.43 MB       1  [emitted]  [big]  customers
 hello_angular.js    2.12 MB       2  [emitted]  [big]  hello_angular
   application.js    3.17 kB       3  [emitted]         application
    manifest.json  208 bytes          [emitted]         
  [17] ./~/rxjs/Observable.js 5.64 kB {0} {1} {2} [built]
  [25] ./~/@angular/core/@angular/core.es5.js 468 kB {0} {1} {2} [built]
  [52] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 142 kB {0} {1} {2} [built]
  [74] ./~/@angular/common/@angular/common.es5.js 130 kB {0} {1} {2} [built]
 [123] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 6.09 kB {0} {1} {2} [built]
 [124] ./app/javascript/hello_angular/polyfills.ts 598 bytes {0} {1} {2} [built]
 [281] ./~/rxjs/observable/merge.js 128 bytes {0} {1} {2} [built]
 [285] ./~/rxjs/operator/share.js 923 bytes {0} {1} {2} [built]
 [294] ./~/@angular/forms/@angular/forms.es5.js 203 kB {0} {1} [built]
 [295] ./~/@angular/http/@angular/http.es5.js 74.7 kB {0} {1} [built]
 [301] ./app/javascript/hello_angular/index.ts 200 bytes {2} [built]
 [302] ./app/javascript/packs/application.js 515 bytes {3} [built]
 [303] ./app/javascript/packs/customers.js 3.33 kB {1} [built]
 [304] ./app/javascript/packs/customers_save.js 2.97 kB {0} [built]
 [305] ./app/javascript/packs/hello_angular.js 204 bytes {2} [built]
    + 293 hidden modules

WARNING in ./~/@angular/core/@angular/core.es5.js
5899:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5915:15-102 Critical dependency: the request of a dependency is an expression
✨  Done in 8.28s.

So looks like I may be missing something for the test env since my /public/packs/manifest.json looks like:

~~~ { “application.css”: “http://localhost:8080/packs/application.css”, “application.css.map”: “http://localhost:8080/packs/application.css.map”, “application.js”: “http://localhost:8080/packs/application.js”, “application.js.map”: “http://localhost:8080/packs/application.js.map”, “customers.js”: “http://localhost:8080/packs/customers.js”, “customers.js.map”: “http://localhost:8080/packs/customers.js.map”, “customers_save.js”: “http://localhost:8080/packs/customers_save.js”, “customers_save.js.map”: “http://localhost:8080/packs/customers_save.js.map”, “glyphicons-halflings-regular.eot”: “http://localhost:8080/packs/glyphicons-halflings-regular.eot”, “glyphicons-halflings-regular.svg”: “http://localhost:8080/packs/glyphicons-halflings-regular.svg”, “glyphicons-halflings-regular.ttf”: “http://localhost:8080/packs/glyphicons-halflings-regular.ttf”, “glyphicons-halflings-regular.woff”: “http://localhost:8080/packs/glyphicons-halflings-regular.woff”, “glyphicons-halflings-regular.woff2”: “http://localhost:8080/packs/glyphicons-halflings-regular.woff2”, “hello_angular.js”: “http://localhost:8080/packs/hello_angular.js”, “hello_angular.js.map”: “http://localhost:8080/packs/hello_angular.js.map” }~~~

Dmfcb_pragsmall
13 Jun 2017, 19:02
David Copeland (476 posts)

Ah! that explains it. Yeah, 1.2 -> 2.0 changed a ton of the config stuff.

Your new problem looks like you aren’t referencing application.css in your application.js pack. The book should instruct you to do that, but basically:

// in app/javascript/packs/application.js
import "./application.css";

Should work.

Generic-user-small
13 Jun 2017, 20:18
Philippe Haussy (13 posts)

yes, the webpacker upgrade overrode application.js. Works fine now. thanks for your help.

Dmfcb_pragsmall
13 Jun 2017, 20:31
David Copeland (476 posts)

Sure thing. In theory, a fresh app with Webpacker avoids all this pain—their 1.2->2.0 upgrade story had, shall we say, opportunities for growth :)

Generic-user-small
13 Jun 2017, 23:04
Philippe Haussy (13 posts)

it was a fresh app actually but it looks like bundle install got 1.2 until I specified 2.0.

Generic-user-small
23 Sep 2017, 16:57
Oktaviandi Hadi Nugraha (3 posts)

I’ve the same error. This is the output from the console

Randomized with seed 13321

Customer Search
Hello World from Webpacker
Hello World from Webpacker
TypeError: undefined is not a function (evaluating 'Object.assign({}, merged, opt)')
  Search by Name (FAILED - 1)
Hello World from Webpacker
Hello World from Webpacker
TypeError: undefined is not a function (evaluating 'Object.assign({}, merged, opt)')
  Search by Email (FAILED - 2)

Failures:

  1) Customer Search Search by Name
     Failure/Error:
       within "section.search-form" do
         puts page.html
         fill_in "keywords", with: "pat"
       end
     
     Capybara::ElementNotFound:
       Unable to find visible css "section.search-form"
     # ./spec/features/customer_search_spec.rb:61:in `block (2 levels) in <top (required)>'

  2) Customer Search Search by Email
     Failure/Error:
       within "section.search-form" do
         puts page.html
         fill_in "keywords", with: "pat123@somewhere.net"
       end
     
     Capybara::ElementNotFound:
       Unable to find visible css "section.search-form"
     # ./spec/features/customer_search_spec.rb:86:in `block (2 levels) in <top (required)>'

Top 2 slowest examples (8.43 seconds, 96.0% of total time):
  Customer Search Search by Name
    5.69 seconds ./spec/features/customer_search_spec.rb:53
  Customer Search Search by Email
    2.75 seconds ./spec/features/customer_search_spec.rb:78

Finished in 8.79 seconds (files took 2.19 seconds to load)
2 examples, 2 failures

Failed examples:

rspec ./spec/features/customer_search_spec.rb:53 # Customer Search Search by Name
rspec ./spec/features/customer_search_spec.rb:78 # Customer Search Search by Email

Randomized with seed 13321

/home/adi/.rbenv/versions/2.3.1/bin/ruby -I/home/adi/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-core-3.5.4/lib:/home/adi/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-support-3.5.0/lib /home/adi/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-core-3.5.4/exe/rspec spec/features/customer_search_spec.rb failed

I tried adding puts page.html from within, but it doesn’t print anything. If I put it outside the within block, it manages to print the html.

This is content of my manifest.json from public/packs-test

{
  "_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot": "/packs-test/_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular-f4769f9bdb7466be65088239c12046d1.eot",
  "_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg": "/packs-test/_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular-89889688147bd7575d6327160d64e760.svg",
  "_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "/packs-test/_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular-e18bbf611f2a2e43afc071aa2f4e1512.ttf",
  "_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "/packs-test/_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular-fa2772327f55d8198301fdb8bcfc8158.woff",
  "_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "/packs-test/_/_/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular-448c34a56d699c29117adc64c43affeb.woff2",
  "application.css": "/packs-test/application-2f96b21397ec5397d071715c4d0582a3.css",
  "application.js": "/packs-test/application-bd623aac414d16fd9cd9.js",
  "customers.js": "/packs-test/customers-d66bd2ab4d13e4ee279c.js",
  "hello_angular.js": "/packs-test/hello_angular-2258c0d982c77fe97630.js"
}

Any clue on why the test failed?

Dmfcb_pragsmall
23 Sep 2017, 19:11
David Copeland (476 posts)

If printing the HTML shows the DOM elements you are looking for, there’s a race condition somewhere. Can you post a link to your in-progress app’s source code?

Generic-user-small
24 Sep 2017, 05:18
Oktaviandi Hadi Nugraha (3 posts)

I put it on github which you can access at https://github.com/oktaviandi/shine

Thanks

Dmfcb_pragsmall
24 Sep 2017, 13:35
David Copeland (476 posts)

Yup, it’s the race condition. This is discussed on page 107 of the book, but you need to prevent the search from from rendering until the customer has been fetched from the backend:

<section class="search-results" *ngIf="customers"> \ 
<!-- Rest of the template -->
</section> \
Generic-user-small
25 Sep 2017, 16:41
Oktaviandi Hadi Nugraha (3 posts)

There is *ngIf in the mark up for search result as you can see in the repo. In fact when I got this error, I copy customers.js from the source code example thinking maybe I missed a thing or two in the js.

This is the result of puts page.html taken before the call in within block

Customer Search
Hello World from Webpacker
Hello World from Webpacker
TypeError: undefined is not a function (evaluating 'Object.assign({}, merged, opt)')
<!DOCTYPE html><html><head>
    <title>Shine</title>
    

    <link rel="stylesheet" media="all" href="/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css">
    <script src="/assets/application-68c34e3c02a436aeb143ba578224a1086b72f086ef00e273b08133ebb9f249ab.js"></script>
    <script src="/packs-test/application-bd623aac414d16fd9cd9.js"></script>
    <link rel="stylesheet" media="screen" href="/packs-test/application-2f96b21397ec5397d071715c4d0582a3.css">
  </head>

  <body class="container">
      <aside class="alert alert-info">
        Signed in successfully.
      </aside>
    <section>
    <shine-customer-search></shine-customer-search>
</section>  
<script src="/packs-test/customers-d66bd2ab4d13e4ee279c.js"></script>

Where should I look next?

Dmfcb_pragsmall
26 Sep 2017, 12:19
David Copeland (476 posts)

Does it work outside a test? There is a JavaScript error and your Angular app is not rendering anything.

Unfortunately, it doesn’t show much beyond a message, but in my experience when this happens, something is broken in dev as well.

Generic-user-small
28 Sep 2017, 01:38
Joel (7 posts)

I think this may have something to do with webpacker 3 being used. I am getting a similar error trying to run the test setup in the book…According to the webpacker 3 wiki on github testing should work without any extra config but it doesn’t seem to work with the setup from the book or rspec. See here: https://github.com/rails/webpacker/blob/master/docs/testing.md

Dmfcb_pragsmall
01 Oct 2017, 16:19
David Copeland (476 posts)

This PR, just merged, seems to address this issue:

https://github.com/rails/webpacker/pull/882

You must be logged in to comment