DevExtreme jQuery/JS - Components Testing

View on GitHub

Unit Testing

Unit testing allows you to test single features (units of the code). A unit can be a function or class.

The example below illustrates how to create a unit test for the DataGrid UI component.

Create a HTML file and add your markup to it. The markup also loads the jQuery, QUnit, and DevExtreme libraries from CDN.

HTML
<meta charset="utf-8" />
<title>Test DataGrid</title>
<head>
<script src="https://code.jquery.com/qunit/qunit-2.16.0.js"></script>
<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/js/dx.all.js"></script>
<link
    rel="stylesheet"
    href="https://code.jquery.com/qunit/qunit-2.16.0.css"
/>
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/css/dx.light.css"
    rel="stylesheet"
/>
</head>
<body>
<div id="dataGrid"></div>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>

Add the following script to test the DataGrid configuration and the number of loaded records:

JavaScript
<script>
let createDataGrid = (options, $container) => {
    const dataGridElement = ($container || $("#dataGrid")).dxDataGrid(options);
    QUnit.assert.ok(dataGridElement);
    const dataGrid = dataGridElement.dxDataGrid("instance");
    return dataGrid;
};

QUnit.module("DataGrid", function () {
    QUnit.test("DataGrid is initialized and displays data", function (assert) {
    // act
    const dataGrid = createDataGrid({
        dataSource: {
        pageSize: 3,
        store: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
        },
    });

    // assert
    assert.equal($("#dataGrid").find(".dx-data-row").length, 3);
    });
});
</script>

Open the test file in a browser to see the test report. If the test file contains multiple tests, you can filter the results or re-run specific tests.

Integration Testing

Integration testing helps test a component across multiple units. Integration testing does not test unit by unit, but tests all the units as an entity.

The example below illustrates how to test the DataGrid's functionality. The test code adds a new row, saves it, and checks the results.

To get started with QUnit in your browser, create an HTML file as described in the Unit Testing article and reference the SinonJS script.

HTML
<!-- This script allows you to simulate timers. -->
<script src="https://cdn.jsdelivr.net/npm/sinon@9/pkg/sinon.js"></script>

Add the test code. This code creates the DataGrid and calls the addRow and saveEditData methods to create a new row. Timers allow you to call methods continually since all the processes are asynchronous. The final step is to check whether the DataGrid has two visible rows — an initial row and a newly created row.

JavaScript
<script>
let clock;
let createDataGrid = (options, $container) => {
    const dataGridElement = ($container || $("#dataGrid")).dxDataGrid(options);
    QUnit.assert.ok(dataGridElement, "DataGrid created");
    const dataGrid = dataGridElement.dxDataGrid("instance");
    return dataGrid;
};
QUnit.module("DataGrid", {
    beforeEach: function() {
        clock = sinon.useFakeTimers();
    },
    afterEach: function() {
        clock.restore();
    }
}, () => {
    QUnit.test('Add a row in batch edit mode', function(assert) {
        const array = [{ id: 1, name: 'Test 1' }];

        const dataGrid = createDataGrid({
            editing: {
                mode: 'batch'
            },
            dataSource: {
                key: 'id',
                load: function() {
                    return array;
                },
                insert: function(values) {
                    array.push(values);
                }
            }
        });
        clock.tick(100);

        // Add a row
        dataGrid.addRow();

        clock.tick(100);

        dataGrid.saveEditData();

        clock.tick(200);

        // Check assertion
        assert.strictEqual(dataGrid.getVisibleRows().length, 2, 'visible rows: 2');
        assert.strictEqual(dataGrid.hasEditData(), false, 'DataGrid has no edit data');
    });
});
</script>

Open the test.html file in your browser to see the detailed report of the test and its result.

End-to-End Testing

End-to-End (Functional) testing ignores the component's internal structure and allows you to verify how DevExtreme components work from a user's point of view.

The example below illustrates how to create an End-to-End test for the DataGrid's functionality. The test code emulates a click on the pager.

Create an HTML file and add your markup to it:

HTML
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Test DataGrid</title>
<head>
<script src="https://code.jquery.com/qunit/qunit-2.16.0.js"></script>
<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/sinon@9/pkg/sinon.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/js/dx.all.js"></script>
<link
    rel="stylesheet"
    href="https://code.jquery.com/qunit/qunit-2.16.0.css"
/>
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/css/dx.light.css"
    rel="stylesheet"
/>
</head>
<body>
<div id="dataGrid"></div>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>

Add the following script to your test file. This code finds the specified link on the pager and clicks it. A click on the pager triggers the dxclick event. The test checks whether the result page index is the same as the expected page index.

JavaScript
<script>
let clock;
const testElement = $('#dataGrid');

let createDataGrid = (options, $container) => {
    const dataGridElement = ($container || $("#dataGrid")).dxDataGrid(options);
    QUnit.assert.ok(dataGridElement, "DataGrid created");
    const dataGrid = dataGridElement.dxDataGrid("instance");
    return dataGrid;
};

QUnit.module("DataGrid", {
    beforeEach: function() {
        clock = sinon.useFakeTimers();
    },
    afterEach: function() {
        clock.restore();
    }
}, () => {
    QUnit.test('dxPager changes a page index', function(assert) {

        const array = [];
        for (let i = 0; i < 100; i++) {
        array.push({id: i, test: 'test ' + i})
        }

        const dataGrid = createDataGrid({
            dataSource: {
                key: 'id',
                load: function() {
                    return array;
                }
            },
            pager: {
                enabled: true,
                visible: true,
                allowedPageSizes: [5, 10],
                showPageSizeSelector: true
            },
            paging: {
                enabled: true,
                pageSize: 10
            }
        });

        clock.tick(100);

        $(testElement.find('.dx-page')[5]).trigger('dxclick');

        clock.tick(300);

        assert.equal(dataGrid.pageIndex(), 5, 'page index');
    });
});
</script>