Проверить, установлено ли состояние Vuex при обновлении формы ввода - PullRequest
Новая
       29

Проверить, установлено ли состояние Vuex при обновлении формы ввода

0 голосов
/ 19 сентября 2019

Я пытаюсь выполнить модульное тестирование, чтобы модель формы ввода, хранящаяся в состоянии Vuex, корректно обновлялась / устанавливалась, однако тест продолжает давать сбой.

У меня есть компонент JobsSearchсостоящий из формы ввода и двух кнопок.Форма ввода имеет свою модель, установленную в переменную состояния Vuex через вычисляемое свойство.У меня также есть файл JobsSearch.spec, который состоит из тестов.

В тесте я устанавливаю значение для входа, затем проверяю, что была вызвана смоделированная мутация, которая проходит.Затем я импортирую исходную мутацию из хранилища и пытаюсь вызвать ее с состоянием, определенным внутри теста, и значением, которое я установил для формы ввода.Я ожидаю, что состояние будет значением, однако тест завершается неудачно со следующим: 

Error: expect(received).toBe(expected) // Object.is equality

Expected: "4040"
Received: ""

Я заметил, что даже при импорте jobs.js похоже, что при доступе к jobs.mutations.mutateJobsSearchConfig возвращается неопределенное

Вот JobsSearch.vue, я выпустил кнопки, потому что тесты на них пройдены. 

<template>
    <b-input-group class="sm-2 mb-2 mt-2">
      <b-form-input
        v-model="keyword"
        class="mr-2 rounded-0"
        placeholder="Enter Search term..."
      />
</template>
<script>

export default {
  name: 'jobs-search',
  computed: {
    keyword: {
      get () {
        return this.$store.state.jobs.search.Keyword
      },
      set (value) {
        this.$store.commit('mutateJobsSearchConfig', value)
      }
    }
  },
  methods: {
    emitSearchEvent () {
      this.$emit('searchEvent')
    }
  }
}
</script>

Вот jobs.js, в котором хранится этот компонент 

export default {
  state: {
    search: {
      Keyword: '',
      status: [],
      ucode: []
    }
  },
  mutations: {
    mutateJobsSearchConfig (state, payload) {
      state.search.Keyword = payload
      state.search.status = payload.status
      state.search.ucode = payload.ucode
    }
  },
  actions: {
    updateJobsSearchConfig (context, payload) {
      context.commit('mutateJobsSearchConfig', payload)
    }
  }
}

Вот JobsSearch.spec.js

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// BootstrapVue is necessary to recognize the custom HTML elements
import BootstrapVue from 'bootstrap-vue'
import JobsSearch from '@/components/jobs/JobsSearch.vue'
import jobs from '@/store/jobs'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(BootstrapVue)

describe('JobsSearch.vue', () => {
  let state
  let store
  let wrapper
  let mutations

  beforeEach(() => {
    state = {
      jobs: {
        search: {
          Keyword: '',
          status: [],
          ucode: []
        }
      }
    }

    mutations = {
      mutateJobsSearchConfig: jest.fn()
    }

    store = new Vuex.Store({
      state,
      mutations
    })

    wrapper = mount(JobsSearch, {
      localVue,
      store
    })
  })

  afterEach(() => {
    wrapper.destroy()
  })

  it('should update state.jobs.search.Keyword when the model of the input is set', () => {
    const value = '4040'
    const input = wrapper.find('input')
    input.setValue(value)
    expect(mutations.mutateJobsSearchConfig).toHaveBeenCalled()
    jobs.mutations.mutateJobsSearchConfig(state.jobs.search.Keyword, value)
    expect(state.jobs.search.Keyword).toBe(value)
  })
  // END: Testing Vue events

  // START: Method tests

  // END: Method tests
})

Буду признателен за помощь.

...