test: add global vue/nuxt mocks for unit tests

Author: sethidden

packages/theme/jest-setup.js

@@ -1,4 +1,35 @@
 import '@testing-library/jest-dom';
 import Vue from 'vue';
+import { config } from '@vue/test-utils';
+
+config.stubs = {
+  NuxtImg: { render(h) { return h('img'); } },
+};
+
+const $vsf = {
+  $magento: {
+    config: {
+      imageProvider: '',
+      magentoBaseUrl: '',
+      state: {},
+    },
+  },
+};
+
+// mocks object returned by useContext()
+Vue.prototype.$nuxt = {
+  context: {
+    $vsf,
+    app: {
+      // $vsf intentionally doubled in context top level AND in context.app - this is the way it's in the app
+      $vsf,
+      $fc: jest.fn((label) => label),
+      localePath: jest.fn((link) => link),
+    },
+    i18n: {
+      t: jest.fn((label) => label),
+    },
+  },
+};
 
 Vue.directive('e2e', {});

packages/theme/modules/catalog/category/components/views/__tests__/CategoryProductGrid.spec.ts

@@ -7,34 +7,6 @@ import { productsMock } from './productsMock';
 
 const localVue = createLocalVue();
 localVue.use(PiniaVuePlugin);
-localVue.component('NuxtImg', { render(h) { return h('div'); } });
-
-localVue.prototype.$nuxt = {
-  context: {
-    $vsf: {
-      $magento: {
-        config: {
-          imageProvider: '',
-          magentoBaseUrl: '',
-        },
-      },
-    },
-    app: {
-      $fc: jest.fn((label) => label),
-      localePath: jest.fn(),
-      $vsf: {
-        $magento: {
-          config: {
-            state: '',
-          },
-        },
-      },
-    },
-    i18n: {
-      t: jest.fn((label) => label),
-    },
-  },
-};
 
 describe('CategoryProductGrid', () => {
   it('shows skeleton loader when loading', async () => {
@@ -44,7 +16,14 @@ describe('CategoryProductGrid', () => {
   });
 
   it('shows products when loaded', async () => {
-    const { findAllByTestId } = render(CategoryProductGrid, { props: { loading: false, products: productsMock }, localVue, pinia: createTestingPinia() });
+    const { findAllByTestId } = render(CategoryProductGrid, {
+      props: {
+        loading: false,
+        products: productsMock,
+      },
+      localVue,
+      pinia: createTestingPinia(),
+    });
     const products = await findAllByTestId('product-card');
     expect(products).toHaveLength(productsMock.length);
   });

packages/theme/modules/catalog/category/components/views/__tests__/CategoryProductList.spec.ts

@@ -7,38 +7,32 @@ import CategoryProductList from '../CategoryProductList.vue';
 
 const localVue = createLocalVue();
 localVue.use(PiniaVuePlugin);
-localVue.component('NuxtImg', { render(h) { return h('div'); } });
-
-localVue.prototype.components = {
-  components: {
-    NuxtImg: 'div',
-  },
-};
-
-localVue.prototype.$nuxt = {
-  context: {
-    app: {
-      $vsf: {
-        $magento: {
-          config: {
-            state: '',
-          },
-        },
-      },
-    },
-    i18n: {
-      t: jest.fn((label) => label),
-    },
-  },
-};
 
 describe('CategoryProductList', () => {
-  it('hides \'Add to wishlist\' button when logged out', () => {});
-
-  it('picks correct label for wishlist button', () => {});
+  it.each([
+    [true, true],
+    [false, false],
+  ])('has correct \'Add to wishlist\' button visiblity when loggin state is %s', (isLoggedIn, expectedVisibility) => {
+    const { queryByTestId } = render(CategoryProductList, {
+      props: {
+        loading: false,
+        products: [productsMock[0]],
+      },
+      localVue,
+      pinia: createTestingPinia({ initialState: { customer: { isLoggedIn } } }),
+    });
+    expect(Boolean(queryByTestId('wishlist-button'))).toBe(expectedVisibility);
+  });
 
   it('shows skeleton loader when loading', async () => {
-    const { findAllByTestId } = render(CategoryProductList, { props: { loading: true, products: [] }, localVue, pinia: createTestingPinia() });
+    const { findAllByTestId } = render(CategoryProductList, {
+      props: {
+        loading: true,
+        products: [],
+      },
+      localVue,
+      pinia: createTestingPinia(),
+    });
     const loadingSkeletons = await findAllByTestId('skeleton');
     expect(loadingSkeletons).not.toHaveLength(0);
   });