lundi 20 juillet 2020

How do I pass data to this.listData so it will output a loop with v-for [vue, jest testing]

In my current app I am trying to pass data to this.listData. Because based on the fact if this contains data, it will loop through a v-for and then output all the list items. In order to do so I need to write a test that will pass data to this.listData. Based on my screenshot there is only a UL-element and no LI-element. So in React Jest testing I know how to do that, but with Vue I am a complete noob.

// DataField.vue
<ul class="three">
      <li
        v-for="(post, index) in listData.data"
        :key="index"
      ></li>
    </ul>
data () {
  return {
    listData: []
  }
},
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      axios.get('http://localhost:8085/').then(response => {
          this.listData = response.data
        })
        .catch(function (error) {
          console.log(error);
        })
    },

// DataField.spec.js

import {
    mount,
    shallowMount
} from '@vue/test-utils'
import DataField from './DataField.vue'
import axios from 'axios';

jest.mock('axios');

describe('DataField', () => {
    test('axios ', () => {
        const wrapper = mount(DataField);
        wrapper.setData({
            "data": [{
                    "name": "A",
                    "description": "This is a description of A",
                    "parentId": ""
                },
                {
                    "name": "B",
                    "description": "This is a description of B",
                    "parent": "A"
                }

            ]
        })
        const wrapper = shallowMount(DataField)
        expect(wrapper.find('li').toBeVisible()).toBe(true)
    });


    test('should mount', () => {
        const wrapper = mount(DataField)
        expect(wrapper.isVueInstance()).toBeTruthy()
    });
})

Aucun commentaire:

Enregistrer un commentaire