test: useCurrency unit tests (#1119)

Author: bartoszherba

packages/theme/components/CurrencySelector/CurrenciesModal.vue

@@ -48,7 +48,10 @@ export default defineComponent({
   },
   props: {
     isModalOpen: Boolean,
-    selectedCurrency: String,
+    selectedCurrency: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['closeModal'],
   setup() {
@@ -58,7 +61,7 @@ export default defineComponent({
       load: loadCurrencies,
     } = useCurrency();
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
+    const availableCurrencies = computed<string[]>(() => currencies.value?.available_currency_codes || []);
 
     onMounted(() => {
       if (currencies.value && currencies.value?.available_currency_codes) return;

packages/theme/components/CurrencySelector/__tests__/CurrencySelector.spec.ts

@@ -0,0 +1,80 @@
+import userEvent from '@testing-library/user-event';
+import { render } from '~/test-utils';
+import CurrenciesModal from '~/components/CurrencySelector/CurrenciesModal.vue';
+import { useCurrencyMock } from '~/test-utils/mocks/useCurrency';
+import { useCurrency } from '~/composables';
+import { currencyDataMock } from '~/components/CurrencySelector/__tests__/currencyData.mock';
+
+jest.mock('~/composables', () => {
+  const originalModule = jest.requireActual('~/composables');
+  return {
+    ...originalModule,
+    useCurrency: jest.fn(),
+  };
+});
+
+describe('<CurrenciesModal>', () => {
+  it('does not render when closed', () => {
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+    const { queryByRole } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: false,
+      },
+    });
+
+    expect(queryByRole('heading', { name: /change store/i })).toBeNull();
+  });
+
+  it('emits "closeModal" event on close', async () => {
+    const user = userEvent.setup();
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+    const { getAllByRole, emitted } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: true,
+      },
+    });
+
+    const closeBtn = getAllByRole('button', { name: /close/i })[0];
+
+    await user.click(closeBtn);
+
+    expect(emitted()).toHaveProperty('closeModal');
+  });
+
+  it('renders list of available stores', () => {
+    useCurrencyMock.currency.value = currencyDataMock;
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+
+    const { getByRole, getByText } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: true,
+      },
+    });
+
+    expect(getByRole('heading', { name: /choose currency/i })).toBeTruthy();
+    expect(getByText(/eur/i)).toBeTruthy();
+    expect(getByText(/pln/i)).toBeTruthy();
+    expect(getByText(/usd/i)).toBeTruthy();
+  });
+
+  it('on currency selection executes method that must trigger currency switch', async () => {
+    const user = userEvent.setup();
+    useCurrencyMock.currency.value = currencyDataMock;
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+
+    const { getByText } = render(CurrenciesModal, {
+      props: {
+        isLangModalOpen: true,
+        storeConfig: { store_code: 'default' },
+      },
+    });
+
+    const eurSwitchBtn = getByText(/eur/i);
+    await user.click(eurSwitchBtn);
+
+    expect(useCurrencyMock.change).toBeCalledWith({ id: 'EUR' });
+  });
+});

packages/theme/components/CurrencySelector/__tests__/currencyData.mock.ts

@@ -0,0 +1,31 @@
+export const currencyDataMock = {
+  __typename: 'Currency',
+  available_currency_codes: [
+    'EUR',
+    'PLN',
+    'USD',
+  ],
+  base_currency_code: 'USD',
+  base_currency_symbol: '$',
+  default_display_currecy_code: null,
+  default_display_currecy_symbol: null,
+  default_display_currency_code: 'USD',
+  default_display_currency_symbol: '$',
+  exchange_rates: [
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'EUR',
+      rate: 0.93,
+    },
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'PLN',
+      rate: 4.29,
+    },
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'USD',
+      rate: 1,
+    },
+  ],
+};

packages/theme/test-utils/mocks/useCurrency.ts

@@ -0,0 +1,11 @@
+import { ref } from '@nuxtjs/composition-api';
+
+export const useCurrencyMock = {
+  currency: ref({}),
+  load: jest.fn(),
+  change: jest.fn(),
+  error: ref({
+    load: null,
+    change: null,
+  }),
+};