Sunday, 25 November 2018

How to test ngx-toastr with protractor in Angular 2

I'm using ngx-toastr with my angular 2 application and i've started running some e2e tests against it. I'm having difficulties testing the toastr as it pops up and dissapears after 5 seconds.

I've tried adding several different selection methods as suggested on Stackoverflow, without luck.

What i've tried:

getToastr() {
    var EC = protractor.ExpectedConditions;
    var targetEle = element(by.css(".toast-message"));

    browser.wait(EC.visibilityOf(targetEle), 10000, 'NOT VISIBLE'); //wait until 
    //ele visible
    browser.wait(EC.presenceOf(targetEle), 10000, 'NOT PRESENT');
}

which makes it hit the not visible code, eventhough i see the toastr present in the window - it is not able to find it in the dom. I've taken a screenshot of the dom to show you the position as i think it may have something to do with this.

Here's a screenshot of the dom Screenshot of DOM, i'm trying to toast within the start-signup section. Note that the router-outlet named Default does not wrap start-signup, even though it's declared in the router to use this outlet - i don't know if this is by design or not.

{
    path: 'signup',
    children: [
        { path: '', component: StartSignupComponent, outlet: 'default' }
    ]
},

It appears as though the toastr div is not inside the start-signup tag. I haven't been able to move it inside, even with the ngx-toastr's own method to move the toastr message inside a div "of your choosing". Currently i placed it in app.component, and placed the toastr "holder" div next to the router outlet - i also tried placing the holder div within the router-outlet without luck as well.

The error i get from protractor is:

    1) Create account page should have a toastr message
  - Failed: NOT VISIBLE
Wait timed out after 10334ms

Executed 28 of 28 specs (1 FAILED) in 18 secs.
[14:01:29] I/launcher - 0 instance(s) of WebDriver still running
[14:01:29] I/launcher - chrome #01 failed 1 test(s)
[14:01:29] I/launcher - overall: 1 failed spec(s)
[14:01:29] E/launcher - Process exited with error code 1
npm ERR! Test failed.  See above for more details.

I can provide more information if need be. This was the initial information that i could think of.

Kind regards Chris



from How to test ngx-toastr with protractor in Angular 2

No comments:

Post a Comment