Create Grid component + Test. Index test adaptations

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