Wait until carts load before calling `canMakePayment` (https://github.com/woocommerce/woocommerce-blocks/pull/5337)

* wait till cart loads before calling canMakePayment

* fix tests
This commit is contained in:
Seghir Nadir 2021-12-08 14:41:31 +01:00 committed by GitHub
parent 311a531826
commit 8e62dea95d
2 changed files with 33 additions and 12 deletions

View File

@ -53,7 +53,12 @@ const usePaymentMethodRegistration = (
const selectedShippingMethods = useShallowEqual( selectedRates );
const paymentMethodsOrder = useShallowEqual( paymentMethodsSortOrder );
const cart = useStoreCart();
const { cartTotals, cartNeedsShipping, paymentRequirements } = cart;
const {
cartTotals,
cartIsLoading,
cartNeedsShipping,
paymentRequirements,
} = cart;
const canPayArgument = useRef( {
cart,
cartTotals,
@ -173,12 +178,15 @@ const usePaymentMethodRegistration = (
// shipping methods, cart or the billing data change.
// Some payment methods (e.g. COD) can be disabled for specific shipping methods.
useEffect( () => {
debouncedRefreshCanMakePayments();
if ( ! cartIsLoading ) {
debouncedRefreshCanMakePayments();
}
}, [
debouncedRefreshCanMakePayments,
cart,
selectedShippingMethods,
billingData,
cartIsLoading,
] );
return isInitialized;

View File

@ -2,6 +2,10 @@
* External dependencies
*/
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { previewCart } from '@woocommerce/resource-previews';
import { dispatch } from '@wordpress/data';
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
import { default as fetchMock } from 'jest-fetch-mock';
import {
registerPaymentMethod,
__experimentalDeRegisterPaymentMethod,
@ -11,20 +15,11 @@ import {
usePaymentMethodDataContext,
} from '@woocommerce/base-context';
/**
* Internal dependencies
*/
import * as useStoreCartHook from '../../../../base/context/hooks/cart/use-store-cart';
// Somewhere in your test case or test suite
useStoreCartHook.useStoreCart = jest
.fn()
.mockReturnValue( useStoreCartHook.defaultCartData );
/**
* Internal dependencies
*/
import PaymentMethods from '../payment-methods';
import { defaultCartState } from '../../../../data/default-states';
jest.mock( '../saved-payment-method-options', () => ( { onChange } ) => {
return (
@ -73,6 +68,22 @@ const resetMockPaymentMethods = () => {
};
describe( 'PaymentMethods', () => {
beforeEach( () => {
fetchMock.mockResponse( ( req ) => {
if ( req.url.match( /wc\/store\/cart/ ) ) {
return Promise.resolve( JSON.stringify( previewCart ) );
}
return Promise.resolve( '' );
} );
// need to clear the store resolution state between tests.
dispatch( storeKey ).invalidateResolutionForStore();
dispatch( storeKey ).receiveCart( defaultCartState.cartData );
} );
afterEach( () => {
fetchMock.resetMocks();
} );
test( 'should show no payment methods component when there are no payment methods', async () => {
render(
<PaymentMethodDataProvider>
@ -88,6 +99,8 @@ describe( 'PaymentMethods', () => {
// creates an extra `div` with the notice contents used for a11y.
expect( noPaymentMethods.length ).toBeGreaterThanOrEqual( 1 );
} );
// ["`select` control in `@wordpress/data-controls` is deprecated. Please use built-in `resolveSelect` control in `@wordpress/data` instead."]
expect( console ).toHaveWarned();
} );
test( 'selecting new payment method', async () => {