Implemented additional tests and included router in tests

LukaBRa · Feb 14, 2024 · cc197fb · cc197fb
1 parent cc2da74
commit cc197fb
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 12 deletions.
diff --git a/src/components/PageNumber.vue b/src/components/PageNumber.vue
@@ -11,26 +11,26 @@ const props = defineProps<{
 }>();
 
 const togglePage = (page: number) => {
-    if(route.name == "homepage"){
+    if(route && route.name == "homepage"){
         router.push(`/?page=${page}`);
     }
-    if(route.name == "moviepage"){
+    if(route && route.name == "moviepage"){
         router.push({ path: route.fullPath, query: { page } });
     }
 }
 
 const activePage = computed(() => {
-    if(!route.query.page && props.pageNumber.n == 1){
+    if(route && !route.query.page && props.pageNumber.n == 1){
         return true
     }
-    return parseInt(route.query.page as string) == props.pageNumber.n;
+    return parseInt(route && route.query.page as string) == props.pageNumber.n;
 });
 
 </script>
 
 <template>
 
-    <button @click="togglePage(pageNumber.n)" :class="{ active: activePage }">{{ pageNumber.n }}</button>
+    <button id="page-number-button" @click="togglePage(pageNumber.n)" :class="{ active: activePage }">{{ pageNumber.n }}</button>
 
 </template>
 

diff --git a/src/components/tests/unit/ActionBar.spec.js b/src/components/tests/unit/ActionBar.spec.js
@@ -5,6 +5,25 @@ import { createPinia, defineStore, setActivePinia } from "pinia";
 import { createTestingPinia } from "@pinia/testing";
 import useMoviesStore from "@/store/moviesStore";
 import useFilterButtonsStore from "@/store/filterButtonsStore";
+import { useRoute, useRouter } from "vue-router";
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+  useRouter: vi.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = vi.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
 
 const wrapper = mount(ActionBar, {
     global: {
@@ -13,7 +32,8 @@ const wrapper = mount(ActionBar, {
                 stubActions: false,
                 createSpy: vi.fn,
             })
-        ]
+        ],
+        stubs: ["router-link", "router-view"]
     }
 });
 

diff --git a/src/components/tests/unit/MovieCard.spec.js b/src/components/tests/unit/MovieCard.spec.js
@@ -1,9 +1,29 @@
 import { mount } from "@vue/test-utils";
 import MovieCard from "../../MovieCard.vue";
-import { test, expect, vi } from "vitest";
+import { test, expect, vi, vitest } from "vitest";
 import { createTestingPinia } from "@pinia/testing";
+import { useRoute, useRouter } from "vue-router";
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+  useRouter: vi.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+test("Component should display movie Pulp Fiction", async () => {
+
+  useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = vi.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
 
-test("Component should display movie Pulp Fiction", () => {
     const wrapper = mount(MovieCard, {
         props: {
             movie: {
@@ -67,15 +87,16 @@ test("Component should display movie Pulp Fiction", () => {
                     stubActions: false,
                     createSpy: vi.fn,
                 })
-            ]
+            ],
+            stubs: ["router-link", "router-view"]
         }
     });
     expect(wrapper.find('#card-title').text()).toBe("Pulp Fiction");
     expect(wrapper.find('#card-genres').text()).toBe("Crime, Drama");
     expect(wrapper.find("#card-release-date").text()).toBe("1994");
 });
 
-test("Component should emit 'selectMovie'", async () => {
+test("Component should call 'selectMovie' once", async () => {
     const wrapper = mount(MovieCard, {
         props: {
             movie: {
@@ -143,7 +164,8 @@ test("Component should emit 'selectMovie'", async () => {
         }
     });
 
+    const selectMovieSpy = vi.spyOn(wrapper.vm, "selectMovie");
     await wrapper.find("#card-image").trigger("click");
 
-    expect(wrapper.emitted().selectMovie).toBeTruthy();
+    expect(selectMovieSpy).toBeCalledTimes(1);
 });
diff --git a/src/components/tests/unit/MovieList.spec.js b/src/components/tests/unit/MovieList.spec.js
@@ -4,6 +4,28 @@ import { test, expect, vi } from "vitest";
 import { createTestingPinia } from "@pinia/testing";
 import useMoviesStore from "@/store/moviesStore";
 import useFilterButtonsStore from "@/store/filterButtonsStore";
+import { useRoute, useRouter } from "vue-router";
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+  useRouter: vi.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+useRoute.mockImplementationOnce(() => ({
+    params: {
+        id: 1
+      },
+      query: {
+        page: "1"
+      }
+  }))
+
+  const push = vi.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
 
 const wrapper = mount(MovieList, {
     global: {
@@ -12,7 +34,8 @@ const wrapper = mount(MovieList, {
                 stubActions: false,
                 createSpy: vi.fn,
             })
-        ]
+        ],
+        stubs: ["router-link", "router-view"]
     }
 });
 

diff --git a/src/components/tests/unit/PageNumber.spec.js b/src/components/tests/unit/PageNumber.spec.js
@@ -0,0 +1,93 @@
+import { mount } from "@vue/test-utils";
+import PageNumber from "../../PageNumber.vue";
+import { test, expect, vi } from "vitest";
+import { createTestingPinia } from "@pinia/testing";
+import useMoviesStore from "@/store/moviesStore";
+import useFilterButtonsStore from "@/store/filterButtonsStore";
+import { useRoute, useRouter } from "vue-router";
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+  useRouter: vi.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+useRoute.mockImplementationOnce(() => ({
+    params: {
+        id: 1
+      },
+      query: {
+        page: "1"
+      },
+      name: "homepage"
+  }))
+
+  const push = vi.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
+
+test("Component should mount", () => {
+    const wrapper = mount(PageNumber, {
+        props: {
+            pageNumber: {
+                n: 1
+            }
+        },
+        global: {
+            plugins: [
+                createTestingPinia({
+                    stubActions: false,
+                    createSpy: vi.fn,
+                })
+            ],
+            stubs: ["router-link", "router-view"]
+        }
+    });
+    expect(wrapper).toBeTruthy();
+});
+
+test("Component should have content: 1", async () => {
+    const wrapper = mount(PageNumber, {
+        props: {
+            pageNumber: {
+                n: 1
+            }
+        },
+        global: {
+            plugins: [
+                createTestingPinia({
+                    stubActions: false,
+                    createSpy: vi.fn,
+                })
+            ],
+            stubs: ["router-link", "router-view"]
+        }
+    });
+    expect(wrapper.find("#page-number-button").text()).toBe("1");
+});
+
+test("Component should toggle page 2", async () => {
+    const wrapper = mount(PageNumber, {
+        props: {
+            pageNumber: {
+                n: 2
+            }
+        },
+        global: {
+            plugins: [
+                createTestingPinia({
+                    stubActions: false,
+                    createSpy: vi.fn,
+                })
+            ],
+            stubs: ["router-link", "router-view"]
+        }
+    });
+    const togglePageSpy = vi.spyOn(wrapper.vm, "togglePage");
+    expect(wrapper.find("#page-number-button").text()).toBe("2");
+    await wrapper.find("#page-number-button").trigger("click");
+    expect(togglePageSpy).toHaveBeenCalledOnce();
+    expect(togglePageSpy).toHaveBeenCalledWith(2);
+});