diff --git a/packages/theme/components/CurrencySelector/CurrenciesModal.vue b/packages/theme/components/CurrencySelector/CurrenciesModal.vue index 8f2ba806c..5df7fdcbf 100644 --- a/packages/theme/components/CurrencySelector/CurrenciesModal.vue +++ b/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(() => currencies.value?.available_currency_codes || []); onMounted(() => { if (currencies.value && currencies.value?.available_currency_codes) return; diff --git a/packages/theme/components/CurrencySelector/__tests__/CurrencySelector.spec.ts b/packages/theme/components/CurrencySelector/__tests__/CurrencySelector.spec.ts new file mode 100644 index 000000000..72484a9d7 --- /dev/null +++ b/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('', () => { + 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' }); + }); +}); diff --git a/packages/theme/components/CurrencySelector/__tests__/currencyData.mock.ts b/packages/theme/components/CurrencySelector/__tests__/currencyData.mock.ts new file mode 100644 index 000000000..dfe0305a7 --- /dev/null +++ b/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, + }, + ], +}; diff --git a/packages/theme/test-utils/mocks/useCurrency.ts b/packages/theme/test-utils/mocks/useCurrency.ts new file mode 100644 index 000000000..b5507ba24 --- /dev/null +++ b/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, + }), +};