mardi 9 février 2021

Vue test utils how to change select value with v-model

Hello I would like to check what happens after changing the value of select inside of the test.I'm using vue-test-utils. Currently I'm unable to check if the select emitted the input event. I'm using Buefy select component if that matters.

The html part of component

<b-select
  v-model="workHoursType"
>
  <option :value="WORKING_HOURS_PERIOD.daily"></option>
  <option :value="WORKING_HOURS_PERIOD.weekly"></option>
</b-select>

Test, which is failing due to undefined is emitted

it("once working hours type is set to daily, the hours per week should have no value", async () => {
    const wrapper = createWrapper();

    const options = wrapper.find("select").findAll("option");
    await options.at(1).setSelected();

    await flushPromises();

    expect(wrapper.emitted().input).toBeDefined();
  });

I've seen also different approach for v-model based components however it still doesnt work for me.

it("with v-model", async () => {
    const wrapper = createWrapper();

    const select = wrapper.find("select");
    const option = wrapper.findAll("option").at(0);
    option.element.selected = true;
    select.trigger("change");

    await flushPromises();

    expect(wrapper.emitted().input).toBeDefined();
  });

Aucun commentaire:

Enregistrer un commentaire