Create Location component + tests

pages/films/_id.spec.js

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

pages/films/_id.vue

@@ -51,13 +51,16 @@
         </ul>
       </section>
 
-      <!-- <section
-        v-if="Object.keys(film.locations).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">Locations</h3>
-        <div>{{ film.locations }}</div>
-      </section> -->
+        <ul v-if="locations.length">
+          <li :key="location.id" v-for="location in locations">
+            <Location :location="location" />
+          </li>
+        </ul>
+      </section>
     </aside>
   </div>
 </template>
@@ -69,7 +72,8 @@ export default {
   name: "Film",
   components: {
     Person: () => import("@/components/Person"),
-    Vehicle: () => import("@/components/Vehicle")
+    Vehicle: () => import("@/components/Vehicle"),
+    Location: () => import("@/components/Location")
   },
   head() {
     return {
@@ -93,6 +97,11 @@ export default {
     vehicles() {
       return this.$store.getters["vehicles/getVehiclesByFilmId"](this.film.id);
     },
+    locations() {
+      return this.$store.getters["locations/getLocationsByFilmId"](
+        this.film.id
+      );
+    },
     ...mapGetters({
       film: "films/film"
     })