From c596222069b4fa9e23da15aa4d516ba968d2777a Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Tue, 5 Apr 2022 11:01:03 +0800
Subject: [PATCH] Refactor tests

---
 .../PaymentGatewaySuggestions/test/index.js   | 102 ++++++++++++++++--
 1 file changed, 94 insertions(+), 8 deletions(-)

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(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		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(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		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(
+			<PaymentGatewaySuggestions
+				onComplete={ onComplete }
+				query={ query }
+			/>
+		);
+
+		fireEvent.click( screen.getByText( 'Other payment methods' ) );
+		fireEvent.click( screen.getByText( 'See more' ) );
+
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'tasklist_payment_see_more',
+			{}
+		);
+	} );
 } );