Pass test for Film details and Person component.

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

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"
   ]
-}
+};

layouts/default.vue

@@ -10,7 +10,16 @@
 
 <script>
 export default {
-  middleware: ["redirect"]
+  middleware: ["redirect"],
+  fetchOnServer: false,
+  async fetch() {
+    const { store } = this.$nuxt.context;
+    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>
 

pages/films/_id.spec.js

@@ -0,0 +1,77 @@
+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()
+      }
+    });
+    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()
+      }
+    });
+
+    await wrapper.vm.$options.asyncData({ store, params: $route.params });
+    expect(actions.getFilm).toHaveBeenCalled();
+  });
+});

pages/films/_id.vue

@@ -0,0 +1,113 @@
+<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
+        v-if="Object.keys(film.vehicles).length"
+        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>
+        <div>{{ film.vehicles }}</div>
+      </section>
+
+      <section
+        v-if="Object.keys(film.locations).length"
+        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>
+        <div>{{ film.locations }}</div>
+      </section> -->
+    </aside>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Film",
+  components: {
+    Person: () => import("@/components/Person")
+  },
+  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);
+    },
+    ...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 }) {
-    const films = await $axios.$get("/api/films");
-    return { films };
+  async asyncData({ store }) {
+    if (!store.state.films.list.length) await store.dispatch("films/getList");
   },
-  data() {
-    return {
-      films: []
-    };
+  computed: {
+    ...mapGetters({
+      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,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,39 @@
+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
+};

store/people/index.js

@@ -0,0 +1,44 @@
+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}`);
+      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,39 @@
+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}`);
+      commit("setVehicle", vehicle);
+    } catch (e) {
+      throw Error(`API Error occurred: ${e.message}`);
+    }
+  }
+};
+
+export const getters = {
+  list: state => state.list,
+  vehicle: state => state.vehicle
+};

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