import { mount } from "@vue/test-utils";
import axios from "axios";
import FilmsView from "@/pages/films";
import mockFilms from "./fake-films.json";

jest.mock("axios", () => ({
  $get: jest.fn(() => mockFilms)
}));

describe("Films page", () => {
  it("should render Films page instance", () => {
    const wrapper = mount(FilmsView);
    expect(wrapper.find("h2").text()).toBe("Ghibli films");
  });

  it("should get films from Ghibli API", async () => {
    let wrapper = mount(FilmsView, {
      mocks: {
        $axios: axios
      }
    });

    expect((await wrapper.vm.$options.asyncData(wrapper.vm)).films).toEqual(
      mockFilms
    );

    // Init page with mocked asyncData
    wrapper = mount(FilmsView, {
      mocks: {
        films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
        $axios: axios
      }
    });

    expect(JSON.parse(wrapper.find(".films").text())).toEqual(mockFilms);
  });
});