I want to programmatically invoke preRowReorder by dispatchEvent(new MouseEvent("mousedown", {"bubbl

takeshisato

Hello

To test the functionality of the 'pre-row-reorder' callback functions, I programmatically created a "mousedown" event and dispatched it to the TD element of the table.

td_element.dispatchEvent(new MouseEvent("mousedown", {"bubbles"; true}));

This successfully invoked the callback functions on the browser but failed in the jest test.
Details are shown below, so it would be greatly appreciated if you could advise me.

Details

In my ScheduleDataTable class below, DataTable is initialized and some callback functions are on standby when this class is instantiated.

export class ScheduleDataTable {
    /**
     * A custom class that wraps the DataTable
     */
     constructor() {
        const table_element = document.getElementById('table-schedule');
        // A workaround that separates Jest and webpack initialization methods
        const datatable = initTable();
        table_element.datatable = datatable; 
        table_element.instance = this;
        this.datatable = datatable;
        ・・・・・・omitting・・・・・・・・・
        
        this.preRowReorder();
        this.rowReorder();
    }
    ・・・・・・omitting・・・・・・・・・
    
    // Once the drag begins, the 0-column will renumber as serial and unique.
    preRowReorder () {
        this.datatable.on('pre-row-reorder', callbackPreRowReorder);
    }
    // Without preRowReorder after duplicating the row with row.add(), it will be strange order
    rowReorder() {
        this.datatable.on('row-reorder', callbackRowReorder);
    }
    ・・・・・・omitting・・・・・・・・・
}

Below is the callback function for the "pre-row-reorder" event.

export function callbackPreRowReorder(event, grabbedRow) {
    /*
     * Once the drag begins(only with a “mousedown” event),
     * the 0-column will be renumbered as serial and unique.
     */
    const datatable = document.getElementById('table-schedule').datatable;
    const num_rows = datatable.rows()[0].length;  // number of rows
    for (let i=0; i < num_rows; i++ ) {
        datatable.row(i).data()[0] = (datatable.row(i).data()[2]).toString();
    }
}

When I run them in my local development environment using python (Django) runserver and manually manipulate the UI, the rowReorder functionalities seem to work well.
And In this environment, in the debug console of the browser's development tool, when I entered the following command, I was able to confirm that the callback function was called by stopping its process on the breakpoint set in the above callback function.

document.getElementById('staffname-3052')
.dispatchEvent(new MouseEvent('mousedown', { "bubbles": true})); 

Also, after that, when I proceeded with this process, I found that the following function of dataTables.rowReorder.mjs was called.
this is also good.

// webpack://・・・・/node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.mjs

        /**
         * Mouse down event handler. Read initial positions and add event handlers
         * for the move.
         *
         * @param  {object} e      Mouse event
         * @param  {jQuery} target TR element that is to be moved
         * @private
         */
        _mouseDown: function ( e, target )
        {
                var that = this;
                var dt = this.s.dt;
                var start = this.s.start;

However, I would expect a similar reaction to this from a Jest test, the callback functions for the "mouseover" event are not called.

What I tried

Thinking that it is because there is no information about the size of DOM elements by CSS, I introduced a package called “https://github.com/dferber90/jest-transform-css”. Then the CSS file in the test file as follows could also be imported.

import { ScheduleDataTable } from "../../__datatables__/scheduleDataTable";
import { loadHTML } from "../../__utils__/loadSpecifiedHtml";
import "bootstrap";
import "../../../static/css/base.css";
import "../../../static/css/schedule.css";
import "datatables.net-rowreorder-bs5";

In fact, during a test run, I was able to verify that the CSS information was being injected by entering the following command:

debug console on VSCode:

getComputedStyle(staffname_1)._values["box-sizing"]
'border-box' getComputedStyle(staffname_1)._values['display']
'table-cell'
getComputedStyle(staffname_1)._values['box-sizing']
'border-box'
getComputedStyle(staffname_1)._values['width']
'100px'
getComputedStyle(staffname_1)._values['height']
'30px'
getComputedStyle(staffname_1)._values['padding']
'2px 4px 2px 8px'
getComputedStyle(staffname_1)._values['vertical-align']
'middle'
getComputedStyle(staffname_1)._values['text-overflow']
'ellipsis'

Those are from CSS file below :

td[id^="staffname"]
{
    box-sizing: border-box!important;
    width: 100px;
    height: 30px!important;
        /*   top right bottom left  */
    padding: 2px 4px 2px 8px!important;
    vertical-align: middle;
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden;        
}

However, the following results can be confirmed while running Jest, so something is missing.

debug console on VSCode:

staffname.getBoundingClientRect()
{x: 0, y: 0, bottom: 0, height: 0, left: 0, }

The value is entered properly when I do the same in the browser.

debug console on browser:

staffname.getBoundingClientRect(); 
DOMRect { x: 69.93333435058594, y: 363, width: 102.58332824707031, height: 30, top: 363, right: 172.51666259765625, bottom: 393, left: 69.93333435058594 }
bottom: 393
height: 30
left: 69.93333435058594
right: 172.51666259765625
top: 363
width: 102.58332824707031
x: 69.93333435058594
y: 363

After considering it so far, I can't come up with a good idea as to what to do next. I think there is also a lack of knowledge about my DOM technology.
Maybe it's a technical problem unrelated to DataTables, but I would appreciate it if you could give me some advice.

thank you
takeshi sato