Vue.js vuetify test-utils test: сбой модуля - PullRequest
Новая
       27

Vue.js vuetify test-utils test: сбой модуля

0 голосов
/ 12 ноября 2018

Мой шаблон компонента правильно 

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

гендерная маркировка правильно установлена ​​при подключении () 

 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;
  }

Нет проблем при выполнении подачи пряжи, можно увидеть атрибуты метки радио.

но когда я проверяю его, их нет ...

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

где я могу ошибаться в своем тестовом коде?

спасибо за отзыв

==== ОБНОВЛЕНИЕ 1 ====

Используя shallowMount, я получаю следующее в 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>

используя mount (), я получаю следующее в 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>

Странно ... на этикетке нет текста ...

1 Ответ

0 голосов
/ 12 ноября 2018

решено ...

Я пока не понимаю, почему ... но мне нужно установить свой тест как асинхронный: тогда я смогу установить для атрибута метки правильное значение ... 

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