How to determine if Grid editor is open in UI Unit tests?

Flow
1

In the context of UI Unit tests, if I start editing an item in the grid with editor.editItem(item) and then try to check whether editor.isOpen(), it returns false.
I assume this is because item is marked for editing after call to “frontend” in EditorImpl.editItem(T item) method:

getGrid().getElement().getNode().runWhenAttached(
                    ui -> ui.getInternals().getStateTree().beforeClientResponse(
                            getGrid().getElement().getNode(), editItemRequest));

I would have to guess editItemRequest is never executed (at least with while debugging it doesn’t get there).
How could I test if editor is opened?

Here’s how my test looks:

@Test
void testGridEditorOpen() {
    navigate(MyView.class);
    var grid = (Grid<MyItem>) $(Grid.class).first();
    var item = getItem();
        
    grid.getEditor().editItem(item);
        
    assertTrue(grid.getEditor().isOpen()); // returns false :(
}

Vaadin 24.3.4

2

isOpen checks the item you passed editItem to see if it is null. Are you sure your item is not null? (Answering for myself:) I guess it would have to be non-null or you would have gotten an error calling editItem… Hmmm…

I see. (I’m a little slow.) The editItem method runs some JS to edit the item, and it is a callback (editItemRequest) from that JS that sets the item being edited. Since the JS isn’t run in unit tests, that callback is not run and therefore the item is never set.

I suppose it should be possible to extend GridTester to give it an editItem method that you would call instead of the one in the Grid and then check it through your extended GridTester’s internal state.

It sounds to me like an enhancement ticket is in order. I don’t see one for this. Could you open one?

1 Like
5

Thanks for the explanation.
I think I oversimplified the example. The editItem(item) is supposed to be called from source code, not a Test class.

@Test
void testGridEditorOpen() {
    navigate(MyView.class);
    var grid = (Grid<MyItem>) $(Grid.class).first();
        
    view.editLastItem();
        
    assertTrue(grid.getEditor().isOpen()); // returns false :(
}

public class MyView {
    ....
    protected void editLastItem() {
        if (lastItem != null) {
            grid.editItem(item);
        }
    }
}

So using gridTester.editItem(item) is not an option here.

6

You probably need to add a roundTrip(); call after view.editLastItem(); so that the beforeClientResponse callback can be executed

1 Like
7

Anyway, you should avoid calling view methods directly from the test.
You should simulate actions you do in the browser. for example, if the editor gets opened by double-clicking a grid row, you should just use the GridTesters to send the double click on that row.