Vue.js vuetify test-utils test:unit failing

Question

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 ...

user762579 · Accepted Answer · 2018-11-12 16:00:21Z

1

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>

answered Nov 12, 2018 at 16:00

user762579

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js vuetify test-utils test:unit failing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related