Pragmatically reorder columns (react-testing-library)

const getTableRows = () => screen.getAllByRole('row');
const getColumnHeaders = () => getTableRows()[0].children;

test('Dragging and dropping column should trigger reorder', () => {
    const count = 3;

    // Set up component props
    const products = generateMockProducts({ count });
    const props = generateGridProps({ products });
    const authorTxt = 'Author';
    const titleTxt = 'Title';
    const publisherTxt = 'Publisher';

    // TestGrid is a wrapper for the Kendo React Grid component
    const { rerender } = render(<TestGrid {...props} />);

    // column elements
    const publisherColumn = screen.getByText(publisherTxt);
    const authorColumn = screen.getByText(authorTxt);

    let counter = 0;
    let headerCols = getColumnHeaders();

    // double check that original order is in place before we drag and drop
    expect(headerCols[1].textContent).toEqual(authorTxt);
    expect(headerCols[2].textContent).toEqual(titleTxt);
    expect(headerCols[5].textContent).toEqual(publisherTxt);

    // mock this function that Kendo React Grid uses to determine focused column
    document.elementFromPoint = jest.fn(() => {
        const el = counter >= 1 ? authorColumn : publisherColumn;
        counter++;

        return el;
    });

    act(() => {
        // Move publisher column before author column
        fireEvent.mouseEnter(publisherColumn);
        fireEvent.mouseOver(publisherColumn);
        fireEvent.mouseMove(publisherColumn);
        fireEvent.mouseDown(publisherColumn);

        fireEvent.mouseMove(authorColumn);

        fireEvent.mouseUp(authorColumn);
    });

    rerender(<TestGrid {...props} />);

    headerCols = getColumnHeaders();

    // verify that publisher was reordered and put before author column
    expect(headerCols[1].textContent).toEqual(publisherTxt);
    expect(headerCols[2].textContent).toEqual(authorTxt);
    expect(headerCols[3].textContent).toEqual(titleTxt);
});
    
    
    
    

const productIdXpathSelector = '//*[text()="ProductID"]';
const productNameXpathSelector = '//*[text()="ProductName"]';

// Reordering 0 to 1
browser
    .useXpath()
    .moveToElement(productIdXpathSelector, 20, 10)
    .mouseButtonDown(productIdXpathSelector)
    .moveToElement(productNameXpathSelector, 20, 10)
    .mouseButtonUp()
    .useCss()
    .elements('css selector', '.k-master-row > td', (elements) => {
        browser.elementIdText(elements.value[0].ELEMENT, (text) => {
            browser.assert.equal(text.value, 'Chai');
        });
        browser.elementIdText(elements.value[1].ELEMENT, (text) => {
            browser.assert.equal(text.value, '1');
        });
        browser.elementIdText(elements.value[2].ELEMENT, (text) => {
            browser.assert.equal(text.value, '18');
        });
    });