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

   1 import { render } from '@testing-library/react';
   2 import { renderHook } from '@testing-library/react-hooks';
   3
   4 import { usePaypal } from '@proton/components/payments/react-extensions/usePaypal';
   5 import { PAYMENT_METHOD_TYPES } from '@proton/payments';
   6 import { type Currency } from '@proton/payments';
   7 import { apiMock, mockVerifyPayment } from '@proton/testing';
   8
   9 import PayPalView from './PayPalView';
  10
  11 const onChargeable = jest.fn();
  12 const onClick = jest.fn();
  13
  14 beforeEach(() => {
  15     jest.clearAllMocks();
  16 });
  17
  18 let amountAndCurrency = {
  19     Amount: 1000,
  20     Currency: 'EUR' as Currency,
  21 };
  22
  23 function paypalHook({
  24     isCredit,
  25     Amount,
  26     Currency,
  27     mockVerificationResult,
  28 }: {
  29     isCredit: boolean;
  30     mockVerificationResult?: boolean;
  31     Amount: number;
  32     Currency: Currency;
  33 }) {
  34     const verifyPayment = mockVerifyPayment();
  35     if (mockVerificationResult) {
  36         verifyPayment.mockVerification();
  37     }
  38
  39     return renderHook(
  40         ({ amountAndCurrency }) =>
  41             usePaypal(
  42                 {
  43                     amountAndCurrency,
  44                     onChargeable,
  45                     isCredit,
  46                 },
  47                 {
  48                     api: apiMock,
  49                     verifyPayment: mockVerifyPayment(),
  50                 }
  51             ),
  52         {
  53             initialProps: {
  54                 amountAndCurrency: {
  55                     Amount,
  56                     Currency,
  57                 },
  58             },
  59         }
  60     );
  61 }
  62
  63 it('should render', () => {
  64     const { result: paypal } = paypalHook({ isCredit: false, ...amountAndCurrency });
  65     const { result: paypalCredit } = paypalHook({ isCredit: true, ...amountAndCurrency });
  66
  67     const { container } = render(
  68         <PayPalView
  69             type="credit"
  70             paypal={paypal.current}
  71             paypalCredit={paypalCredit.current}
  72             onClick={onClick}
  73             amount={amountAndCurrency.Amount}
  74             currency={amountAndCurrency.Currency}
  75             showPaypalCredit={true}
  76             method={PAYMENT_METHOD_TYPES.PAYPAL_CREDIT}
  77         />
  78     );
  79     expect(container).not.toBeEmptyDOMElement();
  80 });
  81
  82 it('should render the message of paypal credit and "click here" button', () => {
  83     const { result: paypal } = paypalHook({ isCredit: false, ...amountAndCurrency });
  84     const { result: paypalCredit } = paypalHook({ isCredit: true, ...amountAndCurrency });
  85
  86     const { getByText, getByTestId } = render(
  87         <PayPalView
  88             type="credit"
  89             paypal={paypal.current}
  90             paypalCredit={paypalCredit.current}
  91             onClick={onClick}
  92             amount={amountAndCurrency.Amount}
  93             currency={amountAndCurrency.Currency}
  94             showPaypalCredit={true}
  95             method={PAYMENT_METHOD_TYPES.PAYPAL_CREDIT}
  96         />
  97     );
  98
  99     const message = `You must have a credit card or bank account linked with your PayPal account. If your PayPal account doesn't have that, please click on the button below.`;
 100     expect(getByText(message)).toBeInTheDocument();
 101     expect(getByTestId('paypal-credit-button')).toBeInTheDocument();
 102 });
 103
 104 it('should disable the "click here" button when triggers are disabled', () => {
 105     const { result: paypal } = paypalHook({ isCredit: false, ...amountAndCurrency });
 106     const { result: paypalCredit } = paypalHook({ isCredit: true, ...amountAndCurrency });
 107
 108     const { getByTestId } = render(
 109         <PayPalView
 110             type="credit"
 111             paypal={paypal.current}
 112             paypalCredit={paypalCredit.current}
 113             onClick={onClick}
 114             amount={amountAndCurrency.Amount}
 115             currency={amountAndCurrency.Currency}
 116             triggersDisabled={true}
 117             showPaypalCredit={true}
 118             method={PAYMENT_METHOD_TYPES.PAYPAL_CREDIT}
 119         />
 120     );
 121
 122     expect(getByTestId('paypal-credit-button')).toBeDisabled();
 123 });
 124
 125 it('should disable the "click here" button when paypal credit is in initial state', () => {
 126     const { result: paypal } = paypalHook({ isCredit: false, ...amountAndCurrency });
 127     const { result: paypalCredit } = paypalHook({ isCredit: true, ...amountAndCurrency });
 128
 129     const { getByTestId } = render(
 130         <PayPalView
 131             type="credit"
 132             paypal={paypal.current}
 133             paypalCredit={paypalCredit.current}
 134             onClick={onClick}
 135             amount={amountAndCurrency.Amount}
 136             currency={amountAndCurrency.Currency}
 137             showPaypalCredit={true}
 138             method={PAYMENT_METHOD_TYPES.PAYPAL_CREDIT}
 139         />
 140     );
 141
 142     expect(getByTestId('paypal-credit-button')).toBeDisabled();
 143 });