Vue Test Utils Несколько входов выдают значение сброса - PullRequest
Новая
       34

Vue Test Utils Несколько входов выдают значение сброса

1 голос
/ 27 апреля 2020

Итак, я создал vue компонент и использую vue test utils для его проверки. Компонент позволяет пользователю загружать файл, который обновляет массив, который передается через вход (код, показанный ниже), к которому пользователь затем может получить доступ. Загрузка нового файла добавит к массиву, а не заменит.

Что должно произойти:

Я загружаю первый файл, и отправленное событие ввода показывает, что один файл; Затем я загружаю второй файл, и отправленное событие ввода показывает этот файл и первое.

Что происходит:

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

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

Компонент 

<template>
   <input type="file" @change="handle"/>
</template>

<script>
   export default {
       props: {
          value: {
            type: Array,
            required: false,
            default() {
                return []
            }
          }
       },

       method: {
           handle(e) {
               const files = e.target.files;

               var newFiles = [];

               for (var i = 0; i < files.length; i++) {
                    newFiles.push(files[i])
               }

               this.files = this.files.concat(newFiles)
           }
       },

       computed: {
           files: {
            get() {
                return this.value
            },

            set(val) {
                this.$emit('input', val)
            }
        }
   }

Тест 

it('can add to array', async () => {
    const files = [
      {
        name: 'image.png',
        size: 20000000,
        type: 'image/png',
      },
      {
        name: 'image.jpg',
        size: 20000,
        type: 'image/jpeg',
      },
    ]
    const wrapper = mount(Component)

    // Upload first file
    wrapper.vm.handle({
      target: {
        files: [files[0]],
      },
    })

    expect(wrapper.emitted().input[0]).toStrictEqual([
      [files[0]]
    ]);

    await wrapper.vm.$nextTick()

    // Upload second file
    wrapper.vm.handle({
      target: {
        files: [files[1]],
      },
    })

    expect(wrapper.emitted().input[1]).toStrictEqual([files]);
}

1 Ответ

0 голосов
/ 30 апреля 2020

Я понимаю, что случилось сейчас. Когда массив компонентов изменяется в компоненте, я его излучаю, но я не сохраняю его нигде, когда обычно у меня будет v-модель, сохраняющая его. Поскольку мои тесты не имитируют v-модель, значение набора вычисляемых файлов является пустым массивом. Так что мне нужно установить значение проп, чтобы смоделировать это, я обнаружил, что могу добавить прослушиватель для события ввода для обновления значения. 

it('can add to array', async () => {
    const files = [
      {
        name: 'image.png',
        size: 20000000,
        type: 'image/png',
      },
      {
        name: 'image.jpg',
        size: 20000,
        type: 'image/jpeg',
      },
    ]
    const wrapper = mount(Component, {
        listeners: {
           // simulate v-model update
           input: (val) => { 
               wrapper.setProps({ value: val });
           }
        }
    })

    // Upload first file
    wrapper.vm.handle({
      target: {
        files: [files[0]],
      },
    })

    expect(wrapper.emitted().input[0]).toStrictEqual([
      [files[0]]
    ]);

    await wrapper.vm.$nextTick()

    // Upload second file
    wrapper.vm.handle({
      target: {
        files: [files[1]],
      },
    })

    expect(wrapper.emitted().input[1]).toStrictEqual([files]);
}

Еще один способ исправить это - сохранить в массив файлов в данных компонента затем вызывает функцию обновления для создания нового массива.

...