How are the modal.js methods supposed to work in a test?
renatoliveira opened this issue · comments
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?
Welcome! 👋
Thank you for posting this issue. 🙇🏼♂️ We will come back to you latest within the next 48h (working days). Stay tuned!
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
Thank you, @joeythomaschaske and @renatoliveira! I have added the test cases for the modal component to the repository.