Create Vehicle page layout

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

layouts/default.vue

@@ -14,6 +14,7 @@ export default {
   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");
@@ -42,4 +43,8 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+
+main {
+  min-height: calc(100vh - 64px * 2);
+}
 </style>

pages/films/_id.spec.js

@@ -41,7 +41,9 @@ describe("Film page", () => {
       store,
       computed: {
         film: () => mockFilms[0],
-        people: () => jest.fn()
+        people: () => jest.fn(),
+        vehicles: () => jest.fn(),
+        locations: () => jest.fn()
       }
     });
     expect(wrapper.exists()).toBe(true);
@@ -67,7 +69,9 @@ describe("Film page", () => {
       store,
       computed: {
         film: () => mockFilms[0],
-        people: () => jest.fn()
+        people: () => jest.fn(),
+        vehicles: () => jest.fn(),
+        locations: () => jest.fn()
       }
     });
 

pages/films/_id.vue

@@ -40,21 +40,27 @@
         </ul>
       </section>
 
-      <!-- <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>
+        <ul v-if="vehicles.length">
+          <li :key="vehicle.id" v-for="vehicle in vehicles">
+            <Vehicle :vehicle="vehicle" />
+          </li>
+        </ul>
       </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>
+        <ul v-if="locations.length">
-      </section> -->
+          <li :key="location.id" v-for="location in locations">
+            <Location :location="location" />
+          </li>
+        </ul>
+      </section>
     </aside>
   </div>
 </template>
@@ -65,7 +71,9 @@ import { mapGetters } from "vuex";
 export default {
   name: "Film",
   components: {
-    Person: () => import("@/components/Person")
+    Person: () => import("@/components/Person"),
+    Vehicle: () => import("@/components/Vehicle"),
+    Location: () => import("@/components/Location")
   },
   head() {
     return {
@@ -86,6 +94,14 @@ export default {
     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"
     })

pages/locations/_id.spec.js

@@ -1,6 +1,7 @@
 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",
@@ -22,11 +23,25 @@ describe("Location page", () => {
     actions = {
       getLocation: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        locations: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Location page instance", () => {
-    const wrapper = mount(Location, { localVue, store });
+    const wrapper = mount(Location, {
+      localVue,
+      store,
+      computed: {
+        location: () => mockLocations[0]
+      }
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +62,10 @@ describe("Location page", () => {
   it("should dispatch getLocation action", async () => {
     let wrapper = mount(Location, {
       localVue,
-      store
+      store,
+      computed: {
+        location: () => mockLocations[0]
+      }
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/locations/_id.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Location",
@@ -21,10 +21,13 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getLocation", params.id);
+    if (!store.state.locations.location.id !== params.id)
+      await store.dispatch("locations/getLocation", params.id);
   },
   computed: {
-    ...mapState(["location"])
+    ...mapGetters({
+      location: "locations/location"
+    })
   }
 };
 </script>

pages/people/_id.spec.js

@@ -1,6 +1,7 @@
 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",
@@ -22,11 +23,25 @@ describe("Person page", () => {
     actions = {
       getPerson: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        people: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Person page instance", () => {
-    const wrapper = mount(Person, { localVue, store });
+    const wrapper = mount(Person, {
+      localVue,
+      store,
+      computed: {
+        person: () => mockPeople[0]
+      }
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +62,10 @@ describe("Person page", () => {
   it("should dispatch getPerson action", async () => {
     let wrapper = mount(Person, {
       localVue,
-      store
+      store,
+      computed: {
+        person: () => mockPeople[0]
+      }
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/people/_id.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Person",
@@ -21,10 +21,13 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getPerson", params.id);
+    if (!store.state.people.person.id !== params.id)
+      await store.dispatch("people/getPerson", params.id);
   },
   computed: {
-    ...mapState(["person"])
+    ...mapGetters({
+      person: "people/person"
+    })
   }
 };
 </script>

pages/vehicles/_id.spec.js

@@ -1,6 +1,9 @@
 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",
@@ -22,11 +25,28 @@ describe("Vehicle page", () => {
     actions = {
       getVehicle: jest.fn()
     };
-    store = new Vuex.Store({ state, actions });
+    store = new Vuex.Store({
+      modules: {
+        vehicles: {
+          namespaced: true,
+          state,
+          actions
+        }
+      }
+    });
   });
 
   it("should render Vehicle page instance", () => {
-    const wrapper = mount(Vehicle, { localVue, store });
+    const wrapper = mount(Vehicle, {
+      localVue,
+      store,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => mockPeople[0],
+        film: () => mockFilms[0]
+      },
+      stubs: ["nuxt-link"]
+    });
     expect(wrapper.exists()).toBe(true);
   });
 
@@ -47,7 +67,13 @@ describe("Vehicle page", () => {
   it("should dispatch getVehicle action", async () => {
     let wrapper = mount(Vehicle, {
       localVue,
-      store
+      store,
+      computed: {
+        vehicle: () => mockVehicles[0],
+        pilot: () => jest.fn(),
+        film: () => jest.fn()
+      },
+      stubs: ["nuxt-link"]
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/vehicles/_id.vue

@@ -1,11 +1,45 @@
 <template>
-  <div>
+  <div
-    {{ vehicle }}
+    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 { mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "Vehicle",
@@ -21,12 +55,26 @@ export default {
     return uuid.test(params.id);
   },
   async asyncData({ params, store }) {
-    await store.dispatch("getVehicle", params.id);
+    if (!store.state.vehicles.vehicle.id !== params.id)
+      await store.dispatch("vehicles/getVehicle", params.id);
   },
   computed: {
-    ...mapState(["vehicle"])
+    pilot: function() {
+      return this.$store.getters["vehicles/getPilot"];
+    },
+    film: function() {
+      return this.$store.getters["vehicles/getFilm"];
+    },
+    ...mapGetters({
+      vehicle: "vehicles/vehicle"
+    })
   }
 };
 </script>
 
-<style></style>
+<style lang="css" scoped>
+article header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+</style>

store/locations/index.js

@@ -35,5 +35,10 @@ export const actions = {
 
 export const getters = {
   list: state => state.list,
-  location: state => state.location
+  location: state => state.location,
+  getLocationsByFilmId: state => id => {
+    return state.list.filter(location =>
+      location.films.find(film => film.split("/")[4] === id)
+    );
+  }
 };

store/people/index.js

@@ -25,7 +25,9 @@ export const actions = {
   },
   async getPerson({ commit }, id) {
     try {
-      const person = await this.$axios.$get(`/api/people/${id}`);
+      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}`);

store/vehicles/index.js

@@ -25,7 +25,9 @@ export const actions = {
   },
   async getVehicle({ commit }, id) {
     try {
-      const vehicle = await this.$axios.$get(`/api/vehicles/${id}`);
+      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}`);
@@ -35,5 +37,18 @@ export const actions = {
 
 export const getters = {
   list: state => state.list,
-  vehicle: state => state.vehicle
+  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-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"
+  }
+]