From 1e9993347b9d9031c690bbd1baa6d86c0f7c097f Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 10 Jun 2022 13:04:13 +0200
Subject: [PATCH] test: add BottomNavigation tests

---
 .../theme/components/BottomNavigation.vue     |  21 ++-
 .../__tests__/BottomNavigation.spec.ts        | 157 ++++++++++++++++++
 packages/theme/jest-setup.js                  |   5 +-
 packages/theme/test-utils/mocks/useUiState.ts |   1 +
 4 files changed, 179 insertions(+), 5 deletions(-)
 create mode 100644 packages/theme/components/__tests__/BottomNavigation.spec.ts

diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
index 2c389fdd9..74194fe8b 100644
--- a/packages/theme/components/BottomNavigation.vue
+++ b/packages/theme/components/BottomNavigation.vue
@@ -4,7 +4,8 @@
       <SfBottomNavigationItem
         :class="{ 'sf-bottom-navigation__item--active': $route.name && $route.name.startsWith('home') }"
         label="Home"
-        @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
+        data-testid="bottom-navigation-home"
+        @click="handleHomeClick"
       >
         <template #icon>
           <SvgImage
@@ -17,6 +18,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Menu"
+        data-testid="bottom-navigation-menu"
         @click="loadCategoryMenu"
       >
         <template #icon>
@@ -31,6 +33,7 @@
       <SfBottomNavigationItem
         v-if="isAuthenticated"
         label="Wishlist"
+        data-testid="bottom-navigation-wishlist"
         @click="toggleWishlistSidebar"
       >
         <template #icon>
@@ -44,6 +47,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Account"
+        data-testid="bottom-navigation-account"
         @click="handleAccountClick"
       >
         <template #icon>
@@ -57,6 +61,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         :label="$route.name && $route.name.startsWith('product') ? 'Add to Cart' : 'Basket'"
+        data-testid="bottom-navigation-cart"
         @click="toggleCartSidebar"
       >
         <template #icon>
@@ -78,7 +83,7 @@
 <script lang="ts">
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
-import { useUiState } from '~/composables';
+import { useUiState } from '~/composables/useUiState';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useCategoryStore } from '~/modules/catalog/category/stores/category';
@@ -86,6 +91,7 @@ import { useCategoryStore } from '~/modules/catalog/category/stores/category';
 const MobileCategorySidebar = () => import('~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue');
 
 export default defineComponent({
+  name: 'BottomNavigation',
   components: {
     SfBottomNavigation,
     SfCircleIcon,
@@ -103,6 +109,15 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const router = useRouter();
     const { app } = useContext();
+
+    const handleHomeClick = async () => {
+      const homePath = app.localeRoute({ name: 'home' });
+      await router.push(homePath);
+      if (isMobileMenuOpen) {
+        toggleMobileMenu();
+      }
+    };
+
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(app.localeRoute({ name: 'customer' }));
@@ -127,7 +142,7 @@ export default defineComponent({
       toggleMobileMenu,
       loadCategoryMenu,
       handleAccountClick,
-      app,
+      handleHomeClick,
     };
   },
 });
diff --git a/packages/theme/components/__tests__/BottomNavigation.spec.ts b/packages/theme/components/__tests__/BottomNavigation.spec.ts
new file mode 100644
index 000000000..f7460ea91
--- /dev/null
+++ b/packages/theme/components/__tests__/BottomNavigation.spec.ts
@@ -0,0 +1,157 @@
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+import { createLocalVue } from '@vue/test-utils';
+import { PiniaVuePlugin } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { ref } from '@nuxtjs/composition-api';
+import { useUser } from '~/modules/customer/composables/useUser';
+import { useUiState } from '~/composables';
+import { useUiStateMock, useUserMock } from '~/test-utils';
+
+import { useCategoryStore } from '~/modules/catalog/category/stores/category';
+import BottomNavigation from '../BottomNavigation.vue';
+
+jest.mock('~/composables/useUiState', () => ({
+  useUiState: jest.fn(),
+}));
+
+jest.mock('~/modules/customer/composables/useUser', () => ({
+  useUser: jest.fn(),
+}));
+
+(useUser as jest.Mock).mockReturnValue(useUserMock());
+(useUiState as jest.Mock).mockReturnValue(useUiStateMock());
+
+const localVue = createLocalVue();
+localVue.use(PiniaVuePlugin);
+
+describe('BottomNavigation', () => {
+  it('handles "Home" button click', async () => {
+    const routerPushMock = jest.fn();
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $router: {
+            push: routerPushMock,
+          },
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const homeButton = getByTestId('bottom-navigation-home');
+    userEvent.click(homeButton);
+    await waitFor(() => {
+      expect(routerPushMock).toHaveBeenCalledWith({ name: 'home' });
+    });
+  });
+  it('handles "Menu" (categories) button click', async () => {
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const categoryStore = useCategoryStore();
+
+    const menuButton = getByTestId('bottom-navigation-menu');
+    userEvent.click(menuButton);
+    await waitFor(() => {
+      expect(categoryStore.load).toHaveBeenCalled();
+    });
+  });
+  it('handles "Wishlist" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const wishlistButton = getByTestId('bottom-navigation-wishlist');
+    userEvent.click(wishlistButton);
+    await waitFor(() => {
+      expect(useUiStateMockInstance.toggleWishlistSidebar).toHaveBeenCalled();
+    });
+  });
+  it('handles "Account" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const routerPushMock = jest.fn();
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $router: {
+            push: routerPushMock,
+          },
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const accountButton = getByTestId('bottom-navigation-account');
+    userEvent.click(accountButton);
+    await waitFor(() => {
+      expect(routerPushMock).toHaveBeenCalledWith({ name: 'customer' });
+    });
+  });
+  it('handles "Cart" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const cartButton = getByTestId('bottom-navigation-cart');
+    userEvent.click(cartButton);
+    await waitFor(() => {
+      expect(useUiStateMockInstance.toggleCartSidebar).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/theme/jest-setup.js b/packages/theme/jest-setup.js
index 4a8e87718..b30310b33 100644
--- a/packages/theme/jest-setup.js
+++ b/packages/theme/jest-setup.js
@@ -9,6 +9,7 @@ config.mocks = {
   $t: (text) => text,
   $fc: (text) => text,
   localePath: (text) => text,
+  localeRouter: (route) => route,
 };
 
 const $vsf = {
@@ -28,7 +29,7 @@ Vue.prototype.$nuxt = {
   context: {
     $vsf,
     $fc: jest.fn((label) => label),
-    localeRoute: jest.fn(() => 'some_url'),
+    localeRoute: jest.fn((route) => route),
     localePath: jest.fn((link) => link),
     app: {
       // $vsf intentionally doubled in context top level AND in context.app - this is the way it's in the app
@@ -38,7 +39,7 @@ Vue.prototype.$nuxt = {
       },
       $fc: jest.fn((label) => label),
       localePath: jest.fn((link) => link),
-      localeRoute: jest.fn(() => 'some_url'),
+      localeRoute: jest.fn((path) => path),
     },
     i18n: {
       t: jest.fn((label) => label),
diff --git a/packages/theme/test-utils/mocks/useUiState.ts b/packages/theme/test-utils/mocks/useUiState.ts
index d9a35a982..158f191a0 100644
--- a/packages/theme/test-utils/mocks/useUiState.ts
+++ b/packages/theme/test-utils/mocks/useUiState.ts
@@ -4,6 +4,7 @@ export const useUiStateMock = (extend = {}) => ({
   changeToCategoryListView: jest.fn(),
   toggleCartSidebar: jest.fn(),
   toggleFilterSidebar: jest.fn(),
+  toggleWishlistSidebar: jest.fn(),
   toggleMobileMenu: jest.fn(),
   ...extend,
 });