fix payments banner experiment test (#33589)

test needed to be updated as the component did not call useExperiment directly anymore
This commit is contained in:
RJ 2022-06-24 13:06:11 +08:00 committed by GitHub
parent 417b694e1e
commit c9e0cccc19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 71 additions and 60 deletions

View File

@ -1,9 +1,9 @@
/**
* External dependencies
*/
import { render } from '@testing-library/react';
import { waitFor, render } from '@testing-library/react';
import { useSelect } from '@wordpress/data';
import { useExperiment } from '@woocommerce/explat';
import { loadExperimentAssignment } from '@woocommerce/explat';
/**
* Internal dependencies
@ -16,76 +16,87 @@ jest.mock( '@wordpress/data', () => ( {
} ) );
jest.mock( '@woocommerce/explat' );
const whenExperimentAssigned = (
experimentVariation: 'treatment' | 'control'
) =>
( loadExperimentAssignment as jest.Mock ).mockImplementation( () => {
return Promise.resolve( { variationName: experimentVariation } );
} );
const paymentsBannerShouldBe = async ( status: 'hidden' | 'visible' ) => {
const { container } = render( <PaymentsBannerWrapper /> );
await waitFor( () => {
container.querySelector( '.woocommerce-recommended-payments-banner' );
} );
const banner = expect(
container.querySelector( '.woocommerce-recommended-payments-banner' )
);
return status === 'visible'
? banner.toBeInTheDocument()
: banner.not.toBeInTheDocument();
};
const whenWcPay = ( {
supported,
activated,
installed,
}: {
supported: boolean;
activated: boolean;
installed: boolean;
} ) => {
( useSelect as jest.Mock ).mockReturnValue( {
installedPaymentGateways: [
installed ? { id: 'woocommerce_payments', enabled: activated } : {},
],
paymentGatewaySuggestions: supported
? [ { id: 'woocommerce_payments:us' } ]
: [],
hasFinishedResolution: true,
} );
};
describe( 'Payment Settings Banner', () => {
it( 'should render the banner if woocommerce payments is supported but setup not completed', () => {
( useSelect as jest.Mock ).mockReturnValue( {
installedPaymentGateways: [
{ id: 'woocommerce_payments', enabled: false },
],
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
} );
it( 'should render the banner if woocommerce payments is supported but setup not completed', async () => {
expect.assertions( 1 );
( useExperiment as jest.Mock ).mockImplementation( () => [
false,
{ variationName: 'treatment' },
] );
whenWcPay( { supported: true, activated: false, installed: true } );
const { container } = render( <PaymentsBannerWrapper /> );
expect(
container.querySelector(
'.woocommerce-recommended-payments-banner'
)
).toBeInTheDocument();
whenExperimentAssigned( 'treatment' );
await paymentsBannerShouldBe( 'visible' );
} );
it( 'should not render the banner if treatment is control', () => {
( useSelect as jest.Mock ).mockReturnValue( {
installedPaymentGateways: [
{ id: 'woocommerce_payments', enabled: false },
],
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
} );
it( 'should not render the banner if treatment is control', async () => {
expect.assertions( 1 );
( useExperiment as jest.Mock ).mockImplementation( () => [
false,
{ variationName: 'control' },
] );
whenWcPay( { supported: true, activated: false, installed: true } );
const { container } = render( <PaymentsBannerWrapper /> );
expect(
container.querySelector(
'.woocommerce-recommended-payments-banner'
)
).not.toBeInTheDocument();
whenExperimentAssigned( 'control' );
await paymentsBannerShouldBe( 'hidden' );
} );
it( 'should not render anything if woocommerce payments is not supported', () => {
( useSelect as jest.Mock ).mockReturnValue( {
installedPaymentGateways: [],
paymentGatewaySuggestions: [],
} );
it( 'should not render anything if woocommerce payments is not supported', async () => {
expect.assertions( 1 );
const { container } = render( <PaymentsBannerWrapper /> );
expect(
container.querySelector(
'.woocommerce-recommended-payments-banner'
)
).not.toBeInTheDocument();
whenWcPay( { supported: false, activated: false, installed: false } );
whenExperimentAssigned( 'treatment' );
await paymentsBannerShouldBe( 'hidden' );
} );
it( 'should not render anything if woocommerce payments is setup', () => {
( useSelect as jest.Mock ).mockReturnValue( {
installedPaymentGateways: [
{ id: 'woocommerce_payments', enabled: true },
],
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
} );
it( 'should not render anything if woocommerce payments is setup', async () => {
expect.assertions( 1 );
const { container } = render( <PaymentsBannerWrapper /> );
expect(
container.querySelector(
'.woocommerce-recommended-payments-banner'
)
).not.toBeInTheDocument();
whenWcPay( { supported: true, activated: true, installed: true } );
whenExperimentAssigned( 'treatment' );
await paymentsBannerShouldBe( 'hidden' );
} );
} );