Test Film component

components/Film/Film.spec.js

@@ -0,0 +1,30 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import Film from "@/components/Film/Film";
+import mockFilms from "@/test/fake-films.json";
+
+describe("Film", () => {
+  it("tests props", () => {
+    expect(Film.props).toMatchObject({
+      film: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    });
+  });
+
+  it("renders proper link to details", () => {
+    const wrapper = mount(Film, {
+      propsData: {
+        film: mockFilms[0]
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe(
+      `/film/${mockFilms[0].id}`
+    );
+  });
+});

components/Film/Film.vue

@@ -43,7 +43,7 @@ export default {
   props: {
     film: {
       type: Object,
-      default: () => {},
+      default: {},
       required: true
     }
   },
@@ -56,22 +56,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-/* .film {
-  flex: 1 1 calc(50% - 2rem);
-}
-
-@media screen and (min-width: 600px) {
-  .card {
-    flex: 1 1 calc(50% - 2rem);
-  }
-}
-
-@media screen and (min-width: 900px) {
-  .card {
-    flex: 1 1 calc(33% - 2rem);
-  }
-} */
-
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);

components/Grid.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Film from "./Film";
+import Film from "./Film/Film";
 
 export default {
   components: { Film },