[Vuejs]-How do I pass a dependency to a Vue component?

0👍

There is a ton of ways to mock functions. The most simplistic that I have found is simply accepting dependencies as parameters of a function and replace the function to use in your tests.

Example of Method

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

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

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

Your Example

Once you know this method you can do a ton of different versions of it but to show a super simple version.

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

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

You would test _encrypt with the mock dependency.

You can also do something like this.

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

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

If you pass in the mocked version it will use that if you do not it will use the real one.
The idea is to use this method however you see fit, but I think you get the idea. It is super simple no magic and no libraries needed.

0👍

You should use a Vue plugin
https://v2.vuejs.org/v2/guide/plugins.html
Then you can access it via e.g. this.$someDeps

For unit testing, you can mock it easily using Vue Test Utils https://vue-test-utils.vuejs.org/api/options.html#mocks

👤hylde

Leave a comment