Vue-test-utils wrapper.find возвращает элемент не существует в 0 - PullRequest
Новая
       8

Vue-test-utils wrapper.find возвращает элемент не существует в 0

0 голосов
/ 14 февраля 2019

У меня есть компонент с двумя кнопками, такими как: 

<a id="config-delete-button" class="btn btn-sm btn-danger pull-right" v-if="is_this_admin && !configDeleted" @click="deleteConfig">Delete</a>
<a id="config-undelete-button" class="btn btn-sm btn-primary pull-right" v-if="is_this_admin && configDeleted" @click="unDeleteConfig">Undelete</a>

В моих тестах тестовый случай удаления, переданный как wrapper.find, не смог найти кнопку.Кнопка отмены удаления.

Тестовый код: 

describe ('config undelete method', () => {
        it ('positive case', async () => {
            stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
            stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).returns(Promise.resolve(1));
            const wrapper = shallow(ConfigDescribeComponent, {
                localVue,
                propsData: {
                    name: JSON.stringify("linux_rhel7"),
                    config_type:JSON.stringify("client")
                },
                computed: {
                    api: function () {
                        return ctlApi;
                    }
                }
            });

            await flushPromises();

            wrapper.vm.configDeleted = true;
            // Circumvent any sweetAlert popups by forcing resolve
            const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
            wrapper.setMethods({ $sweetAlert: stub_sweetAlert });

            // Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
            const unDeleteButton = wrapper.findAll('#config-undelete-button').at(0);
            unDeleteButton.trigger('click');
            await flushPromises();

            // Wait until Vue has performed the actual DOM update after we trigger some state change.
            localVue.nextTick(() => {
                stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).should.have.been.called;
            });
        });
});
describe ('config delete method', () => {
        it ('positive case', async () => {
            stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
            stub.withArgs(apiCalls.configDelete.method, sinon.match.any).returns(Promise.resolve(1));
            const wrapper = shallow(ConfigDescribeComponent, {
                localVue,
                propsData: {
                    name: JSON.stringify("linux_rhel7"),
                    config_type:JSON.stringify("client")
                },
                computed: {
                    api: function () {
                        return ctlApi;
                    }
                }
            });
            await flushPromises();

            // Circumvent any sweetAlert popups by forcing resolve
            const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
            wrapper.setMethods({ $sweetAlert: stub_sweetAlert });

            // Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
            const deleteButton = wrapper.findAll('#config-delete-button').at(0);
            deleteButton.trigger('click');
            await flushPromises();

            // Wait until Vue has performed the actual DOM update after we trigger some state change.
            localVue.nextTick(() => {
                stub.withArgs(apiCalls.configDelete.method, sinon.match.any).should.have.been.called;
            });
        });
});

Есть ли здесь какая-либо зависимость?Как обертка все еще имеет предыдущие данные кнопки удаления и не может ее сбросить?Эти 2 вызова находятся внутри другого описания вызова.Там я инициализирую заглушку в beforeEach и выполняю stub.restore в afterEach

1 Ответ

0 голосов
/ 14 февраля 2019

Вы можете попробовать 

describe ('config undelete method', () => {

    beforeEach(() => {
       jest.resetModules();
       jest.clearAllMocks();
    });

    it ('positive case', async () => {
    ...
...