Custom Field component does not propagate value change event

[MatthewVaadin]

Problem:

In trying to test a page with a custom field component, I noticed that if I set the value of one of the fields that form part of the custom field, the value change event for the parent component is not fired. I would expect the event propagation from child components to the parent in this case.

// Custom field component
var dateRangePicker = $(DateRangePicker.class).first();
// Child component
var startTimePicker = $(DatePicker.class).first();
// This should cause a value change event on the parent custom field
test(startDatePicker).setValue(LocalDate.now());

In addition, in creating a test case for this, I noticed that the test wrapper method for a custom field component does not provide a setValue method. I would expect to be able to write something like the following:

var dateRangePicker = $(DateRangePicker.class).first();
test(dateRangePicker).setValue(new LocalDateRange(LocalDate.now(), null));

Minimal test case:

https://github.com/MatthewVaadin/custom-field-testing

Steps to reproduce:

Correct operation

• Run application and login
• In the Main view, set a start date in the Enrolment period field
• Note that a log message is added below

Testing failure

• Run the tests in MainViewTest
• Note that directly setting the value of the DateRangePicker component adds messages to the log
• Note that setting the value of the start or end date picker does NOT add messages to the log (tests that fail)

[TatuLund]

The problem in your case is that your version of CustomField relies upon vaadin-custom-field client side value propagation mechanism. Hence it cannot work with UIUnitTest. You have two alternatives in this scenario 1) Test this particular functionality with Browser based test or 2) Refactor your CustomField to propagate the value in Java.

[MatthewVaadin]

The test scenario was made with the first example here: https://vaadin.com/docs/latest/components/custom-field

Is there any documentation detailing how to turn this into a version that is testable with TestBench?

[TatuLund]

Yes, the CustomField documentation should mention that there is a client side mechanism that observes the value property changes of the child fields, and triggers the generatedModelValue method upon value change. And provided that the child fields are well behaving, the property value should have been synced to server, and hence you can relay on that when implementing generatedModelValue.

It is possible to make CustomFields work better with unit testing by instead adding value change listener for each child field in your CustomField's constructor and call setModelValue(..) there as well as leave generatedModelValue implementation empty.

Moreover intro section of UI Unit Test documentation could have a clearer note, that np client side based logic of the components is executed when unit tests are run, and that is something to be noted when implementing custom components especially.

[MatthewVaadin]

I can confirm that the tests pass as expected if I follow your instructions to add value change listeners instead of relying on generateModelValue to be called.