More progress - problem is limited to {{ }} value not being updated during
view rendering. If I add the below to the html template:
<input id="echoResult2" type="text" class="form-control" placeholder="echo
input" [value]="echoResult"/>
And change the test to get the value of the echoResult2 input element:
it("verify A2 echo submit button with fake echoInput value", function ()
{
let msg: string = "echoSubmitBtn with fake result";
echoInputEl.sendKeys(msg); // Protractor ElementFinder automatically waits
async promise to complete
echoBtnEl.click(); // Protractor ElementFinder automatically waits
async promise to complete
browser.driver.sleep(5000); // will go away when configure
protractor.ignoreSynch for A2...
echoResult2El.getAttribute("value").then((echoRes: string) =>
console.log("after submit fake result is: " + echoRes));
// Now wait for response, and check echoResult field
expect(echoResult2El.getAttribute("value")).toBe(msg); // Protractor
extends Jasmine expect to wait for promise!
});
The above test succeeds (and can visually watch it during the test). This
shows that Angular 2 is detecting the 'echoResult' property change, and the
echoResult2 input field is re-rendered to display the changed value while
the {{ echoResult }} is not. I believe this must be a bug (why would the
one-way bindings of the 'input' field succeed but the one-way bindings of
{{...}} does not - and only under test)?
Any ideas - or should I file as an Angular 2 issue?
- Brad
On Tuesday, August 4, 2015 at 9:25:49 AM UTC-4, Brad Miller wrote:
>
> 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.
