Vue test utils - setChecked () не обновляет v-модель - PullRequest
Новая
       8

Vue test utils - setChecked () не обновляет v-модель

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

Я пишу модульные тесты для некоторых компонентов, которые я сделал на своей работе. Мы используем Mocha (TDD) и библиотеку утверждений Chai. У меня есть компонент с некоторыми флажками, и использование метода setChecked () на них из vue-test-utils ведет себя не так, как ожидалось. Я сделал небольшой пример, который воспроизводит ошибку:

TestComponent.vue: 

<template>
    <div>
        <input class="checkboxTest" type="checkbox" v-model="cbVal">
        <input class="inputTest" type="text" v-model="textVal">
    </div>
</template>

<script>
    define([], function() {
        return {
            data: function() {
                return {
                    cbVal: false,
                    textVal: ""
                }
            }
        }
    })
</script>

test.js: 

suite("Random test", function() {
  var VueTest;
  var TestComponent;

  //Import the vue test utils library and TestComponent
  suiteSetup(function(done) {
    requirejs(
      ["vue-test-utils", "vuec!components/TestComponent"],
      function(VT, TC) {
        VueTest = VT;
        TestComponent = TC;
        done();
      }
    );
  });


  //This test passes
  test("fill in the input", function() {
    var wrapper = VueTest.mount(TestComponent);
    wrapper.find(".inputTest").setValue("Hello, world!");

    assert.equal(wrapper.vm.textVal, "Hello, world!");
  });

  //This one does not
  test("programatically check the box", function() {
    var wrapper = VueTest.mount(TestComponent);
    wrapper.find(".checkboxTest").setChecked(true);

    //Prints out AssertionError: expected false to equal true
    assert.equal(wrapper.vm.cbVal, true);
  });
});

Элемент данных textVal в TestComponent изменяется, а cbVal - нет. Кто-нибудь может объяснить, почему setValue () работает просто отлично, а setChecked () - нет? Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 29 июля 2019

У меня была похожая проблема, и принятый ответ не решил мою проблему. Я не думаю, что принятый ответ также является правильным, поскольку setChecked был добавлен специально, чтобы избежать необходимости вручную устанавливать значения с помощью элементов .

В моем случае я хотел, чтобы Vue отреагировал на изменение и перерисовку v-model. Я пробовал async и многие другие методы, пока не нашел тот, который работает: wrapper.vm.$forceUpdate().

Вот как выглядит мой рабочий код: 

wrapper.find("#someRadioButtonId").setChecked(true)
// manually force Vue to update
wrapper.vm.$forceUpdate() 
expect(wrapper.find("#someRadioButtonId").classes()).toContain("selected") // success!
0 голосов
/ 14 ноября 2018

Я не могу ответить, почему это не работает, но я могу сказать, что ваш подход в первую очередь неверен.

Вы не должны напрямую взаимодействовать с элементами html, чтобы установить их значения,Когда вы устанавливаете vue-model на cbVal, вам следует вместо этого взаимодействовать с cbVal.

Другими словами, измените код с setChecked() на cbVal = true, чтобы он соответствовал Vue.хочет, чтобы вы развили свой проект.Нет никаких гарантий, что Vue может оставаться динамичным и реактивным, если вы не взаимодействуете со своим кодом так, как этого требует Vue.

...