Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to trigger custom event #1239

Closed
gkatsanos opened this issue May 21, 2019 · 5 comments
Closed

Unable to trigger custom event #1239

gkatsanos opened this issue May 21, 2019 · 5 comments

Comments

@gkatsanos
Copy link

gkatsanos commented May 21, 2019

Version

1.0.0-beta.29

Reproduction link

http://no-link
pasting code instead:

      <div class="journeys-dropdown-container">
        <tc-dropdown
          data-qe-id="journeys-dropdown"
          :mode="'select'"
          :options="dropdownElements"
          :placeholder-label="placeholderLabel"
          :theme="dropdownTheme"
          @input="changeTemplate">
        </tc-dropdown>
      </div>
  it('should change the charts when we select another template', async () => {
    const input = wrapper.find({ name: 'dropdown' });
    input.trigger('input', [122588]); // tried this
    wrapper.vm.$emit('input', 122588); // tried this as well
    await wrapper.vm.$nextTick();
    console.log(wrapper.vm);
    expect(wrapper.findAll('.box').length, 'boxes').to.equal(4);
  });

Steps to reproduce

I used .trigger to trigger an 'input' event for a custom child component I am testing. I need to pass a payload with an array of integers. (or just one integer). Do I use .trigger or wrapper.vm.$emit ? How can I debug this?

What is expected?

I used .trigger to trigger an 'input' event for a custom child component I am testing. I need to pass a payload with an array of integers. (or just one integer). Do I use .trigger or wrapper.vm.$emit ? How can I debug this?

What is actually happening?

The event isnt triggered correctly

other comments

The discord help channel is practically deserted. We beg for some help, I've been using vue-test-utils for 2 years, still in beta, and help is really scarce..

@ghost
Copy link

ghost commented Jun 27, 2019

older issue on the topic: #145

@runarberg
Copy link

I managed to bypass this limitation by passing the event through in a stub:

<!-- "open" is a custom event triggered by watching -->
<!-- the `open` attribute on the wrapped dialog. -->
<DialogWrapper @open="doStuff" />
it('does stuff when dialog is opened', () => {
  const wrapper shallowMount(MyComponent, {
    stubs: {
      DialogWrapper: `<dialog @open="$emit('open')" />`,
    },
  });

  wrapper.trigger('open');

  // Assuming we have all spies set up.
  expect(wrapper.vm.doStuff).toHaveBeenCalled();
});

Note the stubs wrapper option. Just set it to any html tag and make sure it passes on which ever event you are testing:

<div @myEvent="$emit('myEvent')">

@dobromir-hristov
Copy link
Contributor

Hey, I am sorry but from what I see, this should work? @lmiller1990 @JessicaSachs am I missing something here? Trigger works both on custom and native events.

@lmiller1990
Copy link
Member

const input = wrapper.find({ name: 'dropdown' });
input.trigger('input', [122588]).vm.$emit; // this?

Should you be doing emit on the input you found?

Also join https://vue.land/ it is very active! There is a #testing channel.

@Stoom
Copy link
Contributor

Stoom commented Mar 25, 2020

I've also had this issue. This, however, has worked for me

const input = wrapper.find('something-stub');
input.vm.$emit('foobar');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants