import { shallowMount, createLocalVue } from "@vue/test-utils"; import Vuex from "vuex"; import AddFruit from "@/components/AddFruit"; const localVue = createLocalVue(); localVue.use(Vuex); describe("Test AddFruit component.", () => { let actions, mutations, store; beforeEach(() => { actions = { addFruit: jest.fn(), }; mutations = { toggleModal: jest.fn(), }; store = new Vuex.Store({ actions, mutations }); }); it("takes a snapshot of the component.", () => { const wrapper = shallowMount(AddFruit, { store, localVue }); expect(wrapper.html()).toMatchSnapshot(); }); it("checks initial data.", () => { const wrapper = shallowMount(AddFruit, { store, localVue }); expect(wrapper.vm.$data.fruit).toEqual({ color: "#000000", isFruit: true, }); }); it("closes AddFruit modal on Cancel click.", () => { const wrapper = shallowMount(AddFruit, { store, localVue, }); const cancelBtn = wrapper.find(".btn--cancel"); cancelBtn.trigger("click"); expect(mutations.toggleModal).toHaveBeenCalled(); }); it("dispatches addFruit action on form submission.", () => { const wrapper = shallowMount(AddFruit, { store, localVue, }); const form = wrapper.find("form"); form.trigger("submit"); expect(actions.addFruit).toHaveBeenCalled(); }); it("checks that 'is-overlayed' class is added/removed to on mounted/destroy.", () => { const wrapper = shallowMount(AddFruit, { store, localVue, }); expect(document.body.classList).toContain("is-overlayed"); wrapper.destroy(); expect(document.body.classList).not.toContain("is-overlayed"); }); });