How can i delete selected cells from keyboard (clicking delete button)

Tags: #<Tag:0x00007efc61cfc0d8> #<Tag:0x00007efc61d43f50>
#1

Hi, I am tester. I need emulate a delete button clicking to delete the values from the selected cells in tests scenario. Could you help me to do it?

#2

Hi @galogenit

We do not have a dedicated page on how to create tests for Handsontable so the only thing I can do is to share our own tests.

Here https://github.com/handsontable/handsontable/blob/5f253b5a08bef1a7c9207b56c539ae32ee1cfee9/handsontable/src/renderers/checkboxRenderer/tests/checkboxRenderer.spec.js#L650 is an example. And the function that simulates the click is at https://github.com/handsontable/handsontable/blob/develop/handsontable/test/helpers/keyboardEvents.js#L114

#3

Hello @aleksandra_budnik

Thank you for reply but I could not understand how it use in my case.

I found a such way:

hotTender - is varaable link to hansdsontable

hotTender.selectCell(0,7,0,10);
var event = document.createEvent(“Event”);
event.initEvent(“keydown”, true, true);
event.key = “Delete”;
document.dispatchEvent(event);

Could you explain more detail your solution?

#4

If that works for you I do not think you should copy our approach (we’re using Jasmine). However, here https://handsontable.com/docs/react-data-grid/testing/ is a tutorial on how to run our tests, so based on the API/helpers that we already created you could copy/paste an existing test case, alter it, and run via

  • npm run test:unit --testPathPattern=array - runs only unit tests and suites matching the filename “array”.
#5

Hi @aleksandra_budnik,

In general, everything turned out to be simpler. It turned out that it is enough to send a command using standard driver tools (capybara).
However, there is still a problem with deleting a selected column (.selectColumns()) or selected row (.selectRows()) by pressing the delete key.

In the browser console, the removal code works, but in the test the same code does nothing.
var event = document.createEvent(‘Event’);
event.initEvent(‘keydown’, true, true);
event.key = ‘Delete’;
document.dispatchEvent(event);

By the way, I already addressed a similar problem

#6

In Handsontable to delete a column we use alter() method underneath (that’s a core method).

In the tests we have a method that simulates a click on an option at https://github.com/handsontable/handsontable/blob/develop/handsontable/test/helpers/common.js#L443 and it is used in the test for removing columns https://github.com/handsontable/handsontable/blob/develop/handsontable/src/plugins/contextMenu/tests/predefinedItems/removeColumn.spec.js#L15

#7