woocommerce/plugins/woocommerce-blocks/assets/js/data/payment/test/check-payment-methods.tsx

170 lines
4.4 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import * as wpDataFunctions from '@wordpress/data';
import { previewCart } from '@woocommerce/resource-previews';
import { PAYMENT_STORE_KEY, CART_STORE_KEY } from '@woocommerce/block-data';
import {
registerPaymentMethod,
registerExpressPaymentMethod,
__experimentalDeRegisterPaymentMethod,
__experimentalDeRegisterExpressPaymentMethod,
} from '@woocommerce/blocks-registry';
import { CanMakePaymentArgument } from '@woocommerce/types';
/**
* Internal dependencies
*/
import { checkPaymentMethodsCanPay } from '../utils/check-payment-methods';
const requiredKeyCheck = ( args: CanMakePaymentArgument ) => {
const requiredKeys = [
'billingData',
'billingAddress',
'cart',
'cartNeedsShipping',
'cartTotals',
'paymentMethods',
'paymentRequirements',
'selectedShippingMethods',
'shippingAddress',
];
const argKeys = Object.keys( args );
const requiredCartKeys = [
'cartCoupons',
'cartItems',
'crossSellsProducts',
'cartFees',
'cartItemsCount',
'cartItemsWeight',
'cartNeedsPayment',
'cartNeedsShipping',
'cartItemErrors',
'cartTotals',
'cartIsLoading',
'cartErrors',
'billingData',
'billingAddress',
'shippingAddress',
'extensions',
'shippingRates',
'isLoadingRates',
'cartHasCalculatedShipping',
'paymentRequirements',
'receiveCart',
];
const cartKeys = Object.keys( args.cart );
const requiredTotalsKeys = [
'total_items',
'total_items_tax',
'total_fees',
'total_fees_tax',
'total_discount',
'total_discount_tax',
'total_shipping',
'total_shipping_tax',
'total_price',
'total_tax',
'tax_lines',
'currency_code',
'currency_symbol',
'currency_minor_unit',
'currency_decimal_separator',
'currency_thousand_separator',
'currency_prefix',
'currency_suffix',
];
const totalsKeys = Object.keys( args.cartTotals );
return (
requiredKeys.every( ( key ) => argKeys.includes( key ) ) &&
requiredTotalsKeys.every( ( key ) => totalsKeys.includes( key ) ) &&
requiredCartKeys.every( ( key ) => cartKeys.includes( key ) )
);
};
const mockedCanMakePayment = jest.fn().mockImplementation( requiredKeyCheck );
const mockedExpressCanMakePayment = jest
.fn()
.mockImplementation( requiredKeyCheck );
const registerMockPaymentMethods = ( savedCards = true ) => {
[ 'credit-card' ].forEach( ( name ) => {
registerPaymentMethod( {
name,
label: name,
content: <div>A payment method</div>,
edit: <div>A payment method</div>,
icons: null,
canMakePayment: mockedCanMakePayment,
supports: {
showSavedCards: savedCards,
showSaveOption: true,
features: [ 'products' ],
},
ariaLabel: name,
} );
} );
[ 'express-payment' ].forEach( ( name ) => {
const Content = ( {
onClose = () => void null,
onClick = () => void null,
} ) => {
return (
<>
<button onClick={ onClick }>
{ name + ' express payment method' }
</button>
<button onClick={ onClose }>
{ name + ' express payment method close' }
</button>
</>
);
};
registerExpressPaymentMethod( {
name,
[Feature] Express Checkout Improvements (#50791) * Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00:00
title: 'Express Payment Method',
description: 'A test express payment method',
gatewayId: 'test-express-payment-method',
content: <Content />,
edit: <div>An express payment method</div>,
canMakePayment: mockedExpressCanMakePayment,
paymentMethodId: name,
supports: {
features: [ 'products' ],
},
} );
} );
wpDataFunctions
.dispatch( PAYMENT_STORE_KEY )
.__internalUpdateAvailablePaymentMethods();
wpDataFunctions.dispatch( CART_STORE_KEY ).receiveCart( {
...previewCart,
payment_methods: [ 'cheque', 'bacs', 'credit-card' ],
} );
};
const resetMockPaymentMethods = () => {
[ 'cheque', 'bacs', 'credit-card' ].forEach( ( name ) => {
__experimentalDeRegisterPaymentMethod( name );
} );
[ 'express-payment' ].forEach( ( name ) => {
__experimentalDeRegisterExpressPaymentMethod( name );
} );
};
describe( 'checkPaymentMethods', () => {
beforeEach( registerMockPaymentMethods );
afterEach( resetMockPaymentMethods );
it( `Sends correct arguments to regular payment methods' canMakePayment functions`, async () => {
await checkPaymentMethodsCanPay();
expect( mockedCanMakePayment ).toHaveReturnedWith( true );
} );
it( `Sends correct arguments to express payment methods' canMakePayment functions`, async () => {
await checkPaymentMethodsCanPay( true );
expect( mockedExpressCanMakePayment ).toHaveReturnedWith( true );
} );
} );