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>

store/films/actions.spec.js

@@ -1,4 +1,4 @@
-import { actions } from "@/store";
+import { actions } from "./";
 import axios from "axios";
 import mockFilms from "@/test/fake-films.json";
 
@@ -14,21 +14,21 @@ jest.mock("axios", () => ({
 }));
 
 describe("Vuex actions.", () => {
-  it("tests getFilms action.", async () => {
+  it("tests films/getList action.", async () => {
     const commit = jest.fn();
 
     actions.$axios = axios;
-    await actions.getFilms({ commit });
+    await actions.getList({ commit });
 
     expect(url).toBe("/api/films");
-    expect(commit).toHaveBeenCalledWith("setFilms", mockFilms);
+    expect(commit).toHaveBeenCalledWith("setList", mockFilms);
   });
 
   it("catches errors.", async () => {
     const commit = jest.fn();
 
     actions.$axios = null;
-    await expect(actions.getFilms({ commit })).rejects.toThrow(
+    await expect(actions.getList({ commit })).rejects.toThrow(
       "API Error occurred."
     );
   });

store/films/index.js

@@ -0,0 +1,37 @@
+export const state = () => ({
+  list: [],
+  film: {}
+});
+
+export const mutations = {
+  setList: (state, films) => {
+    state.list = films;
+  },
+  setFilm: (state, film) => {
+    state.film = film;
+  }
+};
+
+export const actions = {
+  async getList({ commit }) {
+    try {
+      const films = await this.$axios.$get("/api/films");
+      commit("setList", films);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  },
+  async getFilm({ commit }, id) {
+    try {
+      const film = await this.$axios.$get(`/api/films/${id}`);
+      commit("setFilm", film);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  }
+};
+
+export const getters = {
+  list: state => state.list,
+  film: state => state.film
+};

store/films/mutations.spec.js

@@ -0,0 +1,9 @@
+import { state, mutations } from "./";
+import mockFilms from "@/test/fake-films.json";
+
+describe("Vuex mutations.", () => {
+  it("tests setFilms mutation.", () => {
+    mutations.setList(state, mockFilms);
+    expect(state.list[0].id).toBe(mockFilms[0].id);
+  });
+});

store/index.js

@@ -1,70 +1,7 @@
-export const state = () => ({
+export const state = () => ({});
-  films: [],
-  film: {},
-  location: {},
-  person: {},
-  vehicle: {}
-});
 
-export const mutations = {
+export const mutations = {};
-  setFilms: (state, films) => {
-    state.films = films;
-  },
-  setFilm: (state, film) => {
-    state.film = film;
-  },
-  setLocation: (state, location) => {
-    state.location = location;
-  },
-  setPerson: (state, person) => {
-    state.person = person;
-  },
-  setVehicle: (state, vehicle) => {
-    state.vehicle = vehicle;
-  }
-};
 
-export const actions = {
+export const actions = {};
-  async getFilms({ commit }) {
-    try {
-      const films = await this.$axios.$get("/api/films");
-      commit("setFilms", films);
-    } catch (e) {
-      throw Error("API Error occurred.");
-    }
-  },
-  async getFilm({ commit }, id) {
-    try {
-      const film = await this.$axios.$get(`/api/films/${id}`);
-      commit("setFilm", film);
-    } catch (e) {
-      throw Error("API Error occurred.");
-    }
-  },
-  async getLocation({ commit }, id) {
-    try {
-      const location = await this.$axios.$get(`/api/locations/${id}`);
-      commit("setLocation", location);
-    } catch (e) {
-      throw Error("API Error occurred.");
-    }
-  },
-  async getPerson({ commit }, id) {
-    try {
-      const person = await this.$axios.$get(`/api/people/${id}`);
-      commit("setPerson", person);
-    } catch (e) {
-      throw Error("API Error occurred.");
-    }
-  },
-  async getVehicle({ commit }, id) {
-    try {
-      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
-      commit("setVehicle", vehicle);
-    } catch (e) {
-      throw Error("API Error occurred.");
-    }
-  }
-};
 
 export const getters = {};

store/locations/index.js

@@ -0,0 +1,25 @@
+export const state = () => ({
+  location: {}
+});
+
+export const mutations = {
+  setlocation: (state, location) => {
+    state.location = location;
+  }
+};
+
+export const actions = {
+  async getLocation({ commit }, { id, callback = false }) {
+    try {
+      const location = await this.$axios.$get(`/api/locations/${id}`);
+      if (callback) return location;
+      commit("setLocation", location);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  }
+};
+
+export const getters = {
+  location: state => state.location
+};

store/mutations.spec.js

@@ -1,9 +0,0 @@
-import { state, mutations } from "@/store";
-import mockFilms from "@/test/fake-films.json";
-
-describe("Vuex mutations.", () => {
-  it("tests setFilms mutation.", () => {
-    mutations.setFilms(state, mockFilms);
-    expect(state.films[0].id).toBe(mockFilms[0].id);
-  });
-});

store/people/index.js

@@ -0,0 +1,25 @@
+export const state = () => ({
+  person: {}
+});
+
+export const mutations = {
+  setPerson: (state, person) => {
+    state.person = person;
+  }
+};
+
+export const actions = {
+  async getPerson({ commit }, { id, callback = false }) {
+    try {
+      const person = await this.$axios.$get(`/api/people/${id}`);
+      if (callback) return person;
+      commit("setPerson", person);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  }
+};
+
+export const getters = {
+  person: state => state.person
+};

store/vehicles/index.js

@@ -0,0 +1,25 @@
+export const state = () => ({
+  vehicle: {}
+});
+
+export const mutations = {
+  setVehicle: (state, vehicle) => {
+    state.vehicle = vehicle;
+  }
+};
+
+export const actions = {
+  async getvehicle({ commit }, { id, callback = false }) {
+    try {
+      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
+      if (callback) return vehicle;
+      commit("setVehicle", vehicle);
+    } catch (e) {
+      throw Error("API Error occurred.");
+    }
+  }
+};
+
+export const getters = {
+  vehicle: state => state.vehicle
+};