1

I've created a lwc component that shows radio button. On Selecting the button, I call handleChange method as shown below.

<template>
        <lightning-radio-group name="radioGroup"
                            label={label}
                            options={options}
                            value={value}
                            type="radio"
                            onchange={handleChange}>
        </lightning-radio-group>
</template>

handleChange(event) {
        this._selectedData = event.detail.value;
        const attributeChangeEvent = new FlowAttributeChangeEvent('selectedData', this._selectedData);
        this.dispatchEvent(attributeChangeEvent);
    }

I want to assert that the event flowAttributeChangeEvent is dispatched but I am not able to do so. Here is my test

import { createElement } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

const element = createElementdata();
            const handler = jest.fn();
            element.addEventListener(FlowAttributeChangeEvent, handler);

            return flushPromises().then(() => {
                
                let radioGrp= element.shadowRoot.querySelector('lightning-radio-group');
                const event = new CustomEvent("change", {detail:{value: 'a0s0912031029201'}});
                radioGrp.dispatchEvent(event);
                
            }).then(() =>{
                expect(element.selectedData).toBe('a0s0912031029201');
                expect(handler).toHaveBeenCalled();
            });

The last expect statement fails giving me JestAssertionError. So, how can i assert that the flowAttributeChangeEvent is dispatched ?

1 Answer 1

2

You can directly mock the event using the below

 element.addEventListener(‘lightning__flowattributechange’, handler)

Update

You can also use the moduleMapper of jest configuration to make sure event fires.

Create a folder jest-mocks/lightning in root directory.

Add the below code to a file named flowSupport.js create in path jest-mocks/lightning

The code is shown for flowSupport.js is as below

export const FlowAttributeChangeEventName = 'lightning__flowattributechange';

export class FlowAttributeChangeEvent extends CustomEvent {
 constructor(attributeName, attributeValue) {
    super(FlowAttributeChangeEventName, {
        composed: true,
        cancelable: true,
        bubbles: true,
        detail: {
            attributeName,
            attributeValue
        }
    });
  }
}

Also to make sure this is available create a jest.config.js in the root of the project folder

const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
module.exports = {
  ...jestConfig,
   moduleNameMapper: {
    '^lightning/flowSupport$': '<rootDir>/jest-mocks/lightning/flowSupport'
   }
 };

And make sure you add the below to your jest file

import { FlowAttributeChangeEventName } from 'lightning/flowSupport';

Dispatch the event as shown below

const mockEventHandler = jest.fn();
        element.addEventListener(
            FlowAttributeChangeEventName,
            mockEventHandler
        );
3
  • That is still throwing the same error. I think the flow attribute event is not dispatched in test becaue when I do expect(handler).not.toHaveBeenCalled(); then the test passes.
    – lambad
    Commented Sep 3, 2020 at 15:37
  • Can you add some more code that one can easily reproduce it? Specifically what you do with flushPromises() and also createElement()? Commented Sep 3, 2020 at 16:24
  • Thanks, answer update helped.
    – lambad
    Commented Sep 5, 2020 at 2:16

You must log in to answer this question.

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