Refactor Grid module

components/Grid/Grid.spec.js

@@ -0,0 +1,26 @@
+import { shallowMount } from "@vue/test-utils";
+import Grid from "./";
+import mockFilms from "@/test/fake-films.json";
+
+describe("Grid", () => {
+  it("tests props", () => {
+    expect(Grid.props).toMatchObject({
+      dataSource: {
+        type: Array,
+        required: true
+      }
+    });
+  });
+
+  it("should render Grid instance with expected Film components", () => {
+    const wrapper = shallowMount(Grid, {
+      propsData: {
+        dataSource: mockFilms
+      }
+    });
+
+    expect(wrapper.findAllComponents({ name: "Film" }).length).toBe(
+      mockFilms.length
+    );
+  });
+});

components/Grid/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-wrap">
+    <Film :key="film.id" v-for="film in dataSource" :film="film" />
+  </div>
+</template>
+
+<script>
+import Film from "../Film";
+
+export default {
+  components: { Film },
+  name: "Grid",
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style></style>