How to jest test lightning-pills in LWC

Question

It's the first time I'm using jest tests and I'm trying to test a method that generates lightning pills from a query of groups with access permissions (array). The lightning pills get updated whenever a new group is either added or removed from an array.

I need to test the following scenarios, but I'm not sure if I created the tests correctly:

(these are already properly functioning in actual code).

Test#1: The returned array from query should be displayed as lightning pills

Test#2: Clicking the X icon in a pill should remove the selected pill from array

enter image description here

For Test#1, the jest test fails for a mock array of multiple or single elements. I'm not sure where is the problem, but debugging shows this line is undefined:

 const detailEls = element.shadowRoot.querySelectorAll('lightning-pill');

I'm using return method GroupController.getSpecificGroups:

public with sharing class GroupController {

/* Description: Gets the groups where the contact is being shared to
*
*/
@AuraEnabled
public static List<sObject> getSpecificGroups(String recordId){
    List<GroupShare> groupShareList = new List<GroupShare>();
    List<sObject> returnShareList = new List<sObject>();

    try{
        groupShareList = [SELECT Id, UserOrGroupId, UserOrGroup.Name, ContactId, Contact.Name,
                            FROM GroupShare 
                            WHERE ContactId =: recordId];

        if(groupShareList != NULL && !groupShareList.isEmpty()){
            for(GroupShare csBuff : groupShareList){
                returnShareList.add(csBuff);
            }
        }
    }
    catch(queryException qExcp){
    }
    return returnShareList;
}

}

Jest test is passed when testing if the method successfully passes recordId to the apex method call so I'm thinking there's no problem with method calls.

 it('passes the recordId to the Apex method correctly', () => { const RECORD_ID = '00AAABBBCCCDDD12345'; const APEX_PARAMETERS = { recordId: RECORD_ID }; // Assign mock value for resolved Apex promise getSpecificGroups.mockResolvedValue(APEX_GROUPS_SUCCESS); // Create initial element const element = createElement('c-cmm-specific-group-sharing', { is: Cmm_specificGroupSharing }); element.recordId = RECORD_ID; document.body.appendChild(element); // Select button for executing Apex call const buttonEl = element.shadowRoot.querySelector('lightning-button'); buttonEl.click(); return flushPromises().then(() => { // Validate parameters of mocked Apex call expect(getSpecificGroups.mock.calls[0][0]).toEqual(APEX_PARAMETERS); }); });

For Test#2, jest test for removing pills fail. The pill is not removed from array using dispatchEvent:

 it('handleRemoveSelectedItem works', () => { // Create element const element = createElement('c-cmm-specific-group-sharing', { is: Cmm_specificGroupSharing }); element.availableGroups = APEX_GROUPS_SUCCESS; document.body.appendChild(element); // Remove a selected item const selPills = element.shadowRoot.querySelectorAll('lightning-pill'); selPills[0].dispatchEvent(new CustomEvent('remove')); // Check selection expect(element.availableGroups.length).toBe(0); });

Jest Test

 import { createElement } from 'lwc'; import Cmm_specificGroupSharing from 'c/c-cmm-specific-group-sharing'; import getSpecificGroups from '@salesforce/apex/GroupController.getSpecificGroups'; import delete from "@salesforce/apex/GroupController.delete"; // Mocking Apex method call jest.mock( '@salesforce/apex/GroupController.getSpecificGroups', () => { return { default: jest.fn() }; }, { virtual: true } ); // Sample data for Apex call const APEX_GROUPS_SUCCESS = [ { "Id": "000001112222DDDD001", "UserOrGroupId": "00AAABBBCCCDDD12345", "Name": "Asia Pacific" } ]; describe('c-cmm-specific-group-sharing', () => { afterEach(() => { // The jsdom instance is shared across test cases in a single file so reset the DOM while (document.body.firstChild) { document.body.removeChild(document.body.firstChild); } // Prevent data saved on mocks from leaking between tests jest.clearAllMocks(); }); // Helper function to wait until the microtask queue is empty. This is needed for promise // timing when calling imperative Apex. function flushPromises() { // eslint-disable-next-line no-undef return new Promise(resolve => setImmediate(resolve)); } it('passes the recordId to the Apex method correctly', () => { const RECORD_ID = '00AAABBBCCCDDD12345'; const APEX_PARAMETERS = { recordId: RECORD_ID }; // Assign mock value for resolved Apex promise getSpecificGroups.mockResolvedValue(APEX_GROUPS_SUCCESS); // Create initial element const element = createElement('c-cmm-specific-group-sharing', { is: Cmm_specificGroupSharing }); element.recordId = RECORD_ID; document.body.appendChild(element); // Select button for executing Apex call const buttonEl = element.shadowRoot.querySelector('lightning-button'); buttonEl.click(); return flushPromises().then(() => { // Validate parameters of mocked Apex call expect(getSpecificGroups.mock.calls[0][0]).toEqual(APEX_PARAMETERS); }); }); it('renders one sharing group', () => { // Assign mock value for resolved Apex promise getSpecificGroups.mockResolvedValue(APEX_GROUPS_SUCCESS); // Create initial element const element = createElement('c-cmm-specific-group-sharing', { is: Cmm_specificGroupSharing }); document.body.appendChild(element); // Select button for executing Apex call const buttonEl = element.shadowRoot.querySelector('lightning-button'); buttonEl.click(); return flushPromises().then(() => { const detailEls = element.shadowRoot.querySelectorAll('lightning-pill'); expect(detailEls.length).toBe(APEX_GROUPS_SUCCESS.length); expect(detailEls[0].label).toBe( APEX_GROUPS_SUCCESS[0].Name ); }); }); it('handleRemoveSelectedItem works', () => { // Create element const element = createElement('c-cmm-specific-group-sharing', { is: Cmm_specificGroupSharing }); element.availableGroups = APEX_GROUPS_SUCCESS; document.body.appendChild(element); // Remove a selected item const selPills = element.shadowRoot.querySelectorAll('lightning-pill'); selPills[0].dispatchEvent(new CustomEvent('remove')); // Check selection expect(element.availableGroups.length).toBe(0); }); });

JS and HTML

 import { LightningElement api } from 'lwc'; import getSpecificGroups from '@salesforce/apex/GroupController.getSpecificGroups'; import deleteGroup from "@salesforce/apex/GroupController.deleteGroup"; export default class Cmm_specificGroupSharing extends LightningElement { @api availableGroups; @api get recordId() { return this._recordId; } set recordId(value) { this._recordId = value; } connectedCallback() { this.getSpecificGroups(); } getSpecificGroups() { this.availableGroups =[]; getSpecificGroups({ recordId: this._recordId, }) .then(result => { result.map(gShare => { let obj = { 'Id': gShare.Id, 'UserOrGroupId': gShare.UserOrGroupId, 'Name': gShare.UserOrGroup.Name }; this.availableGroups.push(obj); return null; }) console.log('result' + JSON.stringify(result)); }) .catch((err) => { }); } handleRemoveSelectedItem(event) { const recordId = event.currentTarget.dataset.id; this.availableGroups = this. availableGroups.filter(item => item.id !== recordId); deleteGroup ({ recordId: recordId }) .then(() => { this.notifyUser('', this.deleteSuccessMsg, 'success'); }) .catch((err) => { this.error = err; }); } }

 <template> <template for:each={availableGroups} for:item="groupShare"> <lightning-pill data-id={groupShare.Id} key={groupShare.Id} label={groupShare.Name} onremove={handleRemoveSelectedItem}> </lightning-pill> </template> </template>

I appreciate any help. Thanks!

Answer 1

Please, could you please try in this way?:

it('handleRemoveSelectedItem works', () => {
    // Create element
    const element = createElement('c-cmm-specific-group-sharing', {
        is: Cmm_specificGroupSharing
    });
    element.availableGroups = APEX_GROUPS_SUCCESS;
    document.body.appendChild(element);

    return Promise.resolve()
    .then(() => {
         // Remove a selected item
        let selPills = element.shadowRoot.querySelectorAll('lightning-pill');
        selPills[0].dispatchEvent(new CustomEvent('remove'));
    }) // Move foward
    .then(() => {
        selPills = element.shadowRoot.querySelectorAll('lightning-pill');
        expect(selPills.length).toBe(0);
    });
});