Тестирование во Vue

147
07 ноября 2019, 08:20

имеется REST приложение на Vue. Хочу ко всему этому делу прикрутить тестирование на Jest + Vue-test-utils. С тестированием знаком плохо. Документацию всю доступную изучил, но по тестированию конкретно запросов особо инфы нет. Проблема слудующая, есть обычная форма входа

import axios from 'axios' 
 
export default { 
 
  name: 'LoginForm', 
  data () { 
    return { 
      answer: null, 
      login: '', 
      password: '' 
    } 
  }, 
  methods: { 
    sendForm (e) { 
      e.preventDefault() 
      let data = new FormData() 
      data.append('username', this.login) 
      data.append('password', this.password) 
      axios 
        .post(this.$root.baseUrl + this.$apiPath.login, data) 
        .then(response => { 
          if (response.status === 200) { 
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.accessToken 
            this.$router.push({name: 'MainForm'}) 
          } 
        }) 
        .catch(response => { 
          this.answer = response.message 
        }) 
    } 
  } 
}
<template> 
  <form> 
    <h2>Вход</h2> 
    <p class="informer" v-show="answer !== null">Указаны неверные логин\пароль</p> 
    <label> 
      Логин 
      <input type="text" v-model="login"> 
    </label> 
    <label> 
      Пароль 
      <input type="password" v-model="password"> 
    </label> 
    <input id="submit" type="submit" value="Войти" @click="sendForm"> 
  </form> 
</template>

Соотвественно когда вызываю trigger('click') приходит ошибка:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'login' of undefined"

Насколько понял, нужно копать в сторону моков, но какой-то конкретной информации как их использовать в такой ситуации не нашел. Можете подсказать ссылки на доки, которые доступны объяснят или разъяснить конкретно на этом примере как провести тест.

Answer 1
  1. Забыл главное, при тестировании компонент монтируется как отдельная единица, соотвественно $root и $apiPath нужно подсовывать непосредственно в тестах.
  2. Чтобы организовать тестирование для API можно использовать moxios
READ ALSO
input disabled js

input disabled js

Подскажите пожалуйста, устанавливается chek даже если input disabledКак сделать что бы check не устанавливался если input disabled?

122
Как обмануть WebGL в плане CORS: The image element contains cross-origin data, and may not be loaded

Как обмануть WebGL в плане CORS: The image element contains cross-origin data, and may not be loaded

Я подменял png картинку на свою при помощи Requestly и поставил на сервере с картинкой заголовки, разрешающие корс:

152
Как расшифровать вредоносный jse файл?

Как расшифровать вредоносный jse файл?

Пришло на почту письмо с вирусом, открыл в песочнице архив, вынул файл jse и вот его код

129
Paper js добавление точки

Paper js добавление точки

Функция с ajax запросом присылает данные с сервера

95