CODEWITHSUNDEEP
unit-testingsortingangularclickkeyboard-events
PieterSchool
PieterSchool

Reputation: 509

Angular2 unit test Click() with keypress

I am trying to test a sorting function for a table. The table enables sorting on a primaray and secondary value. The secondary sorting value is set by holding down the shift key.

Code for setting the sort order:

private sortClick(event: any, column: DataGridColumn): void {
    if (!column.sortable) {
        return;
    }

    if (event.shiftKey) { // When the shift key is pressed, secondary sorting is being set.
        if (column.headerText === this.primarySorting.headerText) {
            return;
        }
        this.secondarySortingColumn.setSortingProperty(column.headerText, column.name);
    } else {
        this.primarySorting.setSortingProperty(column.headerText, column.name);
        this.secondarySortingColumn.clear();
    }

    this.sortData(this);
}

Now I'm writing the unit testst for the function. The primary sorting is done using the following:

    let firstColumn: NodeListOf<HTMLElement> = <NodeListOf<HTMLElement>>compiled.querySelectorAll("#header0");
    firstColumn.item(0).click();

How can I call the .click() function with shift key pressed in the unit test

Upvotes: 0

Views: 712

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14221

You can use the dispaatchEvent method to invoke the click event and supply other event information as follows:

var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'shiftKey': true
});

let firstColumn: NodeListOf<HTMLElement> = <NodeListOf<HTMLElement>>compiled.querySelectorAll("#header0");
firstColumn.item(0).dispatchEvent(event);

Note the shiftKey member is set to true in the mouseEventInit dictionary parameter to the MouseEvent constructor which allows us to specify that the shiftKey is pressed.

Upvotes: 2

Related Questions