Merge vuex-store branch

jest.config.js

@@ -1,21 +1,18 @@
 module.exports = {
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    "^@/(.*)$": "<rootDir>/$1",
+    "^~/(.*)$": "<rootDir>/$1",
+    "^vue$": "vue/dist/vue.common.js"
   },
-  moduleFileExtensions: [
-    'js',
-    'vue',
-    'json'
-  ],
+  moduleFileExtensions: ["js", "vue", "json"],
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    "^.+\\.js$": "babel-jest",
+    ".*\\.(vue)$": "vue-jest"
   },
+  coverageDirectory: "<rootDir>/coverage",
   collectCoverage: true,
   collectCoverageFrom: [
-    '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    "<rootDir>/components/**/*.vue",
+    "<rootDir>/pages/**/*.vue"
   ]
-}
+};

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();
   });
 });

pages/films/_id.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "Film",
   head() {
@@ -18,14 +20,11 @@ export default {
     );
     return uuid.test(params.id);
   },
-  async asyncData({ $axios, params }) {
-    const film = await $axios.$get(`/api/films/${params.id}`);
-    return { film };
+  async asyncData({ params, store }) {
+    await store.dispatch("getFilm", params.id);
   },
-  data() {
-    return {
-      film: {}
-    };
+  computed: {
+    ...mapState(["film"])
   }
 };
 </script>

pages/films/index.spec.js

@@ -1,37 +1,36 @@
-import { mount, shallowMount } from "@vue/test-utils";
-import axios from "axios";
-import FilmsView from "./";
-import mockFilms from "@/test/fake-films.json";
+import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Films from "./";
 
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilms)
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe("Films page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      films: []
+    };
+    actions = {
+      getFilms: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
   it("should render Films page instance", () => {
-    const wrapper = mount(FilmsView);
+    const wrapper = mount(Films, { store, localVue });
     expect(wrapper.find("img").exists()).toBe(true);
   });
 
-  it("should get films from Ghibli API", async () => {
-    let wrapper = shallowMount(FilmsView, {
-      mocks: {
-        $axios: axios
-      }
-    });
-
-    expect((await wrapper.vm.$options.asyncData(wrapper.vm)).films).toEqual(
-      mockFilms
-    );
-
-    // Init page with mocked asyncData
-    wrapper = shallowMount(FilmsView, {
-      mocks: {
-        films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
-        $axios: axios
-      }
+  it("should dispatch getFilms action", async () => {
+    let wrapper = shallowMount(Films, {
+      store,
+      localVue
     });
 
+    await wrapper.vm.$options.asyncData({ store });
+    expect(actions.getFilms).toHaveBeenCalled();
     expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });

pages/films/index.vue

@@ -11,6 +11,7 @@
 
 <script>
 import Grid from "@/components/Grid";
+import { mapState } from "vuex";
 
 export default {
   name: "Films",
@@ -18,14 +19,11 @@ export default {
   head: {
     titleTemplate: "%s - Films"
   },
-  async asyncData({ $axios }) {
-    const films = await $axios.$get("/api/films");
-    return { films };
+  async asyncData({ store }) {
+    await store.dispatch("getFilms");
   },
-  data() {
-    return {
-      films: []
-    };
+  computed: {
+    ...mapState(["films"])
   }
 };
 </script>

store/index.js

@@ -0,0 +1,34 @@
+export const state = () => ({
+  films: [],
+  film: {}
+});
+
+export const mutations = {
+  setFilms: (state, films) => {
+    state.films = films;
+  },
+  setFilm: (state, film) => {
+    state.film = film;
+  }
+};
+
+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.");
+    }
+  }
+};
+
+export const getters = {};

test/actions.spec.js

@@ -0,0 +1,35 @@
+import { actions, mutations } from "@/store";
+import axios from "axios";
+import mockFilms from "@/test/fake-films.json";
+
+let url = "";
+
+jest.mock("axios", () => ({
+  $get: _url => {
+    return new Promise(resolve => {
+      url = _url;
+      resolve(mockFilms);
+    });
+  }
+}));
+
+describe("Vuex actions.", () => {
+  it("tests getFilms action.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = axios;
+    await actions.getFilms({ commit });
+
+    expect(url).toBe("/api/films");
+    expect(commit).toHaveBeenCalledWith("setFilms", mockFilms);
+  });
+
+  it("catches errors.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = null;
+    await expect(actions.getFilms({ commit })).rejects.toThrow(
+      "API Error occurred."
+    );
+  });
+});

test/mutations.spec.js

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