docs(theme): update tests for CartSidebar

Author: bartoszherba

packages/theme/components/CartSidebar.vue

@@ -132,7 +132,7 @@
                     v-else
                     class="color-danger sf-badge__absolute"
                   >
-                    <template>
+                    <template #default>
                       <span>{{ $t('Out of stock') }}</span>
                     </template>
                   </SfBadge>
@@ -230,6 +230,7 @@
   </div>
 </template>
 <script>
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import {
   SfLoader,
   SfNotification,
@@ -344,7 +345,7 @@ export default defineComponent({
     return {
       sendToRemove,
       actionRemoveItem,
-      loading,
+      loading: computed(() => (!!loading.value)),
       isAuthenticated,
       products,
       removeItem,

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,94 @@
+import userEvent from '@testing-library/user-event';
+import {
+  useCart,
+  useUser,
+} from '@vue-storefront/magento';
+
+import { useUiState } from '~/composables';
+import {
+  render, useCartMock, useUserMock, useUiStateMock, useEmptyCartMock,
+} from '~/test-utils';
+import CartSidebar from '~/components/CartSidebar';
+
+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).toHaveBeenCalledTimes(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);
+    });
+
+    it('should render "go to checkout" button', () => {
+      const { getByText } = render(CartSidebar);
+      expect(getByText('Go to checkout')).toBeTruthy();
+    });
+
+    it('should render promo code input', () => {
+      const { getByTestId } = render(CartSidebar);
+      expect(getByTestId('promoCode')).toBeTruthy();
+    });
+
+    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';