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

plugins/woocommerce-admin/client/task-list/tasks/PaymentGatewaySuggestions/components/Action.js

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

plugins/woocommerce-admin/client/task-list/tasks/PaymentGatewaySuggestions/components/List/Item.js

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

plugins/woocommerce-admin/client/task-list/tasks/PaymentGatewaySuggestions/components/List/test/list.js

@@ -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' );
+	} );
+} );

plugins/woocommerce-admin/readme.txt

@@ -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: Localize string for description #7219
 - 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: Use tab char for the CSV injection prevention. #7154
 - Fix: Use saved form values if available when switching tabs #7226