How to trigger Dropdown change in test

[wisdom-17]

Hi all,

I am writing a test for a component that has the Primevue Dropdown. I am trying to write a test to determine if an event has emitted when a value is selected in the dropdown.

I am using Vitest (0.23.0) and Vue/Test Utils (2.0.2).

I have the following so far:

Code: Select all

  it('emits selectedDay event when day is selected', () => {
    const wrapper = mount(DayAndTimePicker, {
      props: {},
      global: {
        plugins: [PrimeVue, ConfirmationService, DialogService, ToastService],
      },
    })

    // find the dropdown and click on the dropdown so that the options appear
    const openDropdown = wrapper.find('.p-dropdown-label')
    await openDropdown.trigger('click')
    
    // from this point onwards, I am trying to find any of the options in the DOM and click on them but can't seem to find them
    const dropdownOption = wrapper.get('.p-dropdown-item')

    expect(wrapper.emitted()).toHaveProperty('selectedDay')
  })

I can't seem to find the .p-dropdown-item element in the DOM wrapper of my test. On closer inspection of the HTML it appears that the HML for the options list appears outside of the component that my test is for so theres no way I can't access it in my test?

Appreciate any guidance on the matter