packages/components/containers/payments/TaxCountrySelector.test.tsx

   1 import { fireEvent, render, screen } from '@testing-library/react';
   2
   3 import type { TaxCountrySelectorProps } from './TaxCountrySelector';
   4 import TaxCountrySelector from './TaxCountrySelector';
   5
   6 const setSelectedCountry = jest.fn();
   7 const setFederalStateCode = jest.fn();
   8
   9 let props: TaxCountrySelectorProps;
  10 beforeEach(() => {
  11     jest.clearAllMocks();
  12
  13     props = {
  14         selectedCountryCode: 'CH',
  15         setSelectedCountry,
  16         federalStateCode: null,
  17         setFederalStateCode,
  18     };
  19 });
  20
  21 it('should render', () => {
  22     const { container } = render(<TaxCountrySelector {...props} />);
  23     expect(container).not.toBeEmptyDOMElement();
  24 });
  25
  26 it.each([
  27     {
  28         selectedCountryCode: 'CH',
  29         federalStateCode: null,
  30         expectedText: 'Switzerland',
  31     },
  32     {
  33         selectedCountryCode: 'DE',
  34         federalStateCode: null,
  35         expectedText: 'Germany',
  36     },
  37     {
  38         selectedCountryCode: 'US',
  39         federalStateCode: 'AL',
  40         expectedText: 'United States, Alabama',
  41     },
  42     {
  43         selectedCountryCode: 'US',
  44         federalStateCode: 'OK',
  45         expectedText: 'United States, Oklahoma',
  46     },
  47     {
  48         selectedCountryCode: 'CA',
  49         federalStateCode: 'NL',
  50         expectedText: 'Canada, Newfoundland and Labrador',
  51     },
  52     {
  53         selectedCountryCode: 'CA',
  54         federalStateCode: 'AB',
  55         expectedText: 'Canada, Alberta',
  56     },
  57 ])(
  58     'should render the collapsed state for $selectedCountryCode $federalStateCode',
  59     ({ selectedCountryCode, federalStateCode, expectedText }) => {
  60         render(
  61             <TaxCountrySelector
  62                 {...props}
  63                 selectedCountryCode={selectedCountryCode}
  64                 federalStateCode={federalStateCode}
  65             />
  66         );
  67         const countryText = screen.getByTestId('billing-country-collapsed');
  68         expect(countryText).toHaveTextContent(expectedText);
  69     }
  70 );
  71
  72 it.each([
  73     {
  74         countryCode: 'US',
  75     },
  76     {
  77         countryCode: 'CA',
  78     },
  79 ])('should render the expanded state if state is required but not specified: $countryCode', () => {
  80     render(<TaxCountrySelector {...props} selectedCountryCode="US" />);
  81     const countryDropdown = screen.getByTestId('tax-country-dropdown');
  82     expect(countryDropdown).toBeInTheDocument();
  83     expect(screen.getByText('Select state')).toBeInTheDocument();
  84     expect(screen.getByTestId('tax-state-dropdown')).toBeInTheDocument();
  85 });
  86
  87 it.each([
  88     {
  89         countryCode: 'US',
  90         federalStateCode: 'AL',
  91         expectedText: 'United States, Alabama',
  92     },
  93     {
  94         countryCode: 'US',
  95         federalStateCode: 'OK',
  96         expectedText: 'United States, Oklahoma',
  97     },
  98     {
  99         countryCode: 'CA',
 100         federalStateCode: 'NL',
 101         expectedText: 'Canada, Newfoundland and Labrador',
 102     },
 103     {
 104         countryCode: 'CA',
 105         federalStateCode: 'AB',
 106         expectedText: 'Canada, Alberta',
 107     },
 108 ])(
 109     'should render the expanded state if state is required and specified: $countryCode $federalStateCode',
 110     async ({ countryCode, federalStateCode, expectedText }) => {
 111         render(<TaxCountrySelector {...props} selectedCountryCode={countryCode} federalStateCode={federalStateCode} />);
 112
 113         const countryDropdown = screen.queryByTestId('tax-country-dropdown');
 114         expect(countryDropdown).toEqual(null);
 115
 116         const countryText = screen.getByTestId('billing-country-collapsed');
 117         expect(countryText).toHaveTextContent(expectedText);
 118     }
 119 );
 120
 121 it('clicking the collapsed element should switch to uncollapsed state and open the dropdown', () => {
 122     render(<TaxCountrySelector {...props} />);
 123
 124     const countryText = screen.getByTestId('billing-country-collapsed');
 125     fireEvent.click(countryText);
 126
 127     const countryDropdown = screen.getByTestId('tax-country-dropdown');
 128     expect(countryDropdown).toBeInTheDocument();
 129
 130     // The countries from the dropdown must appear in the DOM tree
 131     expect(screen.getByText('Afghanistan')).toBeInTheDocument();
 132     expect(screen.getByText('Albania')).toBeInTheDocument();
 133     expect(screen.getByText('Algeria')).toBeInTheDocument();
 134     expect(screen.getByText('Andorra')).toBeInTheDocument();
 135     expect(screen.getByText('Angola')).toBeInTheDocument();
 136 });