I’m currently developing a Vue 3 project where I’m integrating a search feature. When users input an email address, a dropdown appears below the email input field. The system checks if the entered email exists in the backend database or in a locally stored JSON data array. If a match is found based on the input string pattern, the API returns relevant data for display.

I am using the Vuex store for storing the data

• Here’s the code for App.vue:

<template>
  <form>
    <label for="email">Email:</label><br />
    <input type="email" id="email" placeholder="enter email" v-model="searchEmail" @keydown="handleUserEmail">
    <div v-if="box">
      <div v-for="item in userEmailSearched" :key="item.id">
        {{ item.email }}
      </div>
    </div>
  </form>
</template>

<script>
import { mapActions, mapGetters } from "vuex"

export default {
  name: "App",
  data() {
    return {
      searchEmail: "",
      userEmailSearched: [],
      box: false
    }
  },
  computed: {
    ...mapGetters({ emailSuggestions: "userSearch/userEmailSuggestions" })
  },
  methods: {
    ...mapActions({ searchUserEmail: "userSearch/searchUserViaEmail" }),
    handleUserEmail() {
      if (this.searchEmail.length > 0) {
        this.searchUserEmail({ email: this.searchEmail })
      }
    }
  },
  watch: {
    emailSuggestions: {
      handler(newVal) {
        if (newVal.code === 200) {
          this.userEmailSearched = newVal.users
          this.box = true
        }
        else {
          this.box = false
        }

        if (this.searchEmail === "") {
          this.userEmailSearched = []
          this.box = false
        }
      },
      deep: true
    }
  }
}
</script>

<style>
* {
  font-size: larger;
}
</style>

Each time a key is pressed down, the method executes an action called “searchUserEmail,” sending an object with the email property set to the value of “this.searchEmail” as the payload.

Here’s the code for store that i created:

• store/index.js:

import { createStore } from "vuex";
import userSearch from "./modules/user";

export default createStore({
  modules: {
    userSearch,
  },
});

• modules/user/index.js:

import axios from "axios";

const state = () => ({
  userEmailSuggestions: {},
});

const getters = {
  userEmailSuggestions: (state) => {
    return state.userEmailSuggestions;
  },
};

const actions = {
  async searchUserViaEmail({ commit }, payload) {
    axios
      .post("http://localhost:5000/user/user-email-details", payload)
      .then((response) => {
        if (response.data.code === 200) {
          commit("userEmailSuggestions", response.data);
        } else {
          commit("userEmailSuggestions", { code: 404, users: [] });
        }
      })
      .catch((err) => {
        commit("userEmailSuggestions", []);
        console.log(err);
      });
  },
};

const mutations = {
  userEmailSuggestions(state, userEmailSuggestions) {
    state.userEmailSuggestions = userEmailSuggestions;
  },
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

• The Data we get from the api will looks like:

{
code: 200,
users: [
{id: 1, email: "[email protected]},
{id: 2, email: "[email protected]},
{id: 3, email: "[email protected]},
{id: 4, email: "[email protected]},
{id: 5, email: "[email protected]},
]}

I’m new to writing test files, and I’ve begun learning how to use Jest for this purpose. Now, for this particular component, I want to create a test file to ensure that the “userEmailSearched” array in the component is updated from the store’s state when the email input triggers an action. Additionally, I expect the length of “userEmailSearched” to be greater than 0.