Create Vehicle component + tests

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>

pages/films/_id.spec.js

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

pages/films/_id.vue

@@ -40,15 +40,18 @@
         </ul>
       </section>
 
-      <!-- <section
-        v-if="Object.keys(film.vehicles).length"
+      <section
         class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
       >
         <h3 class="font-medium text-lg mb-4">Vehicles</h3>
-        <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
+      <!-- <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"
       >
@@ -65,7 +68,8 @@ import { mapGetters } from "vuex";
 export default {
   name: "Film",
   components: {
-    Person: () => import("@/components/Person")
+    Person: () => import("@/components/Person"),
+    Vehicle: () => import("@/components/Vehicle")
   },
   head() {
     return {
@@ -86,6 +90,9 @@ export default {
     people() {
       return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
     },
+    vehicles() {
+      return this.$store.getters["vehicles/getVehiclesByFilmId"](this.film.id);
+    },
     ...mapGetters({
       film: "films/film"
     })

store/vehicles/index.js

@@ -35,5 +35,8 @@ 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);
+  }
 };

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