Create Vehicle page layout

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

@@ -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

components/Location/Location.spec.js

@@ -0,0 +1,30 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Location from "./";
+import mockLocation from "@/test/fake-locations.json";
+
+describe("Location", () => {
+  it("tests props", () => {
+    expect(Location.props).toMatchObject({
+      location: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    });
+  });
+
+  it("renders proper link to details", () => {
+    const wrapper = mount(Location, {
+      propsData: {
+        location: mockLocation[0]
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
+      `/locations/${mockLocation[0].id}`
+    );
+  });
+});

components/Location/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <router-link
+    class="location flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
+    :to="`/locations/${location.id}`"
+    tag="article"
+  >
+    <span class="mr-2 text-sm rounded-xl px-2 py-1">{{
+      location.terrain
+    }}</span>
+    <h4>{{ location.name }}</h4>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "Location",
+  props: {
+    location: {
+      type: Object,
+      default: {},
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped></style>

components/Person/Person.spec.js

@@ -0,0 +1,30 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Person from "./";
+import mockPeople from "@/test/fake-people.json";
+
+describe("Person", () => {
+  it("tests props", () => {
+    expect(Person.props).toMatchObject({
+      person: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    });
+  });
+
+  it("renders proper link to details", () => {
+    const wrapper = mount(Person, {
+      propsData: {
+        person: mockPeople[0]
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
+      `/people/${mockPeople[0].id}`
+    );
+  });
+});

components/Person/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <router-link
+    class="person flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
+    :to="`/people/${person.id}`"
+    tag="article"
+  >
+    <span class="mr-2 text-xl font-bold">{{
+      person.gender === "Female" ? "&#9792;" : "&#9794;"
+    }}</span>
+    <h4>{{ person.name }}</h4>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "Person",
+  props: {
+    person: {
+      type: Object,
+      default: {},
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped></style>

components/Vehicle/Vehicle.spec.js

@@ -0,0 +1,30 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Vehicle from "./";
+import mockVehicles from "@/test/fake-vehicles.json";
+
+describe("Vehicle", () => {
+  it("tests props", () => {
+    expect(Vehicle.props).toMatchObject({
+      vehicle: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    });
+  });
+
+  it("renders proper link to details", () => {
+    const wrapper = mount(Vehicle, {
+      propsData: {
+        vehicle: mockVehicles[0]
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
+      `/vehicles/${mockVehicles[0].id}`
+    );
+  });
+});

components/Vehicle/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <router-link
+    class="vehicle flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
+    :to="`/vehicles/${vehicle.id}`"
+    tag="article"
+  >
+    <span
+      class="mr-2 text-sm rounded-xl px-2 py-1"
+      :class="{
+        'bg-teal-400': vehicle.vehicle_class === 'Airship',
+        'bg-red-400': vehicle.vehicle_class === 'Airplane',
+        'bg-orange-400': vehicle.vehicle_class === 'Boat'
+      }"
+      >{{ vehicle.vehicle_class }}</span
+    >
+    <h4>{{ vehicle.name }}</h4>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "Vehicle",
+  props: {
+    vehicle: {
+      type: Object,
+      default: {},
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped></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"
   ]
-}
+};

layouts/default.vue

@@ -10,7 +10,17 @@
 
 <script>
 export default {
-  middleware: ["redirect"]
+  middleware: ["redirect"],
+  fetchOnServer: false,
+  async fetch() {
+    const { store } = this.$nuxt.context;
+    if (!store.state.films.list.length) await store.dispatch("films/getList");
+    if (!store.state.people.list.length) await store.dispatch("people/getList");
+    if (!store.state.vehicles.list.length)
+      await store.dispatch("vehicles/getList");
+    if (!store.state.locations.list.length)
+      await store.dispatch("locations/getList");
+  }
 };
 </script>
 
@@ -33,4 +43,8 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+
+main {
+  min-height: calc(100vh - 64px * 2);
+}
 </style>

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, store;
+
+  beforeEach(() => {
+    state = {
+      film: {}
+    };
+    actions = {
+      getFilm: jest.fn()
+    };
+
+    store = new Vuex.Store({
+      modules: {
+        films: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
+  });
+
+  it("should render Film page instance", () => {
+    const wrapper = mount(Film, {
+      localVue,
+      store,
+      computed: {
+        film: () => mockFilms[0],
+        people: () => jest.fn(),
+        vehicles: () => jest.fn(),
+        locations: () => jest.fn()
+      }
+    });
+    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],
+        people: () => jest.fn(),
+        vehicles: () => jest.fn(),
+        locations: () => jest.fn()
+      }
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getFilm).toHaveBeenCalled();
+  });
+});

pages/films/_id.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
+  >
+    <article
+      class="mb-4 inline-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="lg:inline-flex lg:ml-4">
+      <section
+        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg mb-4">People</h3>
+        <ul v-if="people.length">
+          <li :key="person.id" v-for="person in people">
+            <Person :person="person" />
+          </li>
+        </ul>
+      </section>
+
+      <section
+        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg mb-4">Vehicles</h3>
+        <ul v-if="vehicles.length">
+          <li :key="vehicle.id" v-for="vehicle in vehicles">
+            <Vehicle :vehicle="vehicle" />
+          </li>
+        </ul>
+      </section>
+
+      <section
+        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      >
+        <h3 class="font-medium text-lg">Locations</h3>
+        <ul v-if="locations.length">
+          <li :key="location.id" v-for="location in locations">
+            <Location :location="location" />
+          </li>
+        </ul>
+      </section>
+    </aside>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Film",
+  components: {
+    Person: () => import("@/components/Person"),
+    Vehicle: () => import("@/components/Vehicle"),
+    Location: () => import("@/components/Location")
+  },
+  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: {
+    people() {
+      return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
+    },
+    vehicles() {
+      return this.$store.getters["vehicles/getVehiclesByFilmId"](this.film.id);
+    },
+    locations() {
+      return this.$store.getters["locations/getLocationsByFilmId"](
+        this.film.id
+      );
+    },
+    ...mapGetters({
+      film: "films/film"
+    })
+  }
+};
+</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 { 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

@@ -11,6 +11,7 @@
 
 <script>
 import Grid from "@/components/Grid";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Films",
@@ -18,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,74 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Location from "./_id";
+import mockLocations from "@/test/fake-locations.json";
+
+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({
+      modules: {
+        locations: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
+  });
+
+  it("should render Location page instance", () => {
+    const wrapper = mount(Location, {
+      localVue,
+      store,
+      computed: {
+        location: () => mockLocations[0]
+      }
+    });
+    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,
+      computed: {
+        location: () => mockLocations[0]
+      }
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getLocation).toHaveBeenCalled();
+  });
+});

pages/locations/_id.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    {{ location }}
+  </div>
+</template>
+
+<script>
+import { mapGetters } 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 }) {
+    if (!store.state.locations.location.id !== params.id)
+      await store.dispatch("locations/getLocation", params.id);
+  },
+  computed: {
+    ...mapGetters({
+      location: "locations/location"
+    })
+  }
+};
+</script>
+
+<style></style>

pages/people/_id.spec.js

@@ -0,0 +1,74 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Person from "./_id";
+import mockPeople from "@/test/fake-people.json";
+
+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({
+      modules: {
+        people: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
+  });
+
+  it("should render Person page instance", () => {
+    const wrapper = mount(Person, {
+      localVue,
+      store,
+      computed: {
+        person: () => mockPeople[0]
+      }
+    });
+    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,
+      computed: {
+        person: () => mockPeople[0]
+      }
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getPerson).toHaveBeenCalled();
+  });
+});

pages/people/_id.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    {{ person }}
+  </div>
+</template>
+
+<script>
+import { mapGetters } 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 }) {
+    if (!store.state.people.person.id !== params.id)
+      await store.dispatch("people/getPerson", params.id);
+  },
+  computed: {
+    ...mapGetters({
+      person: "people/person"
+    })
+  }
+};
+</script>
+
+<style></style>

pages/vehicles/_id.spec.js

@@ -0,0 +1,82 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Vehicle from "./_id";
+import mockVehicles from "@/test/fake-vehicles.json";
+import mockPeople from "@/test/fake-people.json";
+import mockFilms from "@/test/fake-films.json";
+
+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({
+      modules: {
+        vehicles: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
+  });
+
+  it("should render Vehicle page instance", () => {
+    const wrapper = mount(Vehicle, {
+      localVue,
+      store,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => mockPeople[0],
+        film: () => mockFilms[0]
+      },
+      stubs: ["nuxt-link"]
+    });
+    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,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => jest.fn(),
+        film: () => jest.fn()
+      },
+      stubs: ["nuxt-link"]
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getVehicle).toHaveBeenCalled();
+  });
+});

pages/vehicles/_id.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
+  >
+    <article
+      class="mb-4 inline-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>
+          {{ vehicle.name + " (" + vehicle.vehicle_class + ")" }}
+        </h1>
+        <h2 class="text-gray-700 mt-0" v-if="pilot">
+          piloted by
+          <nuxt-link
+            :to="`/people/${pilot.id}`"
+            class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+          >
+            {{ pilot.name }}
+          </nuxt-link>
+        </h2>
+      </header>
+
+      <section class="px-4 pb-4 infos">
+        <p>{{ vehicle.description }}</p>
+
+        <h3>
+          Appears in
+        </h3>
+        <nuxt-link
+          v-if="film"
+          :to="`/films/${film.id}`"
+          class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+        >
+          {{ film.title }}
+        </nuxt-link>
+      </section>
+    </article>
+  </div>
+</template>
+
+<script>
+import { mapGetters } 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 }) {
+    if (!store.state.vehicles.vehicle.id !== params.id)
+      await store.dispatch("vehicles/getVehicle", params.id);
+  },
+  computed: {
+    pilot: function() {
+      return this.$store.getters["vehicles/getPilot"];
+    },
+    film: function() {
+      return this.$store.getters["vehicles/getFilm"];
+    },
+    ...mapGetters({
+      vehicle: "vehicles/vehicle"
+    })
+  }
+};
+</script>
+
+<style lang="css" scoped>
+article header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+</style>

store/films/actions.spec.js

@@ -0,0 +1,37 @@
+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?fields=id,title,release_date,director,description,rt_score"
+    );
+    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,41 @@
+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?fields=id,title,release_date,director,description,rt_score"
+      );
+      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}?fields=id,title,release_date,director,description,rt_score`
+      );
+      commit("setFilm", film);
+    } 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,44 @@
+export const state = () => ({
+  list: [],
+  location: {}
+});
+
+export const mutations = {
+  setList: (state, locations) => {
+    state.list = locations;
+  },
+  setLocation: (state, location) => {
+    state.location = location;
+  }
+};
+
+export const actions = {
+  async getList({ commit }) {
+    try {
+      const locations = await this.$axios.$get(
+        "/api/locations?fields=id,name,climate,terrain,surface_water,residents,films"
+      );
+      commit("setList", locations);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getLocation({ commit }, id) {
+    try {
+      const location = await this.$axios.$get(`/api/locations/${id}`);
+      commit("setLocation", location);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  list: state => state.list,
+  location: state => state.location,
+  getLocationsByFilmId: state => id => {
+    return state.list.filter(location =>
+      location.films.find(film => film.split("/")[4] === id)
+    );
+  }
+};

store/people/index.js

@@ -0,0 +1,46 @@
+export const state = () => ({
+  list: [],
+  person: {}
+});
+
+export const mutations = {
+  setList: (state, people) => {
+    state.list = people;
+  },
+  setPerson: (state, person) => {
+    state.person = person;
+  }
+};
+
+export const actions = {
+  async getList({ commit }) {
+    try {
+      const people = await this.$axios.$get(
+        "/api/people?fields=id,name,gender,age,eye_color,hair_color,films"
+      );
+      commit("setList", people);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getPerson({ commit }, id) {
+    try {
+      const person = await this.$axios.$get(
+        `/api/people/${id}?fields=id,name,gender,age,eye_color,hair_color,films`
+      );
+      commit("setPerson", person);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  list: state => state.list,
+  person: state => state.person,
+  getPeopleByFilmId: state => id => {
+    return state.list.filter(person =>
+      person.films.find(film => film.split("/")[4] === id)
+    );
+  }
+};

store/vehicles/index.js

@@ -0,0 +1,54 @@
+export const state = () => ({
+  list: [],
+  vehicle: {}
+});
+
+export const mutations = {
+  setList: (state, vehicles) => {
+    state.list = vehicles;
+  },
+  setVehicle: (state, vehicle) => {
+    state.vehicle = vehicle;
+  }
+};
+
+export const actions = {
+  async getList({ commit }) {
+    try {
+      const vehicles = await this.$axios.$get(
+        "/api/vehicles?fields=id,name,description,vehicle_class,length,pilot,films"
+      );
+      commit("setList", vehicles);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  },
+  async getVehicle({ commit }, id) {
+    try {
+      const vehicle = await this.$axios.$get(
+        `/api/vehicles/${id}?fields=id,name,description,vehicle_class,length,pilot,films`
+      );
+      commit("setVehicle", vehicle);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  list: state => state.list,
+  vehicle: state => state.vehicle,
+  getVehiclesByFilmId: state => id => {
+    return state.list.filter(vehicle => vehicle.films.split("/")[4] === id);
+  },
+  getPilot: (state, getters, rootState) => {
+    return rootState.people.list.find(
+      people => people.id === state.vehicle.pilot.split("/")[4]
+    );
+  },
+  getFilm: (state, getters, rootState) => {
+    return rootState.films.list.find(
+      film => film.id === state.vehicle.films.split("/")[4]
+    );
+  }
+};

test/fake-locations.json

@@ -0,0 +1,391 @@
+[
+  {
+    "id": "11014596-71b0-4b3e-b8c0-1c4b15f28b9a",
+    "name": "Irontown",
+    "climate": "Continental",
+    "terrain": "Mountain",
+    "surface_water": "40",
+    "residents": [
+      "https://ghibliapi.herokuapp.com/people/ba924631-068e-4436-b6de-f3283fa848f0",
+      "https://ghibliapi.herokuapp.com/people/030555b3-4c92-4fce-93fb-e70c3ae3df8b"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/11014596-71b0-4b3e-b8c0-1c4b15f28b9a"
+    ]
+  },
+  {
+    "id": "64a996aa-481e-4627-9624-ab23f59a05a9",
+    "name": "Gutiokipanja",
+    "climate": "Continental",
+    "terrain": "Hill",
+    "surface_water": "50",
+    "residents": [
+      "https://ghibliapi.herokuapp.com/people/ba924631-068e-4436-b6de-f3283fa848f0",
+      "https://ghibliapi.herokuapp.com/people/030555b3-4c92-4fce-93fb-e70c3ae3df8b"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/64a996aa-481e-4627-9624-ab23f59a05a9"
+    ]
+  },
+  {
+    "id": "a8bd9c03-7c80-4a97-b7c0-6a668acaf576",
+    "name": "The Cat Kingdom",
+    "climate": "Continental",
+    "terrain": "Plain",
+    "surface_water": "30",
+    "residents": [
+      "https://ghibliapi.herokuapp.com/people/6b3facea-ea33-47b1-96ce-3fc737b119b8",
+      "https://ghibliapi.herokuapp.com/people/3042818d-a8bb-4cba-8180-c19249822d57",
+      "https://ghibliapi.herokuapp.com/people/58d1973f-f247-47d7-9358-e56cb0d2b5a6",
+      "https://ghibliapi.herokuapp.com/people/a3d8e70f-46a0-4e5a-b850-db01620d6b92",
+      "https://ghibliapi.herokuapp.com/people/fc196c4f-0201-4ed2-9add-c6403f7c4d32"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/a8bd9c03-7c80-4a97-b7c0-6a668acaf576"
+    ]
+  },
+  {
+    "id": "56e423c4-d9a1-44c4-8bdb-1cab45fbf63e",
+    "name": "The Marsh House",
+    "climate": "Mild",
+    "terrain": "Marsh",
+    "surface_water": "60",
+    "residents": [],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/5fdfb320-2a02-49a7-94ff-5ca418cae602"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/56e423c4-d9a1-44c4-8bdb-1cab45fbf63e"
+    ]
+  },
+  {
+    "id": "660c8c91-bd92-43db-b475-b2df6ca96fec",
+    "name": "Hospital",
+    "climate": "Continental",
+    "terrain": "Hill",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/660c8c91-bd92-43db-b475-b2df6ca96fec"
+    ]
+  },
+  {
+    "id": "6ba60a86-7c74-4ec4-a6f4-7112b5705a2f",
+    "name": "Gondoa",
+    "climate": "TODO",
+    "terrain": "TODO",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/6ba60a86-7c74-4ec4-a6f4-7112b5705a2f"
+    ]
+  },
+  {
+    "id": "fb083a4e-77b2-4623-a2e0-6bbca5bfd5b2",
+    "name": "Ursula's Log Cabin",
+    "climate": "TODO",
+    "terrain": "TODO",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ea660b10-85c4-4ae3-8a5f-41cea3648e3e"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/fb083a4e-77b2-4623-a2e0-6bbca5bfd5b2"
+    ]
+  },
+  {
+    "id": "a072ec53-0467-4fac-864f-df234f9c4315",
+    "name": "Zeniba's Cottage",
+    "climate": "TODO",
+    "terrain": "TODO",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/dc2e6bd1-8156-4886-adff-b39e6043af0c"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/a072ec53-0467-4fac-864f-df234f9c4315"
+    ]
+  },
+  {
+    "id": "682df5c3-b09e-46af-94d1-ae0d17f9b4b6",
+    "name": "Bamboo Forest",
+    "climate": "Tropical",
+    "terrain": "Forest",
+    "surface_water": "10",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/45204234-adfd-45cb-a505-a8e7a676b114",
+      "https://ghibliapi.herokuapp.com/films/578ae244-7750-4d9f-867b-f3cd3d6fecf4"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/682df5c3-b09e-46af-94d1-ae0d17f9b4b6"
+    ]
+  },
+  {
+    "id": "26361a2c-32c6-4bd5-ae9c-8e40e17ae28d",
+    "name": "Pazu's Mines",
+    "climate": "Dry",
+    "terrain": "Hill",
+    "surface_water": "0",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/26361a2c-32c6-4bd5-ae9c-8e40e17ae28d"
+    ]
+  },
+  {
+    "id": "42f787d8-1fcb-4d3d-82f2-a74409869368",
+    "name": "Shizuku's Apartment",
+    "climate": "Continental",
+    "terrain": "City",
+    "surface_water": "0",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ff24da26-a969-4f0e-ba1e-a122ead6c6e3"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/42f787d8-1fcb-4d3d-82f2-a74409869368"
+    ]
+  },
+  {
+    "id": "0fafa7a3-64c1-43fe-881b-ecb605c01e09",
+    "name": "Laputa",
+    "climate": "Continental",
+    "terrain": "City",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/0fafa7a3-64c1-43fe-881b-ecb605c01e09"
+    ]
+  },
+  {
+    "id": "0132f7f6-fd52-4ac3-b5df-c96b609f77b6",
+    "name": "Tedis",
+    "climate": "Continental",
+    "terrain": "Hill",
+    "surface_water": "30",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/0132f7f6-fd52-4ac3-b5df-c96b609f77b6"
+    ]
+  },
+  {
+    "id": "c57fb2cb-ea85-4d73-8808-cf5dcd28c22e",
+    "name": "Koriko",
+    "climate": "Mild",
+    "terrain": "Hill",
+    "surface_water": "50",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ea660b10-85c4-4ae3-8a5f-41cea3648e3e"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/c57fb2cb-ea85-4d73-8808-cf5dcd28c22e"
+    ]
+  },
+  {
+    "id": "615aa48d-8673-4117-b35a-79cb67af1897",
+    "name": "Forest",
+    "climate": "Tropical",
+    "terrain": "Forest",
+    "surface_water": "60",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/615aa48d-8673-4117-b35a-79cb67af1897"
+    ]
+  },
+  {
+    "id": "37d13a96-a03a-451d-8871-80be0495486e",
+    "name": "Bathhouse",
+    "climate": "Continental",
+    "terrain": "River",
+    "surface_water": "70",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/dc2e6bd1-8156-4886-adff-b39e6043af0c"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/37d13a96-a03a-451d-8871-80be0495486e"
+    ]
+  },
+  {
+    "id": "6fc21b76-78fb-4451-98f7-857e32a23e85",
+    "name": "Matsugo",
+    "climate": "Continental",
+    "terrain": "River",
+    "surface_water": "60",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/6fc21b76-78fb-4451-98f7-857e32a23e85"
+    ]
+  },
+  {
+    "id": "dbeeaecb-7817-4b8b-90ca-edc432d3033e",
+    "name": "Taeko's House",
+    "climate": "Continental",
+    "terrain": "River",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/4e236f34-b981-41c3-8c65-f8c9000b94e7"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/dbeeaecb-7817-4b8b-90ca-edc432d3033e"
+    ]
+  },
+  {
+    "id": "34df8f25-8f80-4823-8f01-bf9852039987",
+    "name": "Piccolo S.P.A.",
+    "climate": "Continental",
+    "terrain": "River",
+    "surface_water": "40",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ebbb6b7c-945c-41ee-a792-de0e43191bd8"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/34df8f25-8f80-4823-8f01-bf9852039987"
+    ]
+  },
+  {
+    "id": "62346d33-caa0-4c17-8016-0aca56f3066b",
+    "name": "Karikiya",
+    "climate": "Mild",
+    "terrain": "City",
+    "surface_water": "30",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ea660b10-85c4-4ae3-8a5f-41cea3648e3e"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/62346d33-caa0-4c17-8016-0aca56f3066b"
+    ]
+  },
+  {
+    "id": "ee897b2a-405e-42b9-bff4-8b51b0f03cab",
+    "name": "Satsuki's School House",
+    "climate": "Mild",
+    "terrain": "River",
+    "surface_water": "60",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/ee897b2a-405e-42b9-bff4-8b51b0f03cab"
+    ]
+  },
+  {
+    "id": "90241c46-d4be-411f-b00a-7561b9dda7b6",
+    "name": "Fujimoto's Underwater Harbor",
+    "climate": "Wet",
+    "terrain": "Ocean",
+    "surface_water": "100",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/758bf02e-3122-46e0-884e-67cf83df1786"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/90241c46-d4be-411f-b00a-7561b9dda7b6"
+    ]
+  },
+  {
+    "id": "469b14bd-5565-4436-bbed-c2036f42cc99",
+    "name": "Himawari Nursery School",
+    "climate": "Mild",
+    "terrain": "Ocean",
+    "surface_water": "50",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/758bf02e-3122-46e0-884e-67cf83df1786"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/469b14bd-5565-4436-bbed-c2036f42cc99"
+    ]
+  },
+  {
+    "id": "b6bac992-a858-4d57-8477-9652d73caaa1",
+    "name": "Ingary",
+    "climate": "Mild",
+    "terrain": "Hill",
+    "surface_water": "30",
+    "residents": [
+      "TODO"
+    ],
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/cd3d059c-09f4-4ff3-8d63-bc765a5184fa"
+    ],
+    "url": [
+      "https://ghibliapi.herokuapp.com/locations/b6bac992-a858-4d57-8477-9652d73caaa1"
+    ]
+  }
+]

test/fake-people.json

@@ -0,0 +1,563 @@
+[
+  {
+    "id": "fe93adf2-2f3a-4ec4-9f68-5422f1b87c01",
+    "name": "Pazu",
+    "gender": "Male",
+    "age": "13",
+    "eye_color": "Black",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/fe93adf2-2f3a-4ec4-9f68-5422f1b87c01"
+  },
+  {
+    "id": "598f7048-74ff-41e0-92ef-87dc1ad980a9",
+    "name": "Lusheeta Toel Ul Laputa",
+    "gender": "Female",
+    "age": "13",
+    "eye_color": "Black",
+    "hair_color": "Black",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/598f7048-74ff-41e0-92ef-87dc1ad980a9"
+  },
+  {
+    "id": "3bc0b41e-3569-4d20-ae73-2da329bf0786",
+    "name": "Dola",
+    "gender": "Female",
+    "age": "60",
+    "eye_color": "Black",
+    "hair_color": "Peach",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/3bc0b41e-3569-4d20-ae73-2da329bf0786"
+  },
+  {
+    "id": "abe886e7-30c8-4c19-aaa5-d666e60d14de",
+    "name": "Romska Palo Ul Laputa",
+    "gender": "Male",
+    "age": "33",
+    "eye_color": "Black",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/abe886e7-30c8-4c19-aaa5-d666e60d14de"
+  },
+  {
+    "id": "e08880d0-6938-44f3-b179-81947e7873fc",
+    "name": "Uncle Pom",
+    "gender": "Male",
+    "age": "Unspecified/Elderly",
+    "eye_color": "Black",
+    "hair_color": "White",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/e08880d0-6938-44f3-b179-81947e7873fc"
+  },
+  {
+    "id": "5c83c12a-62d5-4e92-8672-33ac76ae1fa0",
+    "name": "General Muoro",
+    "gender": "Male",
+    "age": "Unspecified/Adult",
+    "eye_color": "Black",
+    "hair_color": "None",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/5c83c12a-62d5-4e92-8672-33ac76ae1fa0"
+  },
+  {
+    "id": "3f4c408b-0bcc-45a0-bc8b-20ffc67a2ede",
+    "name": "Duffi",
+    "gender": "Male",
+    "age": "Unspecified/Adult",
+    "eye_color": "Dark brown",
+    "hair_color": "Dark brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/3f4c408b-0bcc-45a0-bc8b-20ffc67a2ede"
+  },
+  {
+    "id": "fcb4a2ac-5e41-4d54-9bba-33068db083ca",
+    "name": "Louis",
+    "gender": "Male",
+    "age": "30",
+    "eye_color": "Dark brown",
+    "hair_color": "Dark brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/fcb4a2ac-5e41-4d54-9bba-33068db083ca"
+  },
+  {
+    "id": "2cb76c15-772a-4cb3-9919-3652f56611d0",
+    "name": "Charles",
+    "gender": "Male",
+    "age": "Unspecified/Adult",
+    "eye_color": "Dark brown",
+    "hair_color": "Light brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/2cb76c15-772a-4cb3-9919-3652f56611d0"
+  },
+  {
+    "id": "f6f2c477-98aa-4796-b9aa-8209fdeed6b9",
+    "name": "Henri",
+    "gender": "Male",
+    "age": "Unspecified/Adult",
+    "eye_color": "Dark brown",
+    "hair_color": "Reddish brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/f6f2c477-98aa-4796-b9aa-8209fdeed6b9"
+  },
+  {
+    "id": "05d8d01b-0c2f-450e-9c55-aa0daa34838e",
+    "name": "Motro",
+    "gender": "Male",
+    "age": "Unspecified/Adult",
+    "eye_color": "Dark brown",
+    "hair_color": "None",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/05d8d01b-0c2f-450e-9c55-aa0daa34838e"
+  },
+  {
+    "id": "b22a684f-1819-40c8-94a6-d40c3b5e18eb",
+    "name": "Okami",
+    "gender": "Female",
+    "age": "50",
+    "eye_color": "Dark brown",
+    "hair_color": "Orange",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/b22a684f-1819-40c8-94a6-d40c3b5e18eb"
+  },
+  {
+    "id": "ba924631-068e-4436-b6de-f3283fa848f0",
+    "name": "Ashitaka",
+    "gender": "Male",
+    "age": "late teens",
+    "eye_color": "Brown",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/ba924631-068e-4436-b6de-f3283fa848f0"
+  },
+  {
+    "id": "ebe40383-aad2-4208-90ab-698f00c581ab",
+    "name": "San",
+    "gender": "Female",
+    "age": "17",
+    "eye_color": "Brown",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/ebe40383-aad2-4208-90ab-698f00c581ab"
+  },
+  {
+    "id": "34277bec-7401-43fa-a00a-5aee64b45b08",
+    "name": "Eboshi",
+    "gender": "Female",
+    "age": "Unspecified/Adult",
+    "eye_color": "Hazel",
+    "hair_color": "Black",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/34277bec-7401-43fa-a00a-5aee64b45b08"
+  },
+  {
+    "id": "91939012-90b9-46e5-a649-96b898073c82",
+    "name": "Jigo",
+    "gender": "Male",
+    "age": "Middle age",
+    "eye_color": "Black",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/91939012-90b9-46e5-a649-96b898073c82"
+  },
+  {
+    "id": "20e3bd33-b35d-41e6-83a4-57ca7f028d38",
+    "name": "Kohroku",
+    "gender": "Male",
+    "age": "Adult",
+    "eye_color": "Black",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/20e3bd33-b35d-41e6-83a4-57ca7f028d38"
+  },
+  {
+    "id": "8bccdc78-545b-49f4-a4c8-756163a38c91",
+    "name": "Gonza",
+    "gender": "Male",
+    "age": "Adult",
+    "eye_color": "Grey",
+    "hair_color": "Bald, but beard is Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/8bccdc78-545b-49f4-a4c8-756163a38c91"
+  },
+  {
+    "id": "116bfe1b-3ba8-4fa0-8f72-88537a493cb9",
+    "name": "Hii-sama",
+    "gender": "Female",
+    "age": "Over 50",
+    "eye_color": "Brown",
+    "hair_color": "White",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/116bfe1b-3ba8-4fa0-8f72-88537a493cb9"
+  },
+  {
+    "id": "030555b3-4c92-4fce-93fb-e70c3ae3df8b",
+    "name": "Yakul",
+    "age": "Unknown",
+    "gender": "Male",
+    "eye_color": "Grey",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/6bc92fdd-b0f4-4286-ad71-1f99fb4a0d1e",
+    "url": "https://ghibliapi.herokuapp.com/people/030555b3-4c92-4fce-93fb-e70c3ae3df8b"
+  },
+  {
+    "id": "ca568e87-4ce2-4afa-a6c5-51f4ae80a60b",
+    "name": "Shishigami",
+    "age": "400",
+    "gender": "Male",
+    "eye_color": "Red",
+    "hair_color": "Light Orange",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/6bc92fdd-b0f4-4286-ad71-1f99fb4a0d1e",
+    "url": "https://ghibliapi.herokuapp.com/people/ca568e87-4ce2-4afa-a6c5-51f4ae80a60b"
+  },
+  {
+    "id": "e9356bb5-4d4a-4c93-aadc-c83e514bffe3",
+    "name": "Moro",
+    "gender": "Female",
+    "age": "300",
+    "eye_color": "Brown",
+    "hair_color": "White",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/0440483e-ca0e-4120-8c50-4c8cd9b965d6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/f25fa661-3073-414d-968a-ab062e3065f7",
+    "url": "https://ghibliapi.herokuapp.com/people/e9356bb5-4d4a-4c93-aadc-c83e514bffe3"
+  },
+  {
+    "id": "7151abc6-1a9e-4e6a-9711-ddb50ea572ec",
+    "name": "Jiji",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "Black",
+    "hair_color": "Black",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ea660b10-85c4-4ae3-8a5f-41cea3648e3e"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/7151abc6-1a9e-4e6a-9711-ddb50ea572ec"
+  },
+  {
+    "id": "986faac6-67e3-4fb8-a9ee-bad077c2e7fe",
+    "name": "Satsuki Kusakabe",
+    "gender": "Female",
+    "age": "11",
+    "eye_color": "Dark Brown/Black",
+    "hair_color": "Dark Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/986faac6-67e3-4fb8-a9ee-bad077c2e7fe"
+  },
+  {
+    "id": "d5df3c04-f355-4038-833c-83bd3502b6b9",
+    "name": "Mei Kusakabe",
+    "gender": "Female",
+    "age": "4",
+    "eye_color": "Brown",
+    "hair_color": "Light Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/d5df3c04-f355-4038-833c-83bd3502b6b9"
+  },
+  {
+    "id": "3031caa8-eb1a-41c6-ab93-dd091b541e11",
+    "name": "Tatsuo Kusakabe",
+    "gender": "Male",
+    "age": "37",
+    "eye_color": "Brown",
+    "hair_color": "Dark Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/3031caa8-eb1a-41c6-ab93-dd091b541e11"
+  },
+  {
+    "id": "87b68b97-3774-495b-bf80-495a5f3e672d",
+    "name": "Yasuko Kusakabe",
+    "gender": "Female",
+    "age": "Adult",
+    "eye_color": "Brown",
+    "hair_color": "Dark Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/87b68b97-3774-495b-bf80-495a5f3e672d"
+  },
+  {
+    "id": "08ffbce4-7f94-476a-95bc-76d3c3969c19",
+    "name": "Granny",
+    "gender": "Female",
+    "age": "Elder",
+    "eye_color": "Black",
+    "hair_color": "Grey",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/08ffbce4-7f94-476a-95bc-76d3c3969c19"
+  },
+  {
+    "id": "0f8ef701-b4c7-4f15-bd15-368c7fe38d0a",
+    "name": "Kanta Ogaki",
+    "gender": "Male",
+    "age": "11",
+    "eye_color": "Brown",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/0f8ef701-b4c7-4f15-bd15-368c7fe38d0a"
+  },
+  {
+    "id": "d39deecb-2bd0-4770-8b45-485f26e1381f",
+    "name": "Totoro",
+    "gender": "NA",
+    "age": "",
+    "eye_color": "Grey",
+    "hair_color": "Grey",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/74b7f547-1577-4430-806c-c358c8b6bcf5",
+    "url": "https://ghibliapi.herokuapp.com/people/d39deecb-2bd0-4770-8b45-485f26e1381f"
+  },
+  {
+    "id": "591524bc-04fe-4e60-8d61-2425e42ffb2a",
+    "name": "Chu Totoro",
+    "gender": "NA",
+    "age": "",
+    "eye_color": "Black",
+    "hair_color": "Blue",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/74b7f547-1577-4430-806c-c358c8b6bcf5",
+    "url": "https://ghibliapi.herokuapp.com/people/d39deecb-2bd0-4770-8b45-485f26e1381f"
+  },
+  {
+    "id": "c491755a-407d-4d6e-b58a-240ec78b5061",
+    "name": "Chibi Totoro",
+    "gender": "NA",
+    "age": "",
+    "eye_color": "Black",
+    "hair_color": "White",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/74b7f547-1577-4430-806c-c358c8b6bcf5",
+    "url": "https://ghibliapi.herokuapp.com/people/d39deecb-2bd0-4770-8b45-485f26e1381f"
+  },
+  {
+    "id": "f467e18e-3694-409f-bdb3-be891ade1106",
+    "name": "Catbus",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "Yellow",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/f467e18e-3694-409f-bdb3-be891ade1106"
+  },
+  {
+    "id": "89026b3a-abc4-4053-ab1a-c6d2eea68faa",
+    "name": "Niya",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "White",
+    "hair_color": "Beige",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2de9426b-914a-4a06-a3a0-5e6d9d3886f6"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/89026b3a-abc4-4053-ab1a-c6d2eea68faa"
+  },
+  {
+    "id": "6b3facea-ea33-47b1-96ce-3fc737b119b8",
+    "name": "Renaldo Moon aka Moon aka Muta",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "White",
+    "hair_color": "Beige",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81",
+      "https://ghibliapi.herokuapp.com/films/ff24da26-a969-4f0e-ba1e-a122ead6c6e3"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/6b3facea-ea33-47b1-96ce-3fc737b119b8"
+  },
+  {
+    "id": "3042818d-a8bb-4cba-8180-c19249822d57",
+    "name": "Cat King",
+    "gender": "Male",
+    "age": "87",
+    "eye_color": "Emerald",
+    "hair_color": "Grey",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/3042818d-a8bb-4cba-8180-c19249822d57"
+  },
+  {
+    "id": "58d1973f-f247-47d7-9358-e56cb0d2b5a6",
+    "name": "Yuki",
+    "gender": "Female",
+    "age": "NA",
+    "eye_color": "Blue",
+    "hair_color": "White",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/58d1973f-f247-47d7-9358-e56cb0d2b5a6"
+  },
+  {
+    "id": "a3d8e70f-46a0-4e5a-b850-db01620d6b92",
+    "name": "Haru",
+    "gender": "Female",
+    "age": "13",
+    "eye_color": "Brown",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/a3d8e70f-46a0-4e5a-b850-db01620d6b92"
+  },
+  {
+    "id": "fc196c4f-0201-4ed2-9add-c6403f7c4d32",
+    "name": "Baron Humbert von Gikkingen",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "Green",
+    "hair_color": "Yellow",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ff24da26-a969-4f0e-ba1e-a122ead6c6e3",
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/fc196c4f-0201-4ed2-9add-c6403f7c4d32"
+  },
+  {
+    "id": "466bc926-2024-4653-ac63-fe52f2dc8c7b",
+    "name": "Natori",
+    "gender": "Male",
+    "age": "NA",
+    "eye_color": "Blue",
+    "hair_color": "Grey",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/90b72513-afd4-4570-84de-a56c312fdf81"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/603428ba-8a86-4b0b-a9f1-65df6abef3d3",
+    "url": "https://ghibliapi.herokuapp.com/people/466bc926-2024-4653-ac63-fe52f2dc8c7b"
+  },
+  {
+    "id": "40c005ce-3725-4f15-8409-3e1b1b14b583",
+    "name": "Colonel Muska",
+    "gender": "Male",
+    "age": "33",
+    "eye_color": "Grey",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/40c005ce-3725-4f15-8409-3e1b1b14b583"
+  },
+  {
+    "id": "6523068d-f5a9-4150-bf5b-76abe6fb42c3",
+    "name": "Porco Rosso",
+    "gender": "Male",
+    "age": "47",
+    "eye_color": "Black",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/ebbb6b7c-945c-41ee-a792-de0e43191bd8"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/6523068d-f5a9-4150-bf5b-76abe6fb42c3"
+  },
+  {
+    "id": "a10f64f3-e0b6-4a94-bf30-87ad8bc51607",
+    "name": "Sosuke",
+    "gender": "Male",
+    "age": "5",
+    "eye_color": "Brown",
+    "hair_color": "Brown",
+    "films": [
+      "https://ghibliapi.herokuapp.com/films/758bf02e-3122-46e0-884e-67cf83df1786"
+    ],
+    "species": "https://ghibliapi.herokuapp.com/species/af3910a6-429f-4c74-9ad5-dfe1c4aa04f2",
+    "url": "https://ghibliapi.herokuapp.com/people/a10f64f3-e0b6-4a94-bf30-87ad8bc51607"
+  }
+]

test/fake-vehicles.json

@@ -0,0 +1,32 @@
+[
+  {
+    "id": "4e09b023-f650-4747-9ab9-eacf14540cfb",
+    "name": "Air Destroyer Goliath",
+    "description": "A military airship utilized by the government to access Laputa",
+    "vehicle_class": "Airship",
+    "length": "1,000",
+    "pilot": "https://ghibliapi.herokuapp.com/people/40c005ce-3725-4f15-8409-3e1b1b14b583",
+    "films": "https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe",
+    "url": "https://ghibliapi.herokuapp.com/vehicles/4e09b023-f650-4747-9ab9-eacf14540cfb"
+  },
+  {
+    "id": "d8f893b5-1dd9-41a1-9918-0099c1aa2de8",
+    "name": "Red Wing",
+    "description": "An experimental aircraft captured by Porco. Named Savoia S.21",
+    "vehicle_class": "Airplane",
+    "length": "20",
+    "pilot": "https://ghibliapi.herokuapp.com/people/6523068d-f5a9-4150-bf5b-76abe6fb42c3",
+    "films": "https://ghibliapi.herokuapp.com/films/ebbb6b7c-945c-41ee-a792-de0e43191bd8",
+    "url": "https://ghibliapi.herokuapp.com/vehicles/d8f893b5-1dd9-41a1-9918-0099c1aa2de8"
+  },
+  {
+    "id": "923d70c9-8f15-4972-ad53-0128b261d628",
+    "name": "Sosuke's Boat",
+    "description": "A toy boat where Sosuke plays",
+    "vehicle_class": "Boat",
+    "length": "10",
+    "pilot": "https://ghibliapi.herokuapp.com/people/a10f64f3-e0b6-4a94-bf30-87ad8bc51607",
+    "films": "https://ghibliapi.herokuapp.com/films/758bf02e-3122-46e0-884e-67cf83df1786",
+    "url": "https://ghibliapi.herokuapp.com/vehicles/923d70c9-8f15-4972-ad53-0128b261d628"
+  }
+]

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("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
-      }
-    });
-
-    expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
-  });
-});