Can't look up components inside of PolymerTemplate

[mvysny]

Yes. This is because of how Vaadin 10 currently works. The problem in here is that any DOM manipulation conducted by browser will not make its way into Vaadin server (even with a full Vaadin 10 server running, so this is not just an unfortunate effect of browserless testing). The implications are many.

The original issue was that PolymerTemplate.getChildren() streams returns no components even when there are components nested inside of the PolymerTemplate. This has been explained in vaadin/flow#3642 - PolymerTemplate nests its contents inside of a Shadow DOM and Shadow DOM elements do not count as children.

Then I thought I could simply enumerate the contents of the template as suggested in this comment: vaadin/flow#3642 (comment)
And it worked, however the Buttons returned had an empty text!

And then the following bug came into play: vaadin/vaadin-button-flow#43 (comment)

In short - PolymerTemplate is parsed client-side and thus the DOM is not transferred server-side. On server-side, only the components mapped with @Id are constructed server-side; and those are nothing more but empty shells. So, for example the Button nests caption in a <span> element; however since DOM is not transferred the server-side Button thinks there is no span and therefore no caption and returns an empty text. Similarly all layouts (VerticalLayout) will have no children since it detects its children by enumerating its element's DOM children, but there is no DOM.

[mvysny]

So, to sum it up:

• PolymerTemplate.getChildren() returns an empty list and it's going to stay like that.
• even if I used the VirtualChildrenList workaround, I would not able to enumerate all components inside of the PolymerTemplate since there will be no server-side counterpart constructed for any component without an Id; so no Button for <vaadin-button> without id;
• Even if I would be able to enumerate all of the components in a PolymerTemplate, it would be useless since you wouldn't be able to find a Button based on the caption since there is no DOM and the Button.text will be empty.

The only way is to access @Id-annotated fields in the PolymerTemplate directly, for example:

class ReviewsList : PolymerTemplate<TemplateModel>() {
    @Id("search")
    internal lateinit var search: TextField
    @Id("addReview")
    internal lateinit var addReview: Button
    // ...
}
test("create review") {
   val list = _get<ReviewsList>()
   list.addReview._click()
}

[mvysny]

Can't fix - this is unfortunately how Vaadin 10 works and there is nothing I can do about it.

[mvysny]

Example in Java:

public class ReviewsList extends PolymerTemplate<TemplateModel> {
    @Id("search")
    TextField search;
    @Id("addReview")
    Button addReview;
    // ...
}

@Test
public void createReviewTest() {
   ReviewsList list = _get(ReviewsList.class);
   _click(list.addReview);
}