Vue test utils обновляет данные компонента, но не перерисовывает dom - PullRequest
Новая
       14

Vue test utils обновляет данные компонента, но не перерисовывает dom

0 голосов
/ 14 декабря 2018

Я пытаюсь протестировать шаблон моего приложения Vue после выполнения запроса ajax, который изменяет одну переменную данных компонента.Эта переменная (books) используется для условного рендеринга галереи

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

ПРОБЛЕМА : если установлена ​​переменная books, div <div v-else-if='books.length > 0'>SHOW GALLERY</div> долженрендеринг, но div «else» (<div v-else class='loader'>Loading</div>) по-прежнему рендерится

Следующие два блока кода - это компонент и сам тест:

BookGallery.vue (компонент, который я тестирую) 

 <template>
      <v-content>
          <v-container fluid>

               /*** Conditional rendering: After the ajax request books > 0, so this div should be rendered ***/
              <div v-if='books.length > 0'>SHOW GALLERY</div>

              <div v-else class='loader'>Loading</div>
          </v-container>
      </v-content>
    </template>

    <script lang='ts'>
      import {Component} from 'vue-property-decorator';
      import {MyMixin} from '../mixin';

      @Component({components: {BookInformation}})
      export default class BookGallery extends MyMixin {
          public books: string[] = [];

          public async mounted() {

               /*** books is set as the result of the ajax request ***/

               this.books = (await this.$http.get(this.host + '/books')).data;
          }
      }
    </script>

    <style scoped lang='scss'></style>

ТЕСТ 

    @test
    public async 'after calling the books, the gallery show all of them'() {

        /*** MOCKING THE RESPONSE ***/
        TestCase.OK_200({
            books: [
                { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
            ],
        });


        /*** MOUNTING MY COMPONENT ***/
        const wrapper = TestCase.shallowMount(BookGallery);


        /** ASSERTING **/
        await flushPromises().then(() => {

            /**  the first "expect" passes, so books > 0 = true **/
            expect(wrapper.vm.$data.books).to.eqls({
                books: [
                    { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                    { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
                ],
            });

            /** This is failing. The application should read 'SHOW GALLERY' when books > 0 (something tested in the previous assert), as explained in the first comment of the component's template, but is not updating the dom, only the data **/
            see('SHOW GALLERY');
        });
    }

ВОПРОС : Как я могу обновитьмой DOM для моего последнего утверждения - see("SHOW GALLERY") -?

ОБНОВЛЕНИЕ

см. функцию Функция ищет только HTMLэлемент в оболочке, которую vue-test-utils использует для монтирования приложения.В этом случае, поскольку я оставил его пустым, он выполняет поиск текста «ПОКАЗАТЬ ГАЛЕРЕЮ» по всему HTML-файлу 

export const see = (text: string, selector?: string) => {
    const wrap = selector ? wrapper.find(selector) : wrapper;

    expect(wrap.html()).contains(text);
};

1 Ответ

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

Я только что решил аналогичную проблему, используя shallowMount и его опцию sync: false.

Это отключает синхронизацию рендеринга, требуя, чтобы вы предоставили визуализатору некоторое время для выполнения своей работы (await wrapper.vm.$nextTick()), где это необходимо.Как только это было сделано, компонент, как и ожидалось, был перерисован на основе моих реактивных данных.

...