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

   1 import { fireEvent, render, waitFor } from '@testing-library/react';
   2 import { renderHook } from '@testing-library/react-hooks';
   3
   4 import { Autopay } from '@proton/payments';
   5
   6 import { getStoreWrapper } from '../contacts/tests/render';
   7 import RenewToggle, { useRenewToggle } from './RenewToggle';
   8
   9 jest.mock('@proton/components/components/portal/Portal');
  10 jest.mock('@proton/components/components/toggle/Toggle');
  11
  12 beforeEach(() => {
  13     jest.clearAllMocks();
  14 });
  15
  16 const { Wrapper } = getStoreWrapper();
  17
  18 it('should render', () => {
  19     const { result } = renderHook(() => useRenewToggle({}), { wrapper: Wrapper });
  20     const { container } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  21
  22     expect(container).not.toBeEmptyDOMElement();
  23 });
  24
  25 it('should be checked when RenewState is Active', () => {
  26     const { result } = renderHook(() => useRenewToggle({}), { wrapper: Wrapper });
  27     const { getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  28
  29     expect(getByTestId('toggle-subscription-renew')).toHaveTextContent('CHECKED');
  30 });
  31
  32 it('should be unchecked when RenewState is Disabled', () => {
  33     const { result } = renderHook(() => useRenewToggle({ initialRenewState: Autopay.DISABLE }), { wrapper: Wrapper });
  34     const { getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  35
  36     expect(getByTestId('toggle-subscription-renew')).not.toHaveTextContent('CHECKED');
  37 });
  38
  39 it('should show modal when user disables auto renew', () => {
  40     const { result } = renderHook(() => useRenewToggle({}), { wrapper: Wrapper });
  41     const { container, rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  42
  43     fireEvent.click(getByTestId('toggle-subscription-renew'));
  44     rerender(<RenewToggle {...result.current} />);
  45
  46     expect(container).toHaveTextContent('Our system will no longer auto-charge you using this payment method');
  47 });
  48
  49 it('should not toggle off if user clicked Keep auto-pay/Cancel', async () => {
  50     const { result, rerender: rerenderHook } = renderHook(() => useRenewToggle({}), { wrapper: Wrapper });
  51     const { container, rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  52
  53     fireEvent.click(getByTestId('toggle-subscription-renew'));
  54     rerenderHook();
  55     rerender(<RenewToggle {...result.current} />);
  56     expect(container).toHaveTextContent('Are you sure?');
  57
  58     fireEvent.click(getByTestId('action-keep-autopay'));
  59     await waitFor(() => {});
  60     rerenderHook();
  61     rerender(<RenewToggle {...result.current} />);
  62
  63     expect(getByTestId('toggle-subscription-renew')).toHaveTextContent('CHECKED');
  64 });
  65
  66 it('should toggle off if user clicked Disable', async () => {
  67     const { result, rerender: rerenderHook } = renderHook(() => useRenewToggle({}), { wrapper: Wrapper });
  68     const { container, rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  69
  70     fireEvent.click(getByTestId('toggle-subscription-renew'));
  71     rerenderHook();
  72     rerender(<RenewToggle {...result.current} />);
  73     expect(container).toHaveTextContent('Are you sure?');
  74
  75     fireEvent.click(getByTestId('action-disable-autopay'));
  76     await waitFor(() => {});
  77     rerenderHook();
  78     rerender(<RenewToggle {...result.current} />);
  79
  80     await waitFor(() => {
  81         expect(getByTestId('toggle-subscription-renew')).not.toHaveTextContent('CHECKED');
  82     });
  83 });
  84
  85 it('should toggle on without modal', async () => {
  86     const { result, rerender: rerenderHook } = renderHook(
  87         () => useRenewToggle({ initialRenewState: Autopay.DISABLE }),
  88         { wrapper: Wrapper }
  89     );
  90     const { container, rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
  91
  92     fireEvent.click(getByTestId('toggle-subscription-renew'));
  93     await waitFor(() => {});
  94     rerenderHook();
  95     rerender(<RenewToggle {...result.current} />);
  96
  97     expect(container).not.toHaveTextContent('Our system will no longer auto-charge you using this payment method');
  98
  99     expect(getByTestId('toggle-subscription-renew')).toHaveTextContent('CHECKED');
 100 });
 101
 102 describe('useRenewToggle', () => {
 103     it('onChange should return ENABLE if toggled on', async () => {
 104         const { result } = renderHook(() => useRenewToggle({ initialRenewState: Autopay.DISABLE }), {
 105             wrapper: Wrapper,
 106         });
 107
 108         expect(await result.current.onChange()).toEqual(Autopay.ENABLE);
 109     });
 110
 111     it('onChange should return DISABLE if toggled off', async () => {
 112         const { result } = renderHook(() => useRenewToggle({ initialRenewState: Autopay.ENABLE }), {
 113             wrapper: Wrapper,
 114         });
 115         const { rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
 116
 117         const onChangePromise = result.current.onChange();
 118         rerender(<RenewToggle {...result.current} />);
 119
 120         fireEvent.click(getByTestId('action-disable-autopay'));
 121
 122         expect(await onChangePromise).toEqual(Autopay.DISABLE);
 123     });
 124
 125     it('onChange should return null if the checkbox was not toggled off', async () => {
 126         const { result } = renderHook(() => useRenewToggle({ initialRenewState: Autopay.ENABLE }), {
 127             wrapper: Wrapper,
 128         });
 129         const { rerender, getByTestId } = render(<RenewToggle {...result.current} />, { wrapper: Wrapper });
 130
 131         const onChangePromise = result.current.onChange();
 132         rerender(<RenewToggle {...result.current} />);
 133
 134         fireEvent.click(getByTestId('action-keep-autopay'));
 135
 136         expect(await onChangePromise).toEqual(null);
 137     });
 138 });