diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
index 386dd514510..7df91e7a82a 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
@@ -85,8 +85,12 @@ const paymentGatewaySuggestions = [
},
];
+const paymentGatewaySuggestionsWithoutWCPay = paymentGatewaySuggestions.filter(
+ ( p ) => p.title !== 'WooCommerce Payments'
+);
+
describe( 'PaymentGatewaySuggestions', () => {
- test( 'should render payment gateway lists', () => {
+ test( 'should render only WCPay if its suggested', () => {
const onComplete = jest.fn();
const query = {};
useSelect.mockImplementation( () => ( {
@@ -111,6 +115,38 @@ describe( 'PaymentGatewaySuggestions', () => {
( e ) => e.textContent
);
+ expect( paymentTitles ).toEqual( [] );
+
+ expect(
+ container.getElementsByTagName( 'title' )[ 0 ].textContent
+ ).toBe( 'WooCommerce Payments' );
+ } );
+
+ test( 'should render all payment gateways if no WCPay', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
+ installedPaymentGateways: [],
+ } ) );
+
+ const { container } = render(
+
+ );
+
+ const paymentTitleElements = container.querySelectorAll(
+ '.woocommerce-task-payment__title'
+ );
+
+ const paymentTitles = Array.from( paymentTitleElements ).map(
+ ( e ) => e.textContent
+ );
+
expect( paymentTitles ).toEqual( [
'Stripe',
'PayPal Payments',
@@ -118,10 +154,6 @@ describe( 'PaymentGatewaySuggestions', () => {
'Cash on delivery',
'Direct bank transfer',
] );
-
- expect(
- container.getElementsByTagName( 'title' )[ 0 ].textContent
- ).toBe( 'WooCommerce Payments' );
} );
test( 'should the payment gateway offline options at the bottom', () => {
@@ -130,7 +162,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [],
} ) );
@@ -156,7 +188,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [
{
id: 'ppcp-gateway',
@@ -186,7 +218,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [
{
id: 'ppcp-gateway',
@@ -213,4 +245,58 @@ describe( 'PaymentGatewaySuggestions', () => {
selected: 'ppcp_gateway',
} );
} );
+
+ test( 'should record event correctly when other payment methods is clicked', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions,
+ installedPaymentGateways: [],
+ } ) );
+
+ render(
+
+ );
+
+ fireEvent.click( screen.getByText( 'Other payment methods' ) );
+
+ // By default it's hidden, so when toggle it shows.
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'tasklist_payment_show_toggle',
+ {
+ toggle: 'show',
+ }
+ );
+ } );
+
+ test( 'should record event correctly when see more is clicked', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions,
+ installedPaymentGateways: [],
+ } ) );
+
+ render(
+
+ );
+
+ fireEvent.click( screen.getByText( 'Other payment methods' ) );
+ fireEvent.click( screen.getByText( 'See more' ) );
+
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'tasklist_payment_see_more',
+ {}
+ );
+ } );
} );