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 <body> 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");
  });
});
