Create Vehicle component + tests

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"
     })