1

I want to cover the Jest test for onmouseover event for this .tried with few approrch ,seems like its not working.

<template>
   <div class="consumer-container" if:true={showFlags}>
       <template for:each={flags} for:item="flag">
           <div key={flag.name} class="slds-show_inline-block" onmouseover={handleMouseover}>
<span if:true={flag.hasCounter} data-id={flag.name} class="slds-m-right_xxx-small consumer-quantity">
{flag.quantity}
</span>
</template>
</div>
</template>

Js code:

export default class ConsumerTest extends LightningElement {
    @api flags;
    @api recordId;
    @api objRecordId;
    @api flagNameId;
    @api flagNameParam;
    @api consumerid;

    /**
     * @type {boolean}
     */
    get showFlags() {
        return this.flags && this.flags.length;
    }
    
    handleMouseover(event) {
    if(event.target.getAttribute('data-id'))
        this.flagNameParam=event.target.getAttribute('data-id');
        const flagSection = this.template.querySelectorAll('div.slds-show_inline-block span.consumer-flag-quantity');

        for(var i =0; i< flagSection.length; i++){

            flagSection[i].addEventListener('mouseover', function () {
                this.querySelector('.ModelTooltip').style.display = 'block';
                this.querySelector('.ModelTooltip').style.opacity ='1';
            });

            flagSection[i].addEventListener('mouseout', function () {
                this.querySelector('.ModelTooltip').style.display = 'none';
                this.querySelector('.ModelTooltip').style.opacity ='0';
            });
        }

    }

        }
}

trried with few approach

    it('XXXXXX', () => {
       
           const element = createElement('c-****', {
               is: *****,
           });
           
           element.flags = some JSON here;
    
           document.body.appendChild(element);
           
           let container = element.shadowRoot.querySelector('div.slds-show_inline-block');
Container.dispatchEvent(new CustomEvent('mouseover'));
          
           
// need help to cover "handleMouseover" method by passing the attributes.
           
       });
       
    });

1 Answer 1

1
  1. I'd recommend setting some data attribute to rely on in jest tests to grab exactly what you want versus relying on div/styling. I don't know your flag structure, but I presume it'll have some unique field you can rely on and use from your mocked data set.
  2. I'm not sure if this is everything in your component, but you'll typically want to wait for any asynchronous DOM updates (ex. adding mocked data to the component) which is where promises come into play.
  3. I'll assume it was a typo, but your variable was let container and then you used Container.dispatchEvent() (case-sensitive).

Not a necessity, but (as hinted in #1 above) you can use data- prefix to create more readable identifiers for elements to grab in tests.

<template>
   <div class="consumer-container" if:true={showFlags}>
       <template for:each={flags} for:item="flag">
           <div key={flag.name} class="slds-show_inline-block" data-testid={flag.Id} onmouseover={handleMouseover}>
...

In the test, fire off the custom event off of the specific element and then wait for your async DOM updates to occur to verify.

document.body.appendChild(element);

return Promise.resolve()
    .then(() => {
        let mouseOverEvent = new CustomEvent("mouseover", {
            bubbles: true,
        });
        let container = element.shadowRoot.querySelector('[data-testid="whateverValueItIs"]'); //can also reference your json data instead of hard-coding it
        container.dispatchEvent(mouseOverEvent)
    })
    .then(() => {
        //do your expected checks here for style, etc after the changes from your js in handling the event are reflected
    });

          

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .