123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { render, screen } from '@testing-library/react';
|
|
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
|
|
import {
|
|
registerExpressPaymentMethod,
|
|
__experimentalDeRegisterExpressPaymentMethod,
|
|
} from '@woocommerce/blocks-registry';
|
|
import { dispatch } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import mockEditorContext from './__mocks__/editor-context';
|
|
import { getExpectedExpressPaymentProps } from './__mocks__/express-payment-props';
|
|
import ExpressPaymentMethods from '../express-payment-methods';
|
|
jest.mock( '@woocommerce/base-context', () => ( {
|
|
useEditorContext: mockEditorContext,
|
|
} ) );
|
|
|
|
const mockExpressPaymentMethodNames = [ 'paypal', 'google pay', 'apple pay' ];
|
|
|
|
const MockExpressButton = jest.fn( ( { name } ) => (
|
|
<div className="boo">{ `${ name } button` }</div>
|
|
) );
|
|
|
|
const MockEditorExpressButton = jest.fn( ( { name } ) => (
|
|
<div>{ `${ name } preview` }</div>
|
|
) );
|
|
|
|
const registerMockExpressPaymentMethods = () => {
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
registerExpressPaymentMethod( {
|
|
name,
|
|
paymentMethodId: name,
|
|
content: <MockExpressButton name={ name } />,
|
|
edit: <MockEditorExpressButton name={ name } />,
|
|
canMakePayment: () => true,
|
|
supports: {
|
|
features: [ 'products' ],
|
|
},
|
|
} );
|
|
} );
|
|
dispatch( PAYMENT_STORE_KEY ).__internalUpdateAvailablePaymentMethods();
|
|
};
|
|
|
|
const deregisterMockExpressPaymentMethods = () => {
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
__experimentalDeRegisterExpressPaymentMethod( name );
|
|
} );
|
|
};
|
|
|
|
describe( 'Express payment methods', () => {
|
|
afterAll( () => {
|
|
jest.restoreAllMocks();
|
|
} );
|
|
describe( 'No payment methods available', () => {
|
|
it( 'should display no registered payment methods', () => {
|
|
render( <ExpressPaymentMethods /> );
|
|
|
|
const noPaymentMethods = screen.queryAllByText(
|
|
/No registered Payment Methods/
|
|
);
|
|
expect( noPaymentMethods.length ).toEqual( 1 );
|
|
} );
|
|
} );
|
|
|
|
describe( 'Payment methods available', () => {
|
|
beforeAll( () => {
|
|
registerMockExpressPaymentMethods();
|
|
} );
|
|
afterAll( () => {
|
|
deregisterMockExpressPaymentMethods();
|
|
} );
|
|
describe( 'In a frontend context', () => {
|
|
it( 'should display the element provided by paymentMethods.content', () => {
|
|
render( <ExpressPaymentMethods /> );
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
const btn = screen.getByText( `${ name } button` );
|
|
expect( btn ).toBeVisible();
|
|
} );
|
|
} );
|
|
it( 'should pass the correct properties to the rendered element', () => {
|
|
render( <ExpressPaymentMethods /> );
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
expect( MockExpressButton ).toHaveBeenCalledWith(
|
|
getExpectedExpressPaymentProps( name ),
|
|
{}
|
|
);
|
|
} );
|
|
// Expect some deprecation warnings
|
|
expect( console ).toHaveWarnedWith(
|
|
'isPristine is deprecated since version 9.6.0. Please use isIdle instead. See: https://github.com/woocommerce/woocommerce-blocks/pull/8110'
|
|
);
|
|
} );
|
|
} );
|
|
describe( 'In an editor context', () => {
|
|
beforeEach( () => {
|
|
mockEditorContext.mockImplementation( () => ( {
|
|
isEditor: true,
|
|
} ) );
|
|
} );
|
|
it( 'should display the element provided by paymentMethods.edit', () => {
|
|
render( <ExpressPaymentMethods /> );
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
const btn = screen.getByText( `${ name } preview` );
|
|
expect( btn ).toBeVisible();
|
|
} );
|
|
} );
|
|
it( 'should pass the correct properties to the rendered element', () => {
|
|
render( <ExpressPaymentMethods /> );
|
|
mockExpressPaymentMethodNames.forEach( ( name ) => {
|
|
expect( MockEditorExpressButton ).toHaveBeenCalledWith(
|
|
getExpectedExpressPaymentProps( name ),
|
|
{}
|
|
);
|
|
} );
|
|
} );
|
|
} );
|
|
} );
|
|
} );
|