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

let $route = {
  path: "/films",
  params: {
    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
  }
};

const mockFilm = mockFilms.filter(o => o.id === $route.params.id);

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

describe("Film page", () => {
  it("should render Film page instance", () => {
    const wrapper = mount(Film);
    expect(wrapper.exists()).toBe(true);
  });

  it("tests params validation", () => {
    expect(Film.validate({ params: $route.params })).toBe(true);
    expect(
      Film.validate({
        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
      })
    ).toBe(false);
    expect(
      Film.validate({
        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
      })
    ).toBe(false);
  });

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

    expect(
      (
        await wrapper.vm.$options.asyncData({
          $axios: axios,
          params: $route.params
        })
      ).film
    ).toEqual(mockFilm);

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

    // expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
  });
});