Attr inheritance and InheritAttrs/InheritListeners

[Austio]

👋 Edd

I was writing some specs on a component that uses the inheritAttrs option. While looking at that I noticed that none of the extra props I was passing to components were not being added as attributes on the component.

I dug a little deeper in the source and it appears the issue is that this occurs before the $mount function.

Please let me know what you think, have an example and some links below. Thanks!

// Example

<template>
  <button
    @click.prevent='handleClick'
  >
    <slot></slot>
  </button>
</template>

// Usage
<button-component :foo="bar">My Text</button-component>

// Vue would render
<button foo="bar">My Text</button>

// With `mount` from vue-test-utils
<button>My Text</button>

Reference in Vue.js https://vuejs.org/v2/guide/components.html#Non-Prop-Attributes

I saw this on avoriaz eddyerburgh/avoriaz#87

[eddyerburgh]

Hi Austio 😄

We should fix this. Are you able to make a PR?

[Austio]

@eddyerburgh yes should be able to knock out over the weekend.

[Austio]

Hey didn't make to over the weekend is a little more involved than was initially thinking, will work on this week.

[eddyerburgh]

Hey @Austio, are you still intending to make a PR?

[Austio]

Hey Edd, my bad, yes I do, should have some free time in the coming up week to add. If you have freetime please feel free to jump on it :)

[Austio]

@eddyerburgh Hey so i worked on this and noticed something while i was working on the mount spec for it that i wanted to double check on. The attrs match but the rendered html is not what I expected. Could you check the spec here and the failed expectation to see if i'm on base? The PR has the rendered karma output from running the specs.

Line that is failing
https://github.com/Austio/vue-test-utils/blob/503f51d391cbe70eaf659eed30e0a495c7064c36/test/unit/specs/mount.spec.js#L158

PR (to my fork of vue-test-utils)
Austio#1

[Austio]

@eddyerburgh hey hey, just bumping on this, no rush

[eddyerburgh]

Hi Austio, sorry for the delay getting back to you.

This behavior is due to how we add attrs once the vm is created. I'm looking into it now to see if there's a workaround

[nemtsov]

@Austio thank you for working on this and making this library awesome!

If you're waiting for this, here's one workaround:

  beforeEach(function() {
    const WrapperComponent = {
      components: { Button },
      props: ['foo'],
      template: '<Button ref="unit" :foo="foo" />',
    };
    this.mountUnit = (props) => {
      const wrapper = mount(WrapperComponent, props);
      wrapper.vm.$refs = wrapper.vm.$refs.unit.$refs;
      return wrapper;
    };
  });