docker - CasperJS doesn't load content injected by Angular router -


i'm preparing example project on github accompany course i'm working on how write functional tests dockerized applications. application has part angular2 single-page app, i'm trying test app casperjs (i've tried behat same problem explained below).

when running tests in casperjs it's if routing in angular doesn't load tests, mean can assert things in index template exist (like page title example) things inside <app-root></app-root> tags don't load tests.

the code

here index template:

<!doctype html> <html lang="en"> <head   <meta charset="utf-8">   <title>testproject</title>   <base href="/">   <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body>   <app-root></app-root> </body> </html>

the test is:

casper.test.begin('tests homepage structure', function suite(test) {      casper.start('http://web', function() {          // works because title set in "parent" template.         test.asserttitle("testproject", "title correct");          casper.wait(2000);          // fails, i'm guessing because h2 in "child" template,         // seems casperjs doesn't render angular2 app correctly         // , child route templates not injected page correctly.         test.assertvisible('h2');     });      casper.run(function() {         test.done();     }); });

here's output of test:

test file: homepage.js                                                           # tests homepage structure [info] [phantom] starting... [info] [phantom] running suite: 2 steps pass tests homepage structure (nan test) [debug] [phantom] opening url: http://web/, http [debug] [phantom] navigation requested: url=http://web/, type=other, willnavigate=true, ismainframe=true [debug] [phantom] url changed "http://web/" [debug] [phantom] injected casper client-side utilities [info] [phantom] step anonymous 2/2 http://web/ (http 200) pass title correct fail selector visible #    type: assertvisible #    file: homepage.js #    subject: false #    selector: "h2" [info] [phantom] step anonymous 2/2: done in 178ms. [info] [phantom] step _step 3/3 http://web/ (http 200) [info] [phantom] step _step 3/3: done in 196ms. [info] [phantom] wait() finished waiting 2000ms. [info] [phantom] done 3 steps in 2215ms

note these tests , web running inside docker containers, that's why hostname in code above "web" , not ip.

the application on github here. run application docker-compose up in root , browse http://127.0.0.1:81/. run casperjs tests run ./tests/web/run_functional_test.sh, don't need run docker-compose up beforehand.

stuff tried

i have tried see if casperjs running problem outputting console errors on casperjs's loading of page haven't found suspicious.

the application works when run in browser, can see content router injected index template.

i have tried using resurrectio visit page in chrome, click few things , export test directly casperjs test file, automatically generated test fails same reason, content injected router not accessible casperjs.

i have tried using behat , selenium similar results. suggests problem not casperjs/phantomjs (maybe angular setup?).

the question

i'm no phantomjs/selenium expert understood can render javascript , it's normal expect casperjs , behat should able run assertions on things angular router inserts page, wrong in assuming this?

if not, going on tests? why can't casperjs tests run assertions against templates in routes?

in end problem simple one, simple ones ones make pull hair out.

from within web application using "127.0.0.1:82" connection string of api. worked in local because docker-compose file mapped port 82 of host wasn't mapping port 82 tests, web couldn't connect api. fix here.

i'm no phantomjs/selenium expert understood can render javascript , it's normal expect casperjs , behat should able run assertions on things angular router inserts page, wrong in assuming this?

i of course correct in assuming this.


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more