Refactor films/_id to use vuex

pages/films/_id.spec.js

@@ -1,7 +1,6 @@
-import { mount } from "@vue/test-utils";
-import axios from "axios";
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
 import Film from "./_id";
-import mockFilms from "@/test/fake-films.json";
 
 let $route = {
   path: "/films",
@@ -10,15 +9,24 @@ let $route = {
   }
 };
 
-const mockFilm = mockFilms.filter(o => o.id === $route.params.id);
-
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilm)
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe("Film page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      film: {}
+    };
+    actions = {
+      getFilm: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
   it("should render Film page instance", () => {
-    const wrapper = mount(Film);
+    const wrapper = mount(Film, { localVue, store });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -36,31 +44,13 @@ describe("Film page", () => {
     ).toBe(false);
   });
 
-  it("should get film from Ghibli API", async () => {
+  it("should dispatch getFilm action", async () => {
     let wrapper = mount(Film, {
-      mocks: {
-        $route,
-        $axios: axios
-      }
+      localVue,
+      store
     });
 
-    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);
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getFilm).toHaveBeenCalled();
   });
 });