Add support for getting prop, classes and attributes by key

[willsoto]

Matches a similar interface from Enzyme:

• http://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html
• http://airbnb.io/enzyme/docs/api/ShallowWrapper/hasClass.html

Just a tiny bit of syntactic sugar to make getting a particular prop easier.

NB: I didn't see an issue for this when I looked, but will be happy to make one if it's necessary.

[eddyerburgh]

Thanks for this, I've been intending to add it for a while! Could you also update classes, and attributes in this PR to follow this pattern? I'd like to keep the APIs in sync.

[willsoto]

Sure! attributes seems pretty obvious. For classes the return value is string[], so do you prefer indexOf or find or something else?

[eddyerburgh]

Great :)

indexOf, because Array.prototype.find isn't supported by IE or phantom JS

[willsoto]

@eddyerburgh and what should the return value for classes be, boolean? Would it behave more like hasClass?

[willsoto]

@eddyerburgh I assumed classes('name') should return a boolean. If not, it's easy enough to change 😄

I successfully used function overloading for the .d.ts file, but I am not familiar enough with Flow to know if I did the types there correctly. As a result, I ended up having to alter some functions that utilized attributes() in order to satisfy the type checker. Ideally, I'd just function overload there as well and not have to rewrite any code, so looking for suggestions on that.

Thanks!

[eddyerburgh]

I think we should just move the assertion to the above example, no need to duplicate the set up.

eg:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'	 import Foo from './Foo.vue'
 	 
const wrapper = mount(Foo)	const wrapper = mount(Foo)
expect(wrapper.attributes().id).toBe('foo')
expect(wrapper.attributes('id')).toBe('foo')

[eddyerburgh]

Same for the rest of the docs pages

[eddyerburgh]

Why the name change? Can you replace it with c rather than klass

[willsoto]

className ended up shadowing the argument name so I ended up changing it here since it isn't user facing. I am not sure you can use class since it is a reserved word. How about name?

[eddyerburgh]

Was this to fix flow errors? If so you can just add // $FlowIgnore above the original line. We know it's never going to return a string, so there's no need to guard against it.

We're actually going to replace flow with TypeScript soon, which would fix this issue. It's better to add flow ignores now rather than add extra code to satisfy flow.

[willsoto]

@eddyerburgh Thanks for the feedback. It should all be addressed.

[eddyerburgh]

Sorry there was another comment that I thought I'd added—can you add an arguments section to the docs, like find—https://vue-test-utils.vuejs.org/api/wrapper/find.html?

[willsoto]

@eddyerburgh done and rebased 😄

[eddyerburgh]

Thanks for this :)