test(theme): add cartSidebar tests

Author: bartoszherba

packages/theme/components/SearchResults.vue

@@ -36,7 +36,7 @@
               >
                 <SfMenuItem
                   :label="category.label"
-                  :link="localePath(th.getAgnosticCatLink(category))"
+                  :link="th.getAgnosticCatLink(category)"
                 >
                   <template #mobile-nav-icon>
                     &#8203;
@@ -76,7 +76,7 @@
                   :image="productGetters.getProductThumbnailImage(product)"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
-                  :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                  :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
                   :wishlist-icon="isAuthenticated ? 'heart' : ''"
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
@@ -96,7 +96,7 @@
                 :image="productGetters.getProductThumbnailImage(product)"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
-                :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
                 :wishlist-icon="isAuthenticated ? 'heart' : ''"
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"

packages/theme/components/__tests__/CartSidebar.spec.js

@@ -0,0 +1,86 @@
+import userEvent from '@testing-library/user-event';
+import {
+  useExternalCheckout,
+  useCart,
+  useUser,
+} from '@vue-storefront/magento';
+
+import { useUiState } from '~/composables';
+import {
+  render, useCartMock, useUserMock, useUiStateMock, useEmptyCartMock,
+} from '~/test-utils';
+import CartSidebar from '~/components/CartSidebar';
+import stockStatusEnum from '~/enums/stockStatusEnum';
+
+jest.mock('@vue-storefront/magento', () => ({
+  ...jest.requireActual('@vue-storefront/magento'),
+  useExternalCheckout: jest.fn(() => ({ initializeCheckout: {} })),
+  useCart: jest.fn(),
+  useUser: jest.fn(),
+}));
+
+jest.mock('~/composables/useUiState');
+
+useUser.mockReturnValue(useUserMock());
+useCart.mockReturnValue(useCartMock());
+
+describe('<CartSidebar>', () => {
+  it('should be not visible by default', () => {
+    useUiState.mockReturnValue(useUiStateMock());
+    const { queryByText } = render(CartSidebar);
+    expect(queryByText('My Cart')).toBeNull();
+  });
+
+  describe('If the cart is empty', () => {
+    beforeAll(() => {
+      useCart.mockReturnValue(useEmptyCartMock());
+    });
+    describe('And the cart sidebar is open', () => {
+      it('should render empty state', () => {
+        useUiState.mockReturnValue(useUiStateMock({ isCartSidebarOpen: true }));
+        const { queryByText } = render(CartSidebar);
+        expect(queryByText('Your cart is empty')).toBeTruthy();
+      });
+
+      it('go back button must close the cart sidebar', () => {
+        const uiStateMock = useUiStateMock({ isCartSidebarOpen: true });
+        useUiState.mockReturnValue(uiStateMock);
+        const { queryByText } = render(CartSidebar);
+        const closeSidebarBtn = queryByText('Go back shopping');
+        expect(closeSidebarBtn).toBeTruthy();
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        userEvent.click(closeSidebarBtn);
+        expect(uiStateMock.toggleCartSidebar.mock.calls).toHaveLength(1);
+      });
+    });
+  });
+
+  describe('If the cart has two products', () => {
+    beforeAll(() => {
+      useCart.mockReturnValue(useCartMock());
+      useUiState.mockReturnValue(useUiStateMock({ isCartSidebarOpen: true }));
+    });
+
+    it('should render two Product Cards', () => {
+      const { container } = render(CartSidebar);
+      const productCards = container.querySelectorAll('div.sf-collected-product');
+      expect(productCards).toHaveLength(2);
+    });
+
+    it('should display proper total items value', () => {
+      const { container } = render(CartSidebar);
+      const totalItemsLValue = container.querySelector('div.cart-summary .sf-property__value');
+      const totalItemsLabel = container.querySelector('div.cart-summary .sf-property__name');
+      expect(totalItemsLabel).toHaveTextContent('Total items');
+      expect(totalItemsLValue).toHaveTextContent(2);
+    });
+
+    describe('And exactly one product is out of stock', () => {
+      it('should display exactly one out of stock badge', () => {
+        const { getAllByText } = render(CartSidebar);
+        expect(getAllByText('Out of stock')).toHaveLength(1);
+      });
+    });
+  });
+});

packages/theme/test-utils.js

@@ -1,15 +1,18 @@
 import { render } from '@testing-library/vue';
 
 const $t = (text) => text;
-
+const $n = (text) => text;
+const localePath = (path) => path;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 const customRender = (component, options = {}, callback = null) => render(component, {
   mocks: {
     $t,
+    $n,
+    localePath,
     $nuxt: {
       context: {
         app: {
-          localePath: (path) => path,
+          localePath,
         },
       },
     },

packages/theme/test-utils/mocks/cartGetters.js

@@ -0,0 +1,11 @@
+import stockStatusEnum from '~/enums/stockStatusEnum';
+
+export const cartGettersMock = (extend = {}) => ({
+  getItems: jest.fn(() => []),
+  getTotals: jest.fn(() => 0),
+  getTotalItems: jest.fn(),
+  getStockStatus: jest.fn(() => stockStatusEnum.inStock),
+  ...extend,
+});
+
+export default cartGettersMock;

packages/theme/test-utils/mocks/index.js

@@ -1,2 +1,5 @@
 export * from './useGuestUser';
 export * from './useUser';
+export * from './useCart';
+export * from './useUiState';
+export * from './cartGetters';

packages/theme/test-utils/mocks/useCart.js

@@ -0,0 +1,53 @@
+import stockStatusEnum from '~/enums/stockStatusEnum';
+
+export const useEmptyCartMock = (cartData = {}) => ({
+  load: jest.fn(),
+  loading: {
+    value: false,
+  },
+  removeItem: jest.fn(),
+  updateItemQty: jest.fn(),
+  cart: {
+    value: {},
+  },
+  ...cartData,
+});
+
+export const useCartMock = (cartData = {}) => ({
+  load: jest.fn(),
+  loading: {
+    value: false,
+  },
+  removeItem: jest.fn(),
+  updateItemQty: jest.fn(),
+  cart: {
+    value: {
+      items: [
+        {
+          product: {
+            stock_status: stockStatusEnum.outOfStock,
+            name: 'Test Product 1',
+            sku: 'sku1',
+            key: '1',
+            image: 'https://image1.com',
+            title: 'Title1',
+            link: 'https://link1.com',
+          },
+        },
+        {
+          product: {
+            stock_status: stockStatusEnum.inStock,
+            name: 'Test Product 2',
+            sku: 'sku2',
+            key: '2',
+            image: 'https://image2.com',
+            title: 'Title2',
+            link: 'https://link2.com',
+          },
+        },
+      ],
+      total_quantity: 2,
+    },
+  },
+  ...cartData,
+});

packages/theme/test-utils/mocks/useUiState.js

@@ -0,0 +1,7 @@
+export const useUiStateMock = (extend = {}) => ({
+  isCartSidebarOpen: false,
+  toggleCartSidebar: jest.fn(),
+  ...extend,
+});
+
+export default useUiStateMock;