Create Grid component + Test. Index test adaptations

components/Grid.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="grid">
+    {{ dataSource }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Grid",
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style></style>

pages/films/index.vue

@@ -3,19 +3,25 @@
     <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
       Ghibli films
     </h2>
-    <div class="films">{{ films }}</div>
+    <Grid :dataSource="films" />
   </section>
 </template>
 
 <script>
 export default {
   name: "Films",
+  components: { Grid: () => import("@/components/Grid") },
   head: {
     titleTemplate: "%s - Films"
   },
   async asyncData({ $axios }) {
     const films = await $axios.$get("/api/films");
     return { films };
+  },
+  data() {
+    return {
+      films: []
+    };
   }
 };
 </script>

test/Grid.spec.js

@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import Grid from "@/components/Grid";
+import mockFilms from "./fake-films.json";
+
+describe("Grid", () => {
+  it("tests props", () => {
+    expect(Grid.props).toMatchObject({
+      dataSource: {
+        type: Array,
+        required: true
+      }
+    });
+  });
+
+  it("should render Grid instance", () => {
+    const wrapper = mount(Grid, {
+      propsData: {
+        dataSource: mockFilms
+      }
+    });
+    expect(JSON.parse(wrapper.text())).toEqual(mockFilms);
+  });
+});

test/index.spec.js

@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
 import axios from "axios";
 import FilmsView from "@/pages/films";
 import mockFilms from "./fake-films.json";
@@ -14,7 +14,7 @@ describe("Films page", () => {
   });
 
   it("should get films from Ghibli API", async () => {
-    let wrapper = mount(FilmsView, {
+    let wrapper = shallowMount(FilmsView, {
       mocks: {
         $axios: axios
       }
@@ -25,13 +25,13 @@ describe("Films page", () => {
     );
 
     // Init page with mocked asyncData
-    wrapper = mount(FilmsView, {
+    wrapper = shallowMount(FilmsView, {
       mocks: {
         films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
         $axios: axios
       }
     });
 
-    expect(JSON.parse(wrapper.find(".films").text())).toEqual(mockFilms);
+    expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });