From fa9bbdf2d722c7161d4fa6ee0bbbc721b2a03fd0 Mon Sep 17 00:00:00 2001
From: Francesco <frosso@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:52:24 +0100
Subject: [PATCH] fix: payment processing tests (#8295)

---
 changelog/fix-payment-processing-tests        |   5 +
 .../classic/test/payment-processing.test.js   | 103 ++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 changelog/fix-payment-processing-tests

diff --git a/changelog/fix-payment-processing-tests b/changelog/fix-payment-processing-tests
new file mode 100644
index 00000000000..3a4ba377ad1
--- /dev/null
+++ b/changelog/fix-payment-processing-tests
@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: fix: payment processing tests.
+
+
diff --git a/client/checkout/classic/test/payment-processing.test.js b/client/checkout/classic/test/payment-processing.test.js
index 8476b24b5c3..0a21648e95a 100644
--- a/client/checkout/classic/test/payment-processing.test.js
+++ b/client/checkout/classic/test/payment-processing.test.js
@@ -347,7 +347,25 @@ describe( 'Payment processing', () => {
 			}
 		} );
 	} );
+
 	afterEach( () => {
+		[
+			'billing_first_name',
+			'billing_last_name',
+			'billing_email',
+			'billing_phone',
+			'billing_city',
+			'billing_country',
+			'billing_address_1',
+			'billing_address_2',
+			'billing_postcode',
+			'billing_state',
+		].forEach( ( id ) => {
+			const element = document.getElementById( id );
+			if ( ! element ) return;
+
+			document.body.removeChild( element );
+		} );
 		jest.clearAllMocks();
 	} );
 
@@ -390,6 +408,91 @@ describe( 'Payment processing', () => {
 		expect( checkoutResult ).toBe( false );
 	} );
 
+	test( 'Payment processing creates the correct `name` attribute when both last/first name fields are removed', async () => {
+		setupBillingDetailsFields();
+		// pretending that the customizer removed the billing name field
+		document.body.removeChild(
+			document.getElementById( 'billing_first_name' )
+		);
+		document.body.removeChild(
+			document.getElementById( 'billing_last_name' )
+		);
+		getFingerprint.mockImplementation( () => {
+			return 'fingerprint';
+		} );
+
+		const mockDomElement = document.createElement( 'div' );
+		mockDomElement.dataset.paymentMethodType = 'card';
+
+		await mountStripePaymentElement( apiMock, mockDomElement );
+
+		const checkoutForm = {
+			submit: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
+			attr: jest.fn().mockReturnValue( 'checkout' ),
+		};
+
+		await processPayment( apiMock, checkoutForm, 'card' );
+
+		expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+			elements: expect.any( Object ),
+			params: {
+				billing_details: expect.objectContaining( {
+					name: undefined,
+					email: 'john.doe@example.com',
+					phone: '555-1234',
+					address: expect.any( Object ),
+				} ),
+			},
+		} );
+	} );
+
+	test( 'Payment processing creates the correct `name` attribute when last name field is removed via customizer', async () => {
+		setupBillingDetailsFields();
+		// pretending that the customizer removed the billing name field
+		document.body.removeChild(
+			document.getElementById( 'billing_first_name' )
+		);
+		getFingerprint.mockImplementation( () => {
+			return 'fingerprint';
+		} );
+
+		const mockDomElement = document.createElement( 'div' );
+		mockDomElement.dataset.paymentMethodType = 'card';
+
+		await mountStripePaymentElement( apiMock, mockDomElement );
+
+		const checkoutForm = {
+			submit: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
+			attr: jest.fn().mockReturnValue( 'checkout' ),
+		};
+
+		await processPayment( apiMock, checkoutForm, 'card' );
+
+		expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+			elements: expect.any( Object ),
+			params: {
+				billing_details: expect.objectContaining( {
+					name: 'Doe',
+					email: 'john.doe@example.com',
+					phone: '555-1234',
+					address: expect.any( Object ),
+				} ),
+			},
+		} );
+	} );
+
 	test( 'Payment processing adds billing details for checkout', async () => {
 		setupBillingDetailsFields();
 		getFingerprint.mockImplementation( () => {