Basic design for Film detail page

components/Film/Film.spec.js

@@ -24,7 +24,7 @@ describe("Film", () => {
     });
 
     expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
-      `/film/${mockFilms[0].id}`
+      `/films/${mockFilms[0].id}`
     );
   });
 });

components/Film/index.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+    class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
   >
     <header class="p-4 rounded-t-md">
       <h1>
@@ -28,7 +28,7 @@
       </p>
       <router-link
         class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
-        :to="`/film/${film.id}`"
+        :to="`/films/${film.id}`"
         tag="button"
       >
         Read more
@@ -56,6 +56,19 @@ export default {
 </script>
 
 <style lang="css" scoped>
+@media screen and (min-width: 640px) {
+  .film {
+    margin: 1rem;
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .film {
+    flex: 1 1 calc(33% - 2rem);
+  }
+}
+
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);

components/Footer/Footer.spec.js

@@ -0,0 +1,9 @@
+import { mount } from "@vue/test-utils";
+import Footer from "./";
+
+describe("Footer", () => {
+  it("should render Footer instance", () => {
+    const wrapper = mount(Footer);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

components/Grid/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap justify-center">
     <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>

components/Header.vue

@@ -1,23 +0,0 @@
-<template>
-  <header
-    id="header"
-    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md"
-  >
-    <router-link to="/" class="flex w-auto h-full items-center">
-      <img
-        class="h-full mr-4"
-        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
-        alt="PeopleDoc - Icon"
-      />
-      <h1 class="text-2xl font-light tracking-wide">Ghibli</h1>
-    </router-link>
-  </header>
-</template>
-
-<script>
-export default {
-  name: "Header"
-};
-</script>
-
-<style></style>

components/Header/Header.spec.js

@@ -1,10 +1,10 @@
 import { mount, RouterLinkStub } from "@vue/test-utils";
-import Header from "@/components/Header";
+import Header from "./";
 
 describe("Header", () => {
   it("should render Header instance", () => {
     const wrapper = mount(Header, { stubs: ["router-link"] });
-    expect(wrapper.find("h1").text()).toBe("Ghibli");
+    expect(wrapper.find("h1").text()).toBe("PeopleDoc");
   });
 
   it("should redirect to Home page when clicking on brand logo", () => {

components/Header/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <header
+    id="header"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 md:px-8 py-3 shadow-md flex items-center justify-between"
+  >
+    <router-link to="/" class="flex w-auto h-full items-center">
+      <img
+        class="h-full mr-4"
+        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
+        alt="PeopleDoc - Icon"
+      />
+      <h1 class="text-2xl font-light tracking-wide">PeopleDoc</h1>
+    </router-link>
+    <h2 class="font-medium hidden sm:block">{{ description }}</h2>
+  </header>
+</template>
+
+<script>
+import pkg from "@/package.json";
+
+export default {
+  name: "Header",
+  computed: {
+    description: function() {
+      return pkg.description;
+    }
+  }
+};
+</script>
+
+<style></style>

jest.config.js

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

pages/films/_id.spec.js

@@ -0,0 +1,81 @@
+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",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Film page", () => {
+  let state, actions, getters, store;
+
+  beforeEach(() => {
+    state = {
+      film: {}
+    };
+    actions = {
+      getFilm: jest.fn(),
+      getPeople: jest.fn(),
+      getVehicles: jest.fn(),
+      getLocations: jest.fn()
+    };
+    getters = {
+      film: jest.fn()
+    };
+    store = new Vuex.Store({
+      modules: {
+        films: {
+          namespaced: true,
+          state,
+          actions,
+          getters
+        }
+      }
+    });
+  });
+
+  it("should render Film page instance", () => {
+    const wrapper = mount(Film, {
+      localVue,
+      store,
+      computed: {
+        film: () => mockFilms[0]
+      }
+    });
+    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 dispatch getFilm action", async () => {
+    let wrapper = mount(Film, {
+      localVue,
+      store,
+      computed: {
+        film: () => mockFilms[0]
+      }
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getFilm).toHaveBeenCalled();
+  });
+});

pages/films/_id.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
+    <article
+      class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+    >
+      <header class="p-4 rounded-t-md">
+        <h1>
+          {{ film.title + " (" + film.release_date + ")" }}
+        </h1>
+        <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
+      </header>
+
+      <section class="px-4 infos">
+        <p>{{ film.description }}</p>
+        <p
+          class="film-score font-bold text-lg"
+          :class="{
+            'text-green-600': film.rt_score >= 75,
+            'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
+            'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
+            'text-red-600': film.rt_score >= 0 && film.rt_score < 25
+          }"
+        >
+          {{ film.rt_score + "%" }}
+        </p>
+      </section>
+    </article>
+
+    <aside class="w-full lg:ml-4">
+      <section
+        class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg">People</h3>
+        <div>{{ film.people }}</div>
+      </section>
+
+      <section
+        class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg">Vehicles</h3>
+        <div>{{ film.vehicles }}</div>
+      </section>
+
+      <section
+        class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg">Locations</h3>
+        <div>{{ film.locations }}</div>
+      </section>
+    </aside>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Film",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.film.title}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    if (!store.state.films.film.id !== params.id)
+      await store.dispatch("films/getFilm", params.id);
+  },
+  computed: {
+    ...mapGetters({
+      film: "films/film"
+    })
+  },
+  async mounted() {
+    await this.$store.dispatch("films/getPeople");
+    await this.$store.dispatch("films/getVehicles");
+    await this.$store.dispatch("films/getLocations");
+  }
+};
+</script>
+
+<style lang="css">
+article header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+
+.film-score::before {
+  content: "";
+  background: url(~assets/svg/rotten-tomatoes.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-block;
+  vertical-align: sub;
+  margin-right: 0.5rem;
+}
+</style>

pages/films/index.spec.js

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

pages/films/index.vue

@@ -1,14 +1,17 @@
 <template>
   <section class="py-4">
-    <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
+    <img
-      Ghibli films
+      class="w-full max-w-md mx-auto mb-8"
-    </h2>
+      src="~/assets/images/logo.png"
+      alt="Studio Ghibli"
+    />
     <Grid :dataSource="films" />
   </section>
 </template>
 
 <script>
 import Grid from "@/components/Grid";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Films",
@@ -16,14 +19,13 @@ export default {
   head: {
     titleTemplate: "%s - Films"
   },
-  async asyncData({ $axios }) {
+  async asyncData({ store }) {
-    const films = await $axios.$get("/api/films");
+    if (!store.state.films.list.length) await store.dispatch("films/getList");
-    return { films };
   },
-  data() {
+  computed: {
-    return {
+    ...mapGetters({
-      films: []
+      films: "films/list"
-    };
+    })
   }
 };
 </script>

pages/locations/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Location from "./_id";
+
+let $route = {
+  path: "/locations",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Location page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      location: {}
+    };
+    actions = {
+      getLocation: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Location page instance", () => {
+    const wrapper = mount(Location, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Location.validate({ params: $route.params })).toBe(true);
+    expect(
+      Location.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Location.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getLocation action", async () => {
+    let wrapper = mount(Location, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getLocation).toHaveBeenCalled();
+  });
+});

pages/locations/_id.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    {{ location }}
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Location",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.location.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getLocation", params.id);
+  },
+  computed: {
+    ...mapState(["location"])
+  }
+};
+</script>
+
+<style></style>

pages/people/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Person from "./_id";
+
+let $route = {
+  path: "/people",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Person page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      person: {}
+    };
+    actions = {
+      getPerson: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Person page instance", () => {
+    const wrapper = mount(Person, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Person.validate({ params: $route.params })).toBe(true);
+    expect(
+      Person.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Person.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getPerson action", async () => {
+    let wrapper = mount(Person, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getPerson).toHaveBeenCalled();
+  });
+});

pages/people/_id.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    {{ person }}
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Person",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.person.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getPerson", params.id);
+  },
+  computed: {
+    ...mapState(["person"])
+  }
+};
+</script>
+
+<style></style>

pages/vehicles/_id.spec.js

@@ -0,0 +1,56 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Vehicle from "./_id";
+
+let $route = {
+  path: "/vehicles",
+  params: {
+    id: "2baf70d1-42bb-4437-b551-e5fed5a87abe"
+  }
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Vehicle page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      vehicle: {}
+    };
+    actions = {
+      getVehicle: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
+  it("should render Vehicle page instance", () => {
+    const wrapper = mount(Vehicle, { localVue, store });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("tests params validation", () => {
+    expect(Vehicle.validate({ params: $route.params })).toBe(true);
+    expect(
+      Vehicle.validate({
+        params: { id: "2baf70d1-42bb-4437-b551-e5fed5a87abe-1234" }
+      })
+    ).toBe(false);
+    expect(
+      Vehicle.validate({
+        params: { id: "2baf7e0d1-42bb-4437-b551-e5fed5a87abe" }
+      })
+    ).toBe(false);
+  });
+
+  it("should dispatch getVehicle action", async () => {
+    let wrapper = mount(Vehicle, {
+      localVue,
+      store
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getVehicle).toHaveBeenCalled();
+  });
+});

pages/vehicles/_id.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    {{ vehicle }}
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Vehicle",
+  head() {
+    return {
+      titleTemplate: `%s - ${this.vehicle.name}`
+    };
+  },
+  validate({ params }) {
+    const uuid = new RegExp(
+      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
+    );
+    return uuid.test(params.id);
+  },
+  async asyncData({ params, store }) {
+    await store.dispatch("getVehicle", params.id);
+  },
+  computed: {
+    ...mapState(["vehicle"])
+  }
+};
+</script>
+
+<style></style>

store/films/actions.spec.js

@@ -0,0 +1,35 @@
+import { actions } from "./";
+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 films/getList action.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = axios;
+    await actions.getList({ commit });
+
+    expect(url).toBe("/api/films");
+    expect(commit).toHaveBeenCalledWith("setList", mockFilms);
+  });
+
+  it("catches errors.", async () => {
+    const commit = jest.fn();
+
+    actions.$axios = null;
+    await expect(actions.getList({ commit })).rejects.toThrow(
+      "API Error occurred: Cannot read property '$get' of null"
+    );
+  });
+});

store/films/index.js

@@ -0,0 +1,112 @@
+export const state = () => ({
+  list: [],
+  film: {}
+});
+
+export const mutations = {
+  setList: (state, films) => {
+    state.list = films;
+  },
+  setFilm: (state, film) => {
+    state.film = film;
+  },
+  setPeople: (state, people) => {
+    state.film.people = people;
+  },
+  setVehicles: (state, vehicles) => {
+    state.film.vehicles = vehicles;
+  },
+  setLocations: (state, locations) => {
+    state.film.locations = locations;
+  }
+};
+
+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: ${e.message}`);
+    }
+  },
+  async getFilm({ commit }, id) {
+    try {
+      const film = await this.$axios.$get(`/api/films/${id}`);
+      commit("setFilm", film);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getPeople({ commit, dispatch, state }) {
+    let people = {};
+    try {
+      if (state.film.people[0].split("/")[4] !== "") {
+        const promises = state.film.people.map(async person => {
+          const id = person.split("/")[4];
+          return await dispatch(
+            "people/getPerson",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        people = await Promise.all(promises);
+      }
+      commit("setPeople", people);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getVehicles({ commit, dispatch, state }) {
+    let vehicles = {};
+    try {
+      if (state.film.vehicles[0].split("/")[4] !== "") {
+        const promises = state.film.vehicles.map(async vehicle => {
+          const id = vehicle.split("/")[4];
+          return await dispatch(
+            "vehicles/getVehicle",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        vehicles = await Promise.all(promises);
+      }
+      commit("setVehicles", vehicles);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getLocations({ commit, dispatch, state }) {
+    let locations = {};
+    try {
+      if (state.film.locations[0].split("/")[4] !== "") {
+        const promises = state.film.locations.map(async location => {
+          const id = location.split("/")[4];
+          return await dispatch(
+            "locations/getLocation",
+            {
+              id: id,
+              callback: true
+            },
+            { root: true }
+          );
+        });
+        locations = await Promise.all(promises);
+      }
+      commit("setLocations", locations);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  }
+};
+
+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

@@ -0,0 +1,7 @@
+export const state = () => ({});
+
+export const mutations = {};
+
+export const actions = {};
+
+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: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  location: state => state.location
+};

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: ${e.message}`);
+    }
+  }
+};
+
+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: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  vehicle: state => state.vehicle
+};

test/index.spec.js

@@ -1,37 +0,0 @@
-import { mount, shallowMount } from "@vue/test-utils";
-import axios from "axios";
-import FilmsView from "@/pages/films";
-import mockFilms from "./fake-films.json";
-
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilms)
-}));
-
-describe("Films page", () => {
-  it("should render Films page instance", () => {
-    const wrapper = mount(FilmsView);
-    expect(wrapper.find("h2").text()).toBe("Ghibli films");
-  });
-
-  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
-      }
-    });
-
-    expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
-  });
-});