Search code examples
angularjasmineprotractortoastr

How to test toast messages in Protractor in Angular?


In the app I am testing, there are lines in the component class that displays a toastr message. I am trying to write a protractor test that tests to if these messages display or not but am having a hard time. The reason being that I have no mention of the toastr in my Html, so I do not really have an idea of how to have protractor find it. Here is the code where I use toastr. I want to test if the success message displays if the user registers or updates.

     dialogRef.afterClosed().subscribe(result => {
        console.log(result);
        if (result.success === "success") {
            this.toastr.success(result.isToEdit == true ? "User is updated successfully " : "User is created successfully.");
            this.getUsers();
        }
    });

I am scratching my head at this one. Any help would be great. Thank you!

Edit: I believe I have solved this problem. I did the following code to access the message:

return element(by.css('.toast-message'))

Solution

  • It does exist in the HTML, but only when it's visible.

    In the configuration, you can specify a class on the message, by setting messageClass

    Then you can search for it using the CSS class:

    https://www.npmjs.com/package/ng2-toastr#toastoptions-configurations