[Vuejs]-What is the correct way for Mock my ActionContext in my unit test case?

by

1👍

✅

I solved my problem, I used sinon.js for mock my API call and mock my commit.

I get the expected result well.

customer.actions.spec.ts

import { actions } from "./../../../../src/store/modules/customer";
import { spy, createSandbox } from "sinon";
import { expect } from "chai";
import Axios from "axios";
import Sinon = require("sinon");
import { ICustomer } from "src/models/customer.model";

describe("Customer Actions", () => {
  let sandbox: Sinon.SinonSandbox;
  beforeEach(() => (sandbox = createSandbox()));

  afterEach(() => sandbox.restore());

  it("GETALL_CUSTOMERS", async () => {
    // Assign
    let data: ICustomer[] = [
      {
        id: 1,
        address: "",
        company: "",
        firstName: "",
        lastName: "",
        zipcode: "",
        siret: "",
        tel: "",
        projects: []
      }
    ];
    const resolved = new Promise<any>(r => r({ data }));
    sandbox.stub(Axios, "get").returns(resolved);

    let commit = spy();
    let state = {
      customers: []
    };
    const getters: {} = {};
    let rootGetters: {} = {};
    let rootState: {
      customers: {
        customers: [];
      };
    } = {
      customers: {
        customers: []
      }
    };
    // Act
    await actions.GETALL_CUSTOMERS({
      commit,
      state,
      dispatch: () => Promise.resolve(),
      getters,
      rootGetters,
      rootState
    });
    // Assert
    expect(commit.args).to.deep.equal([
      ["FETCH_CUSTOMERS_REQUEST"],
      ["FETCH_CUSTOMERS_SUCCESS", data]
    ]);
})

customer.module.ts

import { IRootState } from "./../store";
import { ICustomer } from "./../../models/customer.model";
import { ActionContext } from "vuex";
import { getStoreAccessors } from "vuex-typescript";
import { CustomerService } from './../../services/entities/customer.service';

export interface ICustomersState {
  customers: ICustomer[];
}

const initialState: ICustomersState = {
  customers: []
};

type CustomersContext = ActionContext<ICustomersState, IRootState>;

export const mutations = {
  FETCH_CUSTOMERS(state: ICustomersState, customers: ICustomer[]) {
    state.customers = customers;
  }
};

export const actions = {
  async GETALL_CUSTOMERS(context: CustomersContext) {
    let customerService = new CustomerService();
    context.commit("FETCH_CUSTOMERS_REQUEST", customers);
    await customerService.getAll().then(customers => {
      context.commit("FETCH_CUSTOMERS_SUCCESS", customers);
    }).catch(err => context.commit("FETCH_CUSTOMERS_ERROR", err));
  },
}

export const customer = {
  namespaced: true,
  state: { ...initialState },
  mutations,
  actions
};

const { read, commit, dispatch } = getStoreAccessors<ICustomersState, IRootState>("customers");

export const getAllCustomersDispatch = dispatch(customer.actions.GETALL_CUSTOMERS);

I deleted the file testUtilities.ts because I didn’t need it anymore.

👤YTrl

Leave a comment