1

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?

  • Did you get a solution for this? I am facing a similar issue. – Sushant Srivastava Dec 16 '19 at 12:27
0

Your detail should be changed to below:

detail: {
    action: { name: "edit" },
    row: { MoveId: "123" }
  }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.