import mockAxios from "axios";
import { mount } from "@vue/test-utils";

import App from "../../src/App.vue";
import Fruits from "../../src/views/Fruits.vue";

describe("App", () => {
  const wrapper = mount(App, { stubs: ["router-view"] });

  it("should be a Vue instance", () => {
    expect(wrapper.vm).toBeTruthy();
  });

  it("renders correctly", () => {
    expect(wrapper.find("#app")).toBeTruthy();
  });
});

// TODO: Move the following code to fruits.spec.js
jest.mock("axios", () => ({
  get: jest.fn(() => Promise.resolve({ data: { data: "value" } }))
}));

it("should get fruits from fruit-api on mounted", async () => {
  const wrapper = mount(Fruits, {
    mocks: {
      $http: mockAxios
    }
  });

  expect(wrapper.vm.fruits).toEqual([]);

  // We need to wait the nextTick to check API response (async).
  await wrapper.vm.$nextTick(() => {
    expect(wrapper.vm.fruits).toEqual("value");
  });
});