Поймать Vue.js предупреждения для модульного тестирования обязательных свойств - PullRequest
Новая
       19

Поймать Vue.js предупреждения для модульного тестирования обязательных свойств

0 голосов
/ 12 июня 2018

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

Мы хотели бы проверить, что компоненты имеют все необходимые свойства, установленные при создании.Мой тестовый пример выглядит примерно так: 

describe('Input', () => {
  it('fail initialization with no value', () => {
    const vm = mount(Input, {
      propsData: {},
    });

    // expecting above to fail due to required prop 'value'
  });
});

Ожидается, что компонент Input будет содержать свойство value.Я вижу через консоль предупреждение о том, что оно отсутствует, но мы хотели бы поймать это в наших модульных тестах.Непосредственно тестировать это не имеет особого смысла, но как только у нас есть компоненты, в которые вложены несколько компонентов, важно убедиться, что каждый компонент правильно инициализирует свои подкомпоненты, и это достигается за счет уверенности в том, что вышеприведенный тест не пройден и будет обнаружен сбой.

Однако здесь не возникло никаких исключений, у нас были идеи подключиться к Vue.warnHandler, но это просто большая работа для простого подтверждения того, что конструктор работает как ожидалось.

Есть лиРекомендуемый подход для этого с Vue.js?

1 Ответ

0 голосов
/ 08 января 2019

К сожалению, похоже, что единственный способ сделать это - подключиться к Vue.warnHandler

Я использовал переменную и сбросил ее на afterEach ловушку (Мокка) следующим образом: 

let localVue;
let hasWarning = false;
function functionToWrapShallowMount(propsData) {
    const Wrapper = shallowMount(Control, {
        propsData,
        provide: {
            $validator: () => {}
        },
        localVue
    });
    return Wrapper;
}
before(() => {
    localVue = createLocalVue();
    Vue.config.warnHandler = () => {
        hasWarning = true;
    };
});
afterEach(() => {
    hasWarning = false;
});

it('throws a warning', () => {
    const { vm } = functionToWrapShallowMount({
        name: 'foooo',
        value: 'bad'
    });
    vm.name.should.eq('foooo');
    hasWarning.should.eq(true);
});

Подвох в том, что вы не можете использовать тестовые утилиты localVue из Vue, вы должны использовать экземпляр Vue, импортированный из vue.

...