Vue. js Тестирование - баннер не отображается после нажатия кнопки - PullRequest
Новая
       80

Vue. js Тестирование - баннер не отображается после нажатия кнопки

2 голосов
/ 05 мая 2020

У меня есть компонент Vue. js, который показывает баннер BootstrapVue в ответ на ошибку отправки. Во время ручного тестирования все работает нормально, но соответствующий модульный тест не проходит.

Ошибка следующая. 

[vue-test-utils]: find did not return #submit-failure-banner, cannot call isVisible() on empty Wrapper

      36 | 
      37 |         const errorBanner = wrapper.find("#submit-failure-banner")
    > 38 |         expect(errorBanner.isVisible()).toBeTruthy()
         |                            ^
      39 |     })
      40 | })
      41 |

it("shows an error message on post failure", async () => {
    const wrapper = mount(NewSite, {
        localVue,
        provide: {
            sites: new Sites(internalServerErrorRequestHandler)
        }
    });
    const siteOwnerInput = wrapper.find('#new-site-owner-input');
    siteOwnerInput.setValue(owner);
    const saveButton = wrapper.find('#new-site-save');
    saveButton.trigger('click');
    await wrapper.vm.$nextTick();

    const errorBanner = wrapper.find("#submit-failure-banner")
    expect(errorBanner.isVisible()).toBeTruthy()
})

Соответствующие части компонента NewSite следующие , начиная с элемента баннера в шаблоне. 

<b-alert id="submit-failure-banner" variant="danger" v-model="banners.submitFailure" dismissible>
    {{ $t('$MESSAGE_SITE_SAVE_FAILED') }}
</b-alert>

export default class NewSite extends Vue {
    @Inject('sites') private sites!: Sites

    form = {
        owner: ''
    }
    banners = {
        submitFailure: false,
        ...
    }

    async postForm() {
        return await this.sites.create({
            owner: this.form.owner,
            state: SiteStatus.NEW
        }).save()
    }
   ...
   async onSave() {
        if (!this.checkForm()) {
            return;
        }
        try {
            await this.postForm();
            await this.$router.push({name: 'dashboard'})
        } catch (_) {
            this.banners.submitFailure = true;
        }
    }

Соответствующая часть класса Sites выполняет не что иное, как запрос POST с использованием обработчика запросов. Это axios в производстве и фиктивный обработчик запросов во время тестов. internalServerErrorRequestHandler определяется следующим образом. 

const internalServerErrorRequestHandler = {
    post(url: string, data: any): Promise<Response> {
        return Promise.reject()
    }
}

Я проверил, что html не показывает баннер, с помощью оператора console.log.

1 Ответ

1 голос
/ 06 мая 2020

Я решил проблему, заглушив компонент BAlert, тем самым удалив элемент transition. Я использовал следующую заглушку. 

<template>
    <div :v-show="value" :id="id">
        <slot/>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from "vue-property-decorator";

    @Component
    export default class BAlertStub extends Vue {
        @Prop() value = false
        @Prop() id = ""
    }
</script>
...