Hi,
I have a simple UI that is composed of three element: an 'echoInput'
input element for entering data, an 'echoBtn' for submitting the echo value
to a server, and an 'echoResult' label for displaying the server 'echo'
response:
<input id="echoInput" logger #echo_input_ref type="text"
class="form-control" placeholder="echo input"
[value]="echoVal"
(keyup.enter)="echoSubmit(echo_input_ref.value)"/>
<button id="echoBtn" type="button" class="btn btn-primary"
(click)="echoSubmit(echo_input_ref.value)">Submit</button>
<label id="echoResult">{{ echoResult }}</label>
This trivial UI works great when manually using it via the browser - type
in the echo input field, hit submit, then the server 'echo' response
displays in the echoResult label when the fetch-initiated rpc completes.
However, I've been unable to write an integration test that verifies this
behavior.
Below is a simple protractor test that enters text in the echoInput field,
clicks the echoBtn to initiate the server roundtrip, then verifies the
echoResult label is displaying the correct response.
it("verify A2 echo submit button", function ()
{
let msg: string = "echoSubmitBtn";
echoInputEl.sendKeys(msg);
echoBtnEl.click();
browser.driver.sleep(5000); // just here to visually confirm that
echoResult field never updates
echoResultEl.getText().then((echoRes: string) => console.log("after submit
result is: " + echoRes)); // always returns empty string
// Now wait for response, and check echoResult field
expect(echoResultEl.getText()).toBe(msg);
});
Here is the problem: I can watch the browser under test, and see that the
input field is correctly being populated by the 'sendKeys', the click
invocation works, and from the logs I can see that the browser receives the
echo rpc response and sets the underlying 'echoResult' property - however,
the changed {{ echoResult }} value is never rendered into the dom element
on the browser (I can visually confirm that it never displays by watching
the browser under test)! This implies that Angular 2 change detection is
missing the 'echoResult' value update (when under test), or that it is not
rendering it if it does notice the change. However, when manually use the
UI, the changed detection/ui update phase works as expected - it is just an
issue under test.
One last piece of info (but not sure if it is relevant): I'm using 'fetch'
to interact with the server, but I was under the impression that Fetch is
'wrapped' by Angular 2 so that A2 knows about the rpcs (in the same way
that it knows about Http rpcs). I'm also using the latest Angular 2
preview (33), and have the protractor 'ignoreSynchronization' set to true.
Any advice would be appreciated.
Thanks,
Brad
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
