Create vuex modules for Films/Vehicles/Locations/People + Test adaptation

pages/films/_id.spec.js

@@ -13,7 +13,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("Film page", () => {
-  let state, actions, store;
+  let state, actions, getters, store;
 
   beforeEach(() => {
     state = {
@@ -22,7 +22,19 @@ describe("Film page", () => {
     actions = {
       getFilm: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    getters = {
+      film: jest.fn()
+    };
+    store = new Vuex.Store({
+      modules: {
+        films: {
+          namespaced: true,
+          state,
+          actions,
+          getters
+        }
+      }
+    });
   });
 
   it("should render Film page instance", () => {

pages/films/_id.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Film",
@@ -21,10 +21,12 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getFilm", params.id);
+    await store.dispatch("films/getFilm", params.id);
   },
   computed: {
-    ...mapState(["film"])
+    ...mapGetters({
+      film: "films/film"
+    })
   }
 };
 </script>

pages/films/index.spec.js

@@ -6,31 +6,43 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("Films page", () => {
-  let state, actions, store;
+  let state, actions, getters, store;
 
   beforeEach(() => {
     state = {
-      films: []
+      list: []
     };
     actions = {
-      getFilms: jest.fn()
+      getList: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    getters = {
+      list: jest.fn()
+    };
+    store = new Vuex.Store({
+      modules: {
+        films: {
+          namespaced: true,
+          state,
+          actions,
+          getters
+        }
+      }
+    });
   });
 
   it("should render Films page instance", () => {
-    const wrapper = mount(Films, { store, localVue });
+    const wrapper = shallowMount(Films, { store, localVue });
     expect(wrapper.find("img").exists()).toBe(true);
   });
 
-  it("should dispatch getFilms action", async () => {
+  it("should dispatch films/getList action", async () => {
     let wrapper = shallowMount(Films, {
       store,
       localVue
     });
 
     await wrapper.vm.$options.asyncData({ store });
-    expect(actions.getFilms).toHaveBeenCalled();
+    expect(actions.getList).toHaveBeenCalled();
     expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });

pages/films/index.vue

@@ -11,7 +11,7 @@
 
 <script>
 import Grid from "@/components/Grid";
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Films",
@@ -20,10 +20,12 @@ export default {
     titleTemplate: "%s - Films"
   },
   async asyncData({ store }) {
-    await store.dispatch("getFilms");
+    if (!store.state.films.list.length) await store.dispatch("films/getList");
   },
   computed: {
-    ...mapState(["films"])
+    ...mapGetters({
+      films: "films/list"
+    })
   }
 };
 </script>