Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TestBench API/support for accessing and testing Grid inline editor components #1863

Open
MatthewVaadin opened this issue Jan 30, 2025 · 1 comment
Labels
bug UITest JUnit testing the UI

Comments

@MatthewVaadin
Copy link

When using the inline editing feature of a Grid component, there isn't any API in TestBench to access and test editor components.

Consider the following view (taken from the example in the docs):

Grid<Person> grid = new Grid<>(Person.class, false);
Editor<Person> editor = grid.getEditor();

Grid.Column<Person> firstNameColumn = grid
        .addColumn(Person::getFirstName).setHeader("First name")
        .setWidth("120px").setFlexGrow(0);
Grid.Column<Person> lastNameColumn = grid.addColumn(Person::getLastName)
        .setHeader("Last name").setWidth("120px").setFlexGrow(0);
Grid.Column<Person> emailColumn = grid.addColumn(Person::getEmail)
        .setHeader("Email");
Grid.Column<Person> editColumn = grid.addComponentColumn(person -> {
    Button editButton = new Button("Edit");
    editButton.addClickListener(e -> {
        if (editor.isOpen())
            editor.cancel();
        grid.getEditor().editItem(person);
    });
    return editButton;
}).setWidth("150px").setFlexGrow(0);

Binder<Person> binder = new Binder<>(Person.class);
editor.setBinder(binder);
editor.setBuffered(true);

TextField firstNameField = new TextField();
firstNameField.setWidthFull();
binder.forField(firstNameField)
        .asRequired("First name must not be empty")
        .withStatusLabel(firstNameValidationMessage)
        .bind(Person::getFirstName, Person::setFirstName);
firstNameColumn.setEditorComponent(firstNameField);

TextField lastNameField = new TextField();
lastNameField.setWidthFull();
binder.forField(lastNameField).asRequired("Last name must not be empty")
        .withStatusLabel(lastNameValidationMessage)
        .bind(Person::getLastName, Person::setLastName);
lastNameColumn.setEditorComponent(lastNameField);

EmailField emailField = new EmailField();
emailField.setWidthFull();
binder.forField(emailField).asRequired("Email must not be empty")
        .withValidator(
                new EmailValidator("Enter a valid email address"))
        .withStatusLabel(emailValidationMessage)
        .bind(Person::getEmail, Person::setEmail);
emailColumn.setEditorComponent(emailField);

Button saveButton = new Button("Save", e -> editor.save());
Button cancelButton = new Button(VaadinIcon.CLOSE.create(),
        e -> editor.cancel());
cancelButton.addThemeVariants(ButtonVariant.LUMO_ICON,
        ButtonVariant.LUMO_ERROR);
HorizontalLayout actions = new HorizontalLayout(saveButton,
        cancelButton);
actions.setPadding(false);
editColumn.setEditorComponent(actions);

If I try to test the "Edit" button:

var grid = $(Grid.java).first();
var editColumn = test(grid).getCellComponent(0, 3);
var editButton = $(Button.class, editColumn).first();
test(editButton).click();

I get the following error:
java.lang.IllegalStateException: Button[caption='Edit'] is not usable

To work around this, I can call click() directly on the component:

...
editButton.click();

var firstNameColumn = (Grid.Column) grid.getColumns().get(0);
var firstNameField = (TextField) firstNameColumn.getEditorComponent();

assertThat(firstNameField.getValue()).isEqualTo("Aria");

Then the assertion fails because the value in the field is empty. I can "force" it to update by doing another query:

...
firstNameField = $(TextField.class, firstNameField).first(); // Doesn't have to involve the first name field

assertThat(firstNameField.getValue()).isEqualTo("Aria");

This time the assertion passes.

There are two issues that this highlights:

  1. It seems that some simple things like testing components in a grid doesn't work using the tester classes.
  2. There is no API to test inline editing.

The second used to be possible in Vaadin 8 (GridEditorTest.java).

@MatthewVaadin
Copy link
Author

Example project with failing tests to show the issues: https://github.com/MatthewVaadin/grid-testing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug UITest JUnit testing the UI
Projects
Status: 🔖 Normal Priority (P2)
Status: 🅿️Parking lot
Development

No branches or pull requests

2 participants