You need to sign in to do that
Don't have an account?
Kyle Havelka
Lightning web component unit testing. Issue with testing row action event
Hi All,
Firstly, I wanted to indicate that I have poured over the LWC Recipes repo to find this, and I can't.
I am trying to get test coverage on a Lightning Web Component. The component has two Sub components. One is a custom component the other is a base lightning-datatable. My component ties into the data table's onrowaction event using a handler called handleRowAction (see below).
To do this, I am using a dispatching a custom event on the lightning datatable element, in the detail I am putting in the action type so that it will be handed off to the handleEditMoveClicked function (see below).
Firstly, I wanted to indicate that I have poured over the LWC Recipes repo to find this, and I can't.
I am trying to get test coverage on a Lightning Web Component. The component has two Sub components. One is a custom component the other is a base lightning-datatable. My component ties into the data table's onrowaction event using a handler called handleRowAction (see below).
<template> <c-move-management-form action={moveAction} goal-type-id={selectedMoveGoalTypeId} goal-id={selectedMoveGoalId} move={selectedMove} onmoveformclosed={handleMoveFormClosed} onmovesaved={handleMoveChangeCommitted} record-id={selectedMoveId} show={displayRecordManager} > </c-move-management-form> <lightning-datatable key-field="MoveId" data={data} columns={columns} onrowaction={handleRowAction} > </lightning-datatable> </template>The handler uses a switch statement to determine the action type, which is just edit for now. Based upon the action it calls antoher function (hanlder and helper function below) to do something (in the case of edit, it will show a custom modal form).
handleRowAction(event) { const actionName = event.detail.action.name; var row = event.detail.row; switch (actionName) { case "edit": this.handleEditMoveClicked(row); break; default: break; } } handleEditMoveClicked(row) { if (row) { this.selectedMoveId = row.MoveId; this.selectedMove = row; this.displayRecordManager = true; } }In my test class, I am trying to hit the handleRowAction(event) function, which will ultimately call the handleEditMoveClicked(row) function.
To do this, I am using a dispatching a custom event on the lightning datatable element, in the detail I am putting in the action type so that it will be handed off to the handleEditMoveClicked function (see below).
it("displays c-move-management-form when rowaction edit event raised", () => { const rowActionEvent = new CustomEvent("rowaction", { detail: { action: { name: "edit" } } }); const element = createElement("c-contact-record-detail-embed", { is: ContactRecordDetailEmbed }); document.body.appendChild(element); const dataTable = element.shadowRoot.querySelector("lightning-datatable"); dataTable.dispatchEvent(rowActionEvent); });This does sucessfully call the handleRowAction method, but it will obviously not be properly handled by the handleEditMoveClicked because the row is undefined. I tried to add the row informaiton to the event, but then the handleRowAction method is never called (example test code below new code highlighted for clarity).
it("displays c-move-management-form when rowaction edit event raised", () => { const rowActionEvent = new CustomEvent("rowaction", { detail: { action: { name: "edit" }, row: { MoveId: "123" } } }); const element = createElement("c-contact-record-detail-embed", { is: ContactRecordDetailEmbed }); document.body.appendChild(element); const dataTable = element.shadowRoot.querySelector("lightning-datatable"); dataTable.dispatchEvent(rowActionEvent); });What am I doing wrong? Does anyone have experience with something like this?