Currently, I am in the process of testing a dropdown list within a web component utilized in a VueJS application.
My main focus is on checking whether the dropdown list actually contains items fetched through an HTTP query (handled in a vuex store) once the created() lifecycle hook of the application is activated.
The VueJS application that I am working with is coded in typescript and for my testing purposes, I rely on Jest as my preferred framework.
Below is my Vue component named SearchBar.vue that requires testing:
<template>
<dropdown-web-component
label="Applications"
:options.prop="applications"
/>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class SearchBar extends Vue {
get applications() {
return this.$typedStore.state.applications;
}
created() {
// The HTTP call functionality is implemented within the vuex store
this.$store.dispatch(Actions.GetApplications);
}
}