Testing props being passed to child components on mount #161
Description
I have a parent component where a placeholder is set as a prop. this prop is passed into a child component that has an input field. when i try and write a test to find the input adn check the rendered placeholder property its always undefined. i can find the wrapper but none of the props are set on the input component. based on #93 can i assume this functionality does not exist and there is no way to accomplish this?
PARENT
<template>
<div >
<div class="control-groups">
<span>{{placeholderDisplayText}}</span>
<gabaseinput v-model="inputModel"
:placeholderDisplayText="placeholderDisplayText">
</ga-baseinput>
</div>
</div>
</template>
props: [ showAsterix: {
type: Boolean,
required: false,
default: false
},
placeholder: {
type: String,
required: false
},]
computed: {
placeholderDisplayText: function() {
return `${this.placeholder}${this.showAsterix ? ' *' : ''}`;
}
},
CHILD
<template>
<div class="control-group" >
<input type="text" class="ga-control-text" @input="updateValue"
:value="value"
:placeholder="placeholderDisplayText" : />
</div>
</template>
props: [
placeholderDisplayText: {
type: String,
required: true
}]
TEST
Before:
const instance = Vue.extend();
wrapper = mount(textbox, {
instance
});
Test:
wrapper.setProps({
placeholder: 'test',
showAsterix: true
});
assert.equal((wrapper.vm).placeholderDisplayText, 'test *'); //SUCCESS
const input = wrapper.first('input');
console.log(input.data());
expect(input.getAttribute('placeholder')).to.equal('test *'); //FAIL = UNDEFINED for value
wrapper.html()
<div ><div ><span>test *</span> <div ><input type="text" placeholder="undefined"> <label> <!----></label> <!----> <!----></div></div></div>
Can we not test html of parent child components?
If not is there an ETA on getting this functionality.
Any help would be great.. spent 4 hours on this already trying different things