Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Using 'Mount', Class and Style properties are inconsistent in this.$attrs #1579
Comments
You are right, this is related to Vue's implementation details. I am a little confused about "both forms of rendering to behave the same way" - is I am not sure if there is a problem or bug here. |
@lmiller1990 - Thanks for at least confirming I'm not crazy. Regarding your comment on my remark: You can image that my component has some logic that does things on the $attrs object, the content of $attrs is different depending on how I render the component. In one instance my component has access to $attrs.class, and on the other it does not. I'm fine with one of the two being right, but it's a bit confusing when they behave differently. |
This won't just be a problem in VTU though right - this is coming from Vue core. Do you have an example test where this is a problem? |
I think this is problem unique to VTU and unrelated to Vue(kind of) Vue treats class and style as a special case, but VTU does not. In our test case, we have a component that passes down all the $attrs it receives to a child component. On top of all other $attrs we expected, both style and class were also cascaded down to the inner html, but this did not happen when we rendered with Vue. It took some fiddling to find out that it's the way we write our tests that creates this effect. rendering the component
would result in this:
however this form:
would result in this output
|
Create a minimal repro, where we can assert what exactly you are doing. I think it may be a mix of vtu and user error |
No problem, Repro: Example component Test cases (That demonstrates the problem) |
@dobromir-hristov Is there any chance to confirm whether it's a user error or a VTU issue? |
Had a think about this. I think the current behavior is correct. According to the Vue docs, Let me know if I am missing something and we can reopen this. |
@lmiller1990 my only concern, as a developer and tester, is that the two cases are not identical. Now that I know that there's some difference between the two, I will always use the option closest to Vue. Our test was working perfectly using this error was spotted by chance, and we could've missed it. |
I didn’t realise this was working differently in prod. Maybe we need to investigate more. |
Using mount(), 'class' is treated differently depending on context
When rendering a component in a test using 'mount()', you have two ways to do so.
the prop 'class' is treated differently in the two ways mentioned above.
vs.
in the first example
this.$attrs
is populated with 'class', while in the second examplethis.$attrs
is empty.Expected behavior
I'd expected both forms of rendering to behave the same way(either way is good, just be consistent)
Actual behavior
In the first example
this.$attrs
is populated with 'class' and 'style',while in the second example
this.$attrs
is empty.Possible Solution
I'm guessing that the root cause is how Vue is handling the prop 'class' in the context of a template vs directly pushing the prop in an object.
The 'mount' implementation doesn't deal with the special merging Vue does for style and class
(while writing the above line I realized this probably happens with style as well, and after testing it, it indeed behaves like class)