Trying to write a test case for HvDropdown onChange event but getting error.

[nikhilguptagl]

Hi, Below is the set of code I am using for HvDropdown -

<HvDropdown
    data-testid="dropdown"
    className="search-input"
    values={eventValues}
    onChange={(e) => getEventNotification((e as HvListValue)?.label)}
 />
 
 and 
 
   const getEventNotification = (eventLabel: ReactNode) => {
    setSelectedEvent(eventLabel);
  };

I am trying to write a test case for the above onChange handler -

    const setSelectedEvent = vi.fn();

    vitest
      .spyOn(React, 'useState')
      .mockReturnValue(['New_Ingested_Data_Available', setSelectedEvent]);

    const { getByTestId } = render(<Notifications />);

    const dropdown = getByTestId('dropdown');
    fireEvent(
      dropdown,
      new CustomEvent('change', { detail: { label: 'Curated_Content' } }),
    );
    expect(setSelectedEvent).toHaveBeenCalledWith('Curated_Content');
  });```

But this is giving me an error and while running the test case, it is not going inside getEventNotification  method. Can anyone help me here.

[zettca]

Hello @nikhilguptagl

• It seems like you're testing implementation details, which you shouldn't be doing. Instead, assert that the UI changed as expected, or that a prop (eg onChange) was called.
  • getEventNotification /setSelectedEvent is most likely leading to an assertable UI change or callback being called
• Also, you should prefer the a11y queries like byRole instead of testing by id. Take a look at this article for some more best-practices.

Please take a look at our Dropdown or Select tests for reference, as it addresses both points mentioned above

If you bump into other issues, feel free to open an issue, or re-open/reply to this discussion - whatever is most appropriate