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

Question

У меня есть класс, который предназначен для использования в качестве репозитория для выполнения запросов AJAX с использованием axios:

export default class SomeRepository {
  getEncryptedValue (value) {
    return axios.get('http://localhost/api/v1/encrypt')
  }
}

И у меня есть компонент, который вызывает метод этого репозитория внутри свойства methods в компонентеПримерно так:

<template>
  ...
</template>

<script>
import SomeRepository from '@/classes/SomeRepository'

export default {
  data () {
    return {
      value: '',
      result: ''
    }
  },
  methods: {
    encrypt () {
      let someRepo = new SomeRepository()

      someRepo.getEncryptedValue(this.value)
        .then(response => {
          this.result = response.data.result
        })
    }
  }
}
</script>

Как передать SomeRepository в качестве зависимости?Моя цель состоит в том, чтобы я хотел имитировать его в своих модульных тестах.

Я ищу простое решение, предпочтительно такое, которое не включает сторонние библиотеки или шаблон.

Я имеюпопытался также сделать:

import Vue from 'vue'
import SomeRepository from '@/classes/SomeRepository'

Vue.use(SomeRepository)
// and
Vue.use(new SomeRepository())

, который явно не работает (честно говоря, я не ожидал, что они будут).Я также пытался следовать этой статье https://codeburst.io/dependency-injection-with-vue-js-f6b44a0dae6d, но мне не очень понравился подход к созданию миксина каждый раз, когда я хочу использовать зависимость.

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

Answer 1

Вы должны использовать плагин Vue https://vuejs.org/v2/guide/plugins.html Затем вы можете получить к нему доступ, например, this.$someDeps

. Для модульного тестирования вы можете легко смоделировать его, используя Vue Test Utils https://vue-test-utils.vuejs.org/api/options.html#mocks

Answer 2

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

Пример метода

// Function
function func(dependency) {
  dependency.use()
}

// In App
func(dependency) // -> runs dependency.use

// In Tests
func(mockDependency) // -> runs mocked dependency.use

Ваш пример

Как только вы знаете этот метод, вы можете создать множество различных версий, но показать супер простую версию.

encrypt() {
  this._encrypt(SomeRepository)
}
_encrypt (SomeRepository) {
  let someRepo = new SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

Вы бы протестировали _encrypt с зависимостью mock.

Youможет также сделать что-то вроде этого.

encrypt (_SomeRepository=SomeRepository) {
  let someRepo = new _SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

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