How are the modal.js methods supposed to work in a test?

[renatoliveira]

If I write a custom component that implements the new Modal component, how can I test its contents actually? For example, if I need to access a certain attribute within the lightning-modal-body tags, I'm assuming the modal.js's modalBody$ function would be used.

Is it supposed to work as calling it from the test like this?

const modalBody = element.shadowRoot.querySelector("lightning-modal-body");
expect(modalBody).toBeTruthy(); // ok

return Promise.resolve().then(() => {
    const grid = element.modalBody$("lightning-tree-grid");
    expect(grid).toBeTruthy(); // errors
});

Considering that the component is implemented like this:

<template>
  <lightning-modal-header label={header}></lightning-modal-header>
  <lightning-modal-body>
    <template if:true={bookingItemsLoaded}>
      <!-- sldsValidatorIgnoreNextLine -->
      <lightning-tree-grid key-field="id" columns={columns} data={lineItems}>
      </lightning-tree-grid>
    </template>
  </lightning-modal-body>
  <lightning-modal-footer>
    <lightning-button
      label={labels.Cancel}
      onclick={handleCancel}
      data-id="cancel"
      class="slds-var-m-around_xxx-small"
      ><label>{labels.Cancel}</label></lightning-button
    >
  </lightning-modal-footer>
</template>

If not, then how am I supposed to assert that the contents within the modal's body are correct?

[github-actions]

Welcome! 👋

Thank you for posting this issue. 🙇🏼‍♂️ We will come back to you latest within the next 48h (working days). Stay tuned!

[joeythomaschaske]

Any update on this? As more users adopt this, they're going to run into this issue

I created a workaround/solution https://salesforce.stackexchange.com/a/389583/17894

[satyasekharcvb]

Thank you, @joeythomaschaske and @renatoliveira! I have added the test cases for the modal component to the repository.