Adding tests for Payment Gateway List component (https://github.com/woocommerce/woocommerce-admin/pull/7201)

This commit is contained in:
Joel Thiessen 2021-06-28 13:57:25 -07:00 committed by GitHub
parent 41f3d8e99a
commit b176eeca04
4 changed files with 212 additions and 0 deletions

View File

@ -55,6 +55,7 @@ export const Action = ( {
<Button <Button
className={ classes } className={ classes }
isSecondary isSecondary
role="button"
href={ manageUrl } href={ manageUrl }
onClick={ () => recordEvent( 'tasklist_payment_manage', { id } ) } onClick={ () => recordEvent( 'tasklist_payment_manage', { id } ) }
> >

View File

@ -42,6 +42,7 @@ export const Item = ( {
const hasFills = const hasFills =
Boolean( connectSlot?.fills?.length ) || Boolean( connectSlot?.fills?.length ) ||
Boolean( setupSlot?.fills?.length ); Boolean( setupSlot?.fills?.length );
const hasSetup = Boolean( const hasSetup = Boolean(
plugins.length || requiredSettings.length || hasFills plugins.length || requiredSettings.length || hasFills
); );

View File

@ -0,0 +1,209 @@
/**
* External dependencies
*/
import { render } from '@testing-library/react';
/**
* Internal dependencies
*/
import { List } from '../List';
jest.mock( '@woocommerce/tracks', () => ( {
recordEvent: jest.fn(),
} ) );
const mockGateway = {
id: 'mock-gateway',
title: 'Mock Gateway',
plugins: [],
postInstallScripts: [],
requiredSettings: [],
installed: false,
needsSetup: false,
enabled: false,
};
const defaultProps = {
heading: 'Test heading',
markConfigured: jest.fn(),
recommendation: 'testId',
paymentGateways: [ mockGateway ],
};
describe( 'PaymentGatewaySuggestions > List', () => {
it( 'should display correct heading', () => {
const { queryByText } = render( <List { ...defaultProps } /> );
expect( queryByText( defaultProps.heading ) ).toBeInTheDocument();
} );
it( 'should display gateway title', () => {
const { queryByText } = render( <List { ...defaultProps } /> );
expect( queryByText( mockGateway.title ) ).toBeInTheDocument();
} );
it( 'should display the "Enable" button when setup is NOT required', () => {
const { queryByRole } = render( <List { ...defaultProps } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Enable' );
} );
it( 'should display the "Set up" button when setup is required', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
needsSetup: true,
plugins: [ 'test-plugins' ],
},
],
};
const { queryByRole } = render( <List { ...props } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Set up' );
} );
it( 'should display the SetupRequired component when appropriate', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
needsSetup: true,
installed: true,
plugins: [ 'test-plugin' ],
},
],
};
const { queryByText } = render( <List { ...props } /> );
expect( queryByText( 'Setup required' ) ).toBeInTheDocument();
} );
it( 'should not display the SetupRequired component when not appropriate', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
needsSetup: true,
installed: false,
plugins: [ 'test-plugin' ],
},
],
};
const { queryByText } = render( <List { ...props } /> );
expect( queryByText( 'Setup required' ) ).not.toBeInTheDocument();
} );
it( 'should display the Recommended ribbon when appropriate', () => {
const props = {
...defaultProps,
recommendation: 'mock-gateway',
paymentGateways: [
{
...mockGateway,
id: 'mock-gateway',
needsSetup: true,
},
],
};
const { queryByText } = render( <List { ...props } /> );
expect( queryByText( 'Recommended' ) ).toBeInTheDocument();
} );
it( 'should not display the Recommended ribbon when gateway id does not match', () => {
const props = {
...defaultProps,
recommendation: 'mock-gateway',
paymentGateways: [
{
...mockGateway,
id: 'mock-gateway-other',
needsSetup: true,
},
],
};
const { queryByText } = render( <List { ...props } /> );
expect( queryByText( 'Recommended' ) ).not.toBeInTheDocument();
} );
it( 'should display Manage button if not enabled and does have setup', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
enabled: true,
},
],
};
const { queryByRole } = render( <List { ...props } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Manage' );
} );
it( 'should display Manage button for core plugins that are enabled', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
requiredSettings: [ 'just', 'kidding' ],
enabled: true,
plugins: [],
},
],
};
const { queryByRole } = render( <List { ...props } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Manage' );
} );
it( 'should display Manage button if it does have plugins and does not need setup', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
plugins: [ 'nope' ],
needsSetup: false,
},
],
};
const { queryByRole } = render( <List { ...props } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Manage' );
} );
it( 'should display Finish Setup button when installed but not setup', () => {
const props = {
...defaultProps,
paymentGateways: [
{
...mockGateway,
plugins: [ 'nope' ],
needsSetup: true,
installed: true,
},
],
};
const { queryByRole } = render( <List { ...props } /> );
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Finish setup' );
} );
} );

View File

@ -88,6 +88,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
- Fix: Load Analytics API only when feature is turned on #7193 - Fix: Load Analytics API only when feature is turned on #7193
- Fix: Localize string for description #7219 - Fix: Localize string for description #7219
- Fix: RemoteFreeExtension hide bundle when all of its plugins are not visible #7182 - Fix: RemoteFreeExtension hide bundle when all of its plugins are not visible #7182
- Add: Adding tests for PaymentGatewaySuggestions > List component #7201
- Fix: Report export filtering bug. #7165 - Fix: Report export filtering bug. #7165
- Fix: Use tab char for the CSV injection prevention. #7154 - Fix: Use tab char for the CSV injection prevention. #7154
- Fix: Use saved form values if available when switching tabs #7226 - Fix: Use saved form values if available when switching tabs #7226