Create Vehicle component + tests

Pass test for Film details and Person component.
Load Locations/People/Vehicles from layout on app load
2020-12-21 22:36:16 +01:00 · 2020-12-21 22:20:12 +01:00 · 2020-12-21 22:06:36 +01:00 · 2020-12-21 22:06:05 +01:00 · 2020-12-21 22:05:53 +01:00
15 changed files with 836 additions and 117 deletions
--- a/components/Person/Person.spec.js
+++ b/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}`
+    );
+  });
+});
--- a/components/Person/index.vue
+++ b/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>
--- a/components/Vehicle/Vehicle.spec.js
+++ b/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}`
+    );
+  });
+});
--- a/components/Vehicle/index.vue
+++ b/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>
--- a/layouts/default.vue
+++ b/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>

--- a/pages/films/_id.spec.js
+++ b/pages/films/_id.spec.js
@@ -14,28 +14,22 @@ const localVue = createLocalVue();
 localVue.use(Vuex);

 describe("Film page", () => {
-  let state, actions, getters, store;
+  let state, actions, store;

  beforeEach(() => {
    state = {
      film: {}
    };
    actions = {
-      getFilm: jest.fn(),
-      getPeople: jest.fn(),
-      getVehicles: jest.fn(),
-      getLocations: jest.fn()
-    };
-    getters = {
-      film: jest.fn()
+      getFilm: jest.fn()
    };
+
    store = new Vuex.Store({
      modules: {
        films: {
          namespaced: true,
          state,
-          actions,
-          getters
+          actions
        }
      }
    });
@@ -46,7 +40,9 @@ describe("Film page", () => {
      localVue,
      store,
      computed: {
-        film: () => mockFilms[0]
+        film: () => mockFilms[0],
+        people: () => jest.fn(),
+        vehicles: () => jest.fn()
      }
    });
    expect(wrapper.exists()).toBe(true);
@@ -71,7 +67,9 @@ describe("Film page", () => {
      localVue,
      store,
      computed: {
-        film: () => mockFilms[0]
+        film: () => mockFilms[0],
+        people: () => jest.fn(),
+        vehicles: () => jest.fn()
      }
    });

--- a/pages/films/_id.vue
+++ b/pages/films/_id.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
+  <div
+    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
+  >
    <article
-      class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      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>
@@ -26,27 +28,36 @@
      </section>
    </article>

-    <aside class="w-full lg:ml-4">
+    <aside class="lg:inline-flex lg:ml-4">
      <section
-        class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+        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">People</h3>
-        <div>{{ film.people }}</div>
+        <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 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+        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">Vehicles</h3>
-        <div>{{ film.vehicles }}</div>
+        <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 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+      <!-- <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>
+      </section> -->
    </aside>
  </div>
 </template>
@@ -56,6 +67,10 @@ import { mapGetters } from "vuex";

 export default {
  name: "Film",
+  components: {
+    Person: () => import("@/components/Person"),
+    Vehicle: () => import("@/components/Vehicle")
+  },
  head() {
    return {
      titleTemplate: `%s - ${this.film.title}`
@@ -72,14 +87,15 @@ export default {
      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);
+    },
    ...mapGetters({
      film: "films/film"
    })
-  },
-  async mounted() {
-    await this.$store.dispatch("films/getPeople");
-    await this.$store.dispatch("films/getVehicles");
-    await this.$store.dispatch("films/getLocations");
  }
 };
 </script>
--- a/pages/films/index.spec.js
+++ b/pages/films/index.spec.js
@@ -1,4 +1,4 @@
-import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
+import { shallowMount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import Films from "./";

--- a/store/films/actions.spec.js
+++ b/store/films/actions.spec.js
@@ -20,7 +20,9 @@ describe("Vuex actions.", () => {
    actions.$axios = axios;
    await actions.getList({ commit });

-    expect(url).toBe("/api/films");
+    expect(url).toBe(
+      "/api/films?fields=id,title,release_date,director,description,rt_score"
+    );
    expect(commit).toHaveBeenCalledWith("setList", mockFilms);
  });

--- a/store/films/index.js
+++ b/store/films/index.js
@@ -9,22 +9,15 @@ export const mutations = {
  },
  setFilm: (state, film) => {
    state.film = film;
-  },
-  setPeople: (state, people) => {
-    state.film.people = people;
-  },
-  setVehicles: (state, vehicles) => {
-    state.film.vehicles = vehicles;
-  },
-  setLocations: (state, locations) => {
-    state.film.locations = locations;
  }
 };

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

--- a/store/locations/index.js
+++ b/store/locations/index.js
@@ -1,18 +1,31 @@
 export const state = () => ({
+  list: [],
  location: {}
 });

 export const mutations = {
+  setList: (state, locations) => {
+    state.list = locations;
+  },
  setLocation: (state, location) => {
    state.location = location;
  }
 };

 export const actions = {
-  async getLocation({ commit }, { id, callback = false }) {
+  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}`);
-      if (callback) return location;
      commit("setLocation", location);
    } catch (e) {
      throw Error(`API Error occurred: ${e.message}`);
@@ -21,5 +34,6 @@ export const actions = {
 };

 export const getters = {
+  list: state => state.list,
  location: state => state.location
 };
--- a/store/people/index.js
+++ b/store/people/index.js
@@ -1,18 +1,31 @@
 export const state = () => ({
+  list: [],
  person: {}
 });

 export const mutations = {
+  setList: (state, people) => {
+    state.list = people;
+  },
  setPerson: (state, person) => {
    state.person = person;
  }
 };

 export const actions = {
-  async getPerson({ commit }, { id, callback = false }) {
+  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}`);
-      if (callback) return person;
      commit("setPerson", person);
    } catch (e) {
      throw Error(`API Error occurred: ${e.message}`);
@@ -21,5 +34,11 @@ export const actions = {
 };

 export const getters = {
-  person: state => state.person
+  list: state => state.list,
+  person: state => state.person,
+  getPeopleByFilmId: state => id => {
+    return state.list.filter(person =>
+      person.films.find(film => film.split("/")[4] === id)
+    );
+  }
 };
--- a/store/vehicles/index.js
+++ b/store/vehicles/index.js
@@ -1,18 +1,31 @@
 export const state = () => ({
+  list: [],
  vehicle: {}
 });

 export const mutations = {
+  setList: (state, vehicles) => {
+    state.list = vehicles;
+  },
  setVehicle: (state, vehicle) => {
    state.vehicle = vehicle;
  }
 };

 export const actions = {
-  async getVehicle({ commit }, { id, callback = false }) {
+  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}`);
-      if (callback) return vehicle;
      commit("setVehicle", vehicle);
    } catch (e) {
      throw Error(`API Error occurred: ${e.message}`);
@@ -21,5 +34,9 @@ export const actions = {
 };

 export const getters = {
-  vehicle: state => state.vehicle
+  list: state => state.list,
+  vehicle: state => state.vehicle,
+  getVehiclesByFilmId: state => id => {
+    return state.list.filter(vehicle => vehicle.films.split("/")[4] === id);
+  }
 };
--- a/test/fake-people.json
+++ b/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"
+  }
+]
--- a/test/fake-vehicles.json
+++ b/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"
+  }
+]
Author	SHA1	Message	Date
Noé Viricel	cf9381309e	Create Vehicle component + tests	2020-12-21 22:36:16 +01:00
Noé Viricel	21f3ed77a4	Pass test for Film details and Person component.	2020-12-21 22:20:12 +01:00
Noé Viricel	2e35d86e1a	Load Locations/People/Vehicles from layout on app load	2020-12-21 22:06:36 +01:00
Noé Viricel	5bab5b2041	Adapt tests	2020-12-21 22:06:05 +01:00
Noé Viricel	188625a413	Create basic Person component + collect data by getter	2020-12-21 22:05:53 +01:00