diff --git a/components/Film/Film.spec.js b/components/Film/Film.spec.js
new file mode 100644
index 0000000..522577e
--- /dev/null
+++ b/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}`
+    );
+  });
+});
diff --git a/components/Film.vue b/components/Film/Film.vue
similarity index 90%
rename from components/Film.vue
rename to components/Film/Film.vue
index 987538b..69471e9 100644
--- a/components/Film.vue
+++ b/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%);
diff --git a/components/Grid.vue b/components/Grid.vue
index 69396da..ac1a141 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Film from "./Film";
+import Film from "./Film/Film";
 
 export default {
   components: { Film },