Как проверить компонент Vue с дочерним компонентом ввода Buefy? - PullRequest
Новая
       17

Как проверить компонент Vue с дочерним компонентом ввода Buefy?

0 голосов
/ 28 июня 2019

У меня есть компонент LoginCard, который использует компонент Buefy b-input для отображения входных сообщений электронной почты и пароля: 

<b-field label="Email">
  <b-input
    v-model="email"
    type="email"
    placeholder="Your email"
    required
  >
  </b-input>
</b-field>

<b-field label="Password">
  <b-input
    v-model="password"
    type="password"
    password-reveal
    placeholder="Your password"
    required
  >
  </b-input>
</b-field>

И в моем тесте я хотел бы использовать что-то вроде vue-test-utils setValue метода, чтобы установить значение на входе, активировать этот вход и распространить его на мои data атрибуты модели для email и password. 

wrapper.find('input[type="email"]').setValue('test@example.com');
wrapper.find('input[type="password"]').setValue('password');

Но это не работает, значение не распространяется.

1 Ответ

0 голосов
/ 28 июня 2019

Я обнаружил, что вам нужно использовать функцию awaitPromises для запуска реактивности и обеспечения полного распространения входов.

Так, например, мой последний тест выглядит так: 

it('Logs in user via form', async () => {
  const wrapper = mount(LoginCard, {
    mocks: { $auth: mockAuth }
  });

  const inputs = wrapper.findAll({ name: 'BInput' });

  expect(inputs.length).toEqual(2);

  wrapper.find('input[type="email"]').setValue(email);
  await flushPromises();

  wrapper.find('input[type="password"]').setValue(password);
  await flushPromises();

  wrapper.find('form').trigger('submit.prevent');
  await flushPromises();

  expect(strategy).toBe('local');
  expect(data).toEqual({
    data: { user: { email: email, password: password } }
  });
});

Где mockAuth высмеивает глобальный $ auth Nuxt: 

const mockAuth = {
  loginWith: (_strategy, _data) => {
    return new Promise((resolve, reject) => {
      strategy = _strategy;
      data = _data;
      if (error) {
        reject(new Error(errorMessage));
      } else {
        resolve();
      }
    });
  }
};

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

Вы также можете использовать wrapper.setData(...) для ручной установки адреса электронной почты и пароля перед отправкой формы, но мне это не нравится по нескольким причинам:

  1. Вы по сути настраиваетенекоторые приватные переменные для проверки вашего кода

  2. Вы можете войти и удалить элементы ввода, и ваши компоненты по-прежнему будут проходить, даже если на самом деле они совершенно непригодны.1022 *

...