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

Return nextTick Promise from wrapper interactions #1515

Closed
tbuteler opened this issue Apr 24, 2020 · 2 comments
Closed

Return nextTick Promise from wrapper interactions #1515

tbuteler opened this issue Apr 24, 2020 · 2 comments

Comments

@tbuteler
Copy link

@tbuteler tbuteler commented Apr 24, 2020

What problem does this feature solve?

We recently updated our Vue test suite to beta 33 from beta 29, and a lot of our tests broke because we were expecting many DOM changes to take effect immediately, when now they happen after nextTick. This is fine: it's well documented and mimics how a component behaves in "real life", so no problems there.

We had to pepper our tests with a lot of await wrapper.vm.$nextTick, and figured we might be able to drop a few lines if we can have the interactions with our wrapper objects return a promise instead of the tests having to create and await them. Normally we would call it after each setData, setProps or trigger call to the wrapper, but I'm sure there are other methods that could benefit from it as well.

Maybe this is not too disruptive, since those methods currently return void, so I'm guessing most workflows would be unaffected. It would just offer an alternative to those who prefer a shorter syntax.

The Vue function is already imported in test-utils/src/wrapper.js, so I ran a quick test and this worked fine:

/**
 * Dispatches a DOM event on wrapper
 */
trigger(type: string, options: Object = {}) {
  // ...

  const event = createDOMEvent(type, options)
  this.element.dispatchEvent(event)

  return Vue.nextTick()
}

What does the proposed API look like?

Taking the example listed in the current documentations for using nextTick:

// Before (would still work as is)
it('button click should increment the count text', async () => {
  expect(wrapper.text()).toContain('0')
  const button = wrapper.find('button')
  button.trigger('click')
  await wrapper.vm.$nextTick()
  expect(wrapper.text()).toContain('1')
})
// After
it('button click should increment the count text', async () => {
  expect(wrapper.text()).toContain('0')
  const button = wrapper.find('button')
  await button.trigger('click')
  expect(wrapper.text()).toContain('1')
})

Doesn't seem like much of a trim, but in our case at least it adds up to quite a few lines.

I'd love to know what you guys think, and thanks for your effort on this library.

@dobromir-hristov
Copy link
Collaborator

@dobromir-hristov dobromir-hristov commented Apr 24, 2020

Hey, it's in the pipeline for V1. We will probably ship it very soon.

@tbuteler
Copy link
Author

@tbuteler tbuteler commented Apr 25, 2020

That's great to hear, thanks for letting me know! Looking forward to it.

lmiller1990 added a commit that referenced this issue Apr 27, 2020
* feat: return promise from set methods

* fix: fix error types for error wrapper

* refactor: change promise assertion method

* docs: mention that some methods can be awaited

Generally improve async docs

* fix: fix TS types

* fix: fix nextTick for vue < 2.1

* docs: fix eslint error

* chore: revert dist

* chore: revert committed dist files

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment