Lightning web component unit testing. Issue with testing row action event

Question

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).

it("displays c-move-management-form when rowaction edit event raised", () => {
    const rowActionEvent = new CustomEvent("rowaction", {
      detail: {
        action: { name: "edit" },
        <u><b>row: { MoveId: "123" }</b></u>
      }
    });

    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?

Answer 1

Your detail should be changed to below:

detail: {
    action: { name: "edit" },
    row: { MoveId: "123" }
  }