Give ability to customise Wrapper and/or WrapperArray

[davidlandais]

What problem does this feature solve?

I would like to propose you to give the ability to developers to register custom commands like wrapper.findElementWithTestIdAttribute().isVisible() or wrapper.findVueAndEmit(selector, ['event', ...args]). This is my needs, that i work around with some helpers. This is for example, a feature shipped with Cypress. What do you think ? Does it sound a good idea ?

What does the proposed API look like?

The API doesn't seems to propose this feature.

[winniehell]

In #1245 (comment), @souldzin suggested using an EventEmitter to hook into Wrapper creation. A Vue instance as event hub (described here) would serve the same purpose.

We could then do the following:

import { events } from '@vue/test-utils';

events.$on('wrapper-created', newWrapper => {
  Object.assign(newWrapper. {
    findElementWithTestIdAttribute() {
      // ...
    },

    isVisible() {
      // ...
    },

    findVueAndEmit() {
      // ...
    },
  });
});

or alternatively:

import { Wrapper } from '@vue/test-utils';

Wrapper.events.$on('created', newWrapper => {
  // ...
});

@eddyerburgh What do you think?

[winniehell]

@eddyerburgh If the above approach makes sense to you, I would be happy to come up with a pull request to unblock #1236.

[winniehell]

@JessicaSachs Can you please take a look at this?

[JessicaSachs]

@winniehell for back and forth convo can you find me on Vue Land discord? It’s easier to chat there.

[winniehell]

@JessicaSachs I didn't have the impression that there was much back and forth yet and also would like to have the result documented here. 😅 But sure, we can explore the different options on discord first. 👍

[JessicaSachs]

Agreed and agreed, but I want to talk it over with you and then we will report back to GH so that other maintainers can weigh in.

…

On Wed, Dec 18, 2019 at 4:39 PM Winnie ***@***.***> wrote: @JessicaSachs <https://github.com/JessicaSachs> I didn't have the impression that there was much back and forth yet and also would like to have the result documented here. 😅 But sure, we can explore the different options on discord first. 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1224?email_source=notifications&email_token=AAVL4BBHTUZKZ2NLIGELTDTQZKKC7A5CNFSM4HJ4JOWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHHSVAI#issuecomment-567224961>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVL4BCX4SLGWF7XP2KNQDLQZKKC7ANCNFSM4HJ4JOWA> .

[JessicaSachs]

Implementing this feature request would make it easier to fix a bug (#1236) by way of an existing PR (#1245) that wants to depend on this new feature.

@winniehell and I will look into ways of solving #1236 without depending on this feature request.

[davidlandais]

Ok but the main idea is to share those "commands" between wrappers. For example, if I have a login-view.spec.js and a register-view.spec.js files which are both using a form. For example, I would like to fill form with ease. I could make a "command" calledfillForm which could find X inputs and setValue to each one. like loginViewWrapper.fillForm('#login', { email: 'j.doe@unkown.lost' }). Do you think we could share this kind of "helpers" between spec files easily ? Regarding your ideas, the "setupFilesAfterEnv" Jest config could be a good place. What do you think ?

[JessicaSachs]

@davidlandais Right now the API is frozen because we’re trying to get v1 out so we’re only doing bug fixes. I didn’t mean anything about the feature request by saying we weren’t going to pick it up right now.