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

$attrs and inheritAttrs #87

Open
lancetharper opened this issue Jul 17, 2017 · 3 comments
Open

$attrs and inheritAttrs #87

lancetharper opened this issue Jul 17, 2017 · 3 comments

Comments

@lancetharper
Copy link

lancetharper commented Jul 17, 2017

With Vue 2.4 inheritAttrs has been added and I'm trying to figure out how to get tests to make sure that it works correctly. Here is a simple example of what I'm trying to do:

Component template:

<template>
  <div>
    <label :for="inputId" ref="label">{{label}}</label>
    <input type="text" 
        v-bind="$attrs"
        :id="inputId"
        :value="lazyValue"
        ref="input">
  </div>
</template>

Great, now attributes not listed as props go to the input as expected when I use it.

Is there any way to actually add other attributes in the mount function to test it? That way if v-bind="$attrs" somehow gets messed up the tests will fail so we know about it.

const wrapper = mount(inputComp, {
  propsData: {
    label: 'Label Test',
    id: 'input1',
    name: 'inputName', // doesn't work here
  },
  attrs{} // something like this?
});

// Can I set it like this somehow?
wrapper.vm.$attrs.name = 'inputName';

Any help would be appreciated

@eddyerburgh
Copy link
Owner

I've added this in 2.5.0

You can make attr available on the vm using the attrs option.

const wrapper = mount(inputComp, {
  attrs: {
    anAttribute: 'some value'
  }
})

Can you post a component and a test so I can see how you're using it?

@lancetharper
Copy link
Author

Seems to be mostly working. It would be nice if it worked like the domProps and attrs in the render function data object. But I don't know how hard/possible that is for you.

Here is the component I'm working on:
https://github.com/rei/rei-cedar/blob/feature/vue-update/src/components/input/cdrInput.vue

Here are the tests for it so far: (some aren't working still)
https://github.com/rei/rei-cedar/blob/feature/vue-update/src/components/input/__tests__/cdrInput.spec.js

@eddyerburgh
Copy link
Owner

Ah, yes that's a good point. Right now I'm just adding it on to the vm directly before mounting.

I'll add it for you at some point over the next few days 😄

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

No branches or pull requests

2 participants