Testing props being passed to child components on mount

[d1820]

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

[eddyerburgh]

Hey, this is actually a big issue right now for vue-test-utils too. I believe this has to do with JSDOM (are you testing with JSDOM?) implementation of DOM props vs attributes.

I'm going to try and really dig into this issue this week and will update you when I find a solution.

[d1820]

Yes using JSDOM.. Thanks for looking into it.. I would but with my current tight deadlines, dont have the bandwidth...