Vfrdtyky

My component template is correctly

    <v-radio-group row :mandatory="false" v-model="gender" name="gender">

      <v-radio :label="genderLabels.f" value="f" name="female"></v-radio>

      <v-radio :label="genderLabels.m" value="m" name="male"></v-radio>

    </v-radio-group>

genderLabels is correctly set upon mounted()

 mounted() {

    this.contactLang = this.language;

    // eslint-disable-next-line

    this.customDico = this.$validator.dictionary.container[this.language].custom;

    this.genderLabels.f = this.customDico.gender.f;

    this.genderLabels.m = this.customDico.gender.m;

  }

there is no problem when executing yarn serve, one can see the radio label attributes..

but when I test it, they are not present...

ContactForm.spec.js

 ....

    wrapper = mount(ContactForm, options);

    console.log(wrapper.vm.genderLabels.f);

    const radio = wrapper.find('[name="female"]');

    console.log("radio: ", radio.html())

    // then

    console.log("radioLabels attributes: ", radio.attributes());

    expect(radio.attributes("label")).toEqual("Mrs");

consolelog

    wrapper = mount(ContactForm, options);

    console.log(wrapper.vm.genderLabels.f);

    const radio = wrapper.find('[name="female"]');

    console.log("radio: ", radio.html())

    // then

    console.log("radioLabels attributes: ", radio.attributes());

    expect(radio.attributes("label")).toEqual("Mrs");



  ● ContactForm.vue › uses the default form language



    expect(received).toEqual(expected)



    Expected value to equal:

      "Mrs"

    Received:

      undefined



    Difference:



      Comparing two different types of values. Expected string but received undefined.



      110 |     // then

      111 |     console.log("radioLabels attributes: ", radio.attributes());

    > 112 |     expect(radio.attributes("label")).toEqual("Mrs");

          |                                       ^

      113 |   });

      114 | /*

      115 |   it("change the form language when locale changed in store", async () => {



      at Object.toEqual (tests/unit/ContactForm.spec.js:112:39)



  console.log tests/unit/ContactForm.spec.js:107

    Mrs



  console.log tests/unit/ContactForm.spec.js:109

    radio:  <input aria-checked="false" role="radio" type="radio" value="f" name="female">



  console.log tests/unit/ContactForm.spec.js:111

    radioLabels attributes:  { 'aria-checked': 'false',

      role: 'radio',

      type: 'radio',

      value: 'f',

      name: 'female' }



Test Suites: 1 failed, 1 total

where could I be wrong in my test code ?

thanks for feedback

==== UPDATE 1 ====

Using shallowMount , I gte the following in console.log(wrapper.html()); :

<vradiogroup-stub column="true" height="auto" name="gender" row="true" value="f">

<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="f" name="female"></vradio-stub> 

<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="m" name="male"></vradio-stub>

</vradiogroup-stub>

using mount() , I get the follwoing in wrapper.html()

        <input aria-checked="false" role="radio" type="radio" value="f" name="female">

        <div role="radiogroup" class="v-input--radio-group__input">



          <div class="v-radio theme--light">

          <div class="v-input--selection-controls__input">

          <input aria-checked="false" role="radio" type="radio" value="f" name="female">

          <div class="v-input--selection-controls__ripple">

          </div><i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i></div>

          <label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>

          </div> 



          <div class="v-radio theme--light">

          <div class="v-input--selection-controls__input">

          <input aria-checked="false" role="radio" type="radio" value="m" name="male">

          <div class="v-input--selection-controls__ripple">

          </div>

          <i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>

          </div>

          <label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>

          </div>



        </div>

It's strange ... no text in the label ...

SOLVED...

I do not understand yet why ... but I need to set my test as asynchronous :
then I can get the label attribute set to the correct value ...

it("uses the default form language", async () => {

...

wrapper = shallowMount(ContactForm, options);

await wrapper.vm.$nextTick();

const radioInput = wrapper.find('[name="female"]');

console.log(radioInput.html());

console.log tests/unit/ContactForm.spec.js:110

<vradio-stub color="accent" onicon="$vuetify.icons.radioOn"

 officon="$vuetify.icons.radioOff" 

 value="f" name="female" label="Mrs"></vradio-stub>