test: add BottomNavigation tests

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,14 +83,15 @@
 <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';
 
 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,
     };
   },
 });

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();
+    });
+  });
+});

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),

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,
 });