feat: Store selector in Wrapper.find() / .findAll()

[winniehell]

Stores the selector that is passed to Wrapper.find() / Wrapper.findAll() as a property in the newly created Wrapper / WrapperArray instance.

closes #1135

[winniehell]

I believe most of it is done but I'd like to add some more tests here.

[winniehell]

I believe that we could use the component name at least in some cases here. However I'd like to keep that as a follow-up.

[winniehell]

@eddyerburgh Can you please take a look?

[eddyerburgh]

Thanks, look great. Before we merge can you update the type definition for Wrapper?

[winniehell]

Before we merge can you update the type definition for Wrapper?

@eddyerburgh I'm sorry, I'm not completely sure what you mean by that. 😓

The flow definition has already been updated: https://github.com/vuejs/vue-test-utils/pull/1248/files#diff-dff4d7307e5e694d79396aacecd4399e

Do I need to update anything else, too?

[winniehell]

ah, I think I found what you were referring to: https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/types/index.d.ts

I will update that file in a bit. 👍

[ghost]

@eddyerburgh Can you please take another look here?

[winniehell]

@eddyerburgh Any chance to get this merged?

[eddyerburgh]

This isn't actually a Selector type, it's an object with a value and type: https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/src/get-selector.js#L38

Because the library isn't written in TS, we have tests (https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/types/test/wrapper.ts) that access and set the wrapper options using the types. Can you write a test that accesses selector.value and selector.type and update this types file.

[winniehell]

This isn't actually a Selector type

@eddyerburgh Thank you for catching this! 👍

It actually is of type Selector for the ErrorWrapper:

vue-test-utils/packages/test-utils/src/error-wrapper.js

Line 22 in 70ac83a

this.selector = selector

I will update the other places to use rawSelector (which is of type Selector), too, because that prevents us from defining a new type and consumers of the API don't need to do selector.value to get the selector they provided in the first place.

we have tests (https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/types/test/wrapper.ts)

Sure, I can add tests there! 👍

Right now I'm a little confused by the structure of that file though because it has neither test cases in the usual style (no it('something happens', () => { ... }) / test(...) blocks) nor assertions (only implicit ones). Could you provide me with an example of how such a test would look like?

[winniehell]

It actually is of type Selector for the ErrorWrapper:

Ah, it turns out this was wrong actually—but the Selector type is currently any:

vue-test-utils/flow/wrapper.flow.js

Line 6 in 70ac83a

declare type Selector = any

I will adjust the places that create ErrorWrapper instances to use the rawSelector as well then.

[eddyerburgh]

Sure, the test script just compiles the file to make sure there aren't any compiler errors when using the Vue Test Utils API, caused by incorrect typing.

A test would look something like this:

let s: string = wrapper.selector.value

[winniehell]

Thanks! 🙇‍♂️ I'll add the tests and ping you again once they are ready.

[winniehell]

@eddyerburgh I have updated all places to output the rawSelector (that is passed to find / findAll), added some TypeScript tests, and CI is still green. 🍏 🎉

Can you please have another look at this?

[winniehell]

@eddyerburgh Please let me know if there is anything I can do to get this finished. I would love to work on the other contributions that depend on this.

[JessicaSachs]

Hi @winniehell thank you for the great work! Hoping to get this merged shortly.

[afontcu]

Nice addition! Looks like the PR has some conflicts with master, would you have the time to fix them?

Thanks for your patience! Hopefully we will land this soon :)

[winniehell]

@afontcu done ✔️

[vue-bot]

Hey @winniehell, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚

[winniehell]

Thank you @JessicaSachs! 🙇‍♂️