Dev: Improve test coverage of upe.js (#8945)

Co-authored-by: Daniel Guerra <daniel.guerra@automattic.com>

changelog/dev-7387-add-tests-to-upe-js

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Improve test coverage of upe.js and rename isPaymentMethodRestrictedToLocation to hasPaymentMethodCountryRestrictions

client/checkout/classic/event-handlers.js

@@ -9,7 +9,7 @@ import {
 	generateCheckoutEventNames,
 	getSelectedUPEGatewayPaymentMethod,
 	isLinkEnabled,
-	isPaymentMethodRestrictedToLocation,
+	hasPaymentMethodCountryRestrictions,
 	isUsingSavedPaymentMethod,
 	togglePaymentMethodForCountry,
 } from '../utils/upe';
@@ -228,7 +228,7 @@ jQuery( function ( $ ) {
 	}
 
 	function restrictPaymentMethodToLocation( upeElement ) {
-		if ( isPaymentMethodRestrictedToLocation( upeElement ) ) {
+		if ( hasPaymentMethodCountryRestrictions( upeElement ) ) {
 			togglePaymentMethodForCountry( upeElement );
 
 			// this event only applies to the checkout form, but not "place order" or "add payment method" pages.

client/checkout/utils/test/upe.test.js

@@ -8,6 +8,7 @@ import {
 	getStripeElementOptions,
 	blocksShowLinkButtonHandler,
 	getSelectedUPEGatewayPaymentMethod,
+	hasPaymentMethodCountryRestrictions,
 	isUsingSavedPaymentMethod,
 	dispatchChangeEventFor,
 	togglePaymentMethodForCountry,
@@ -126,6 +127,62 @@ describe( 'UPE checkout utils', () => {
 		} );
 	} );
 
+	describe( 'hasPaymentMethodCountryRestrictions', () => {
+		let container;
+
+		beforeAll( () => {
+			container = document.createElement( 'div' );
+			container.innerHTML = `
+				<ul class="wc_payment_methods payment_methods methods">
+					<li class="wc_payment_method payment_method_woocommerce_payments_card" data-payment-method-type="card">
+						<input id="payment_method_woocommerce_payments" type="radio" class="input-radio">
+					</li>
+					<li class="wc_payment_method payment_method_woocommerce_payments_bancontact" data-payment-method-type="bancontact">
+						<input id="payment_method_woocommerce_payments_bancontact" type="radio" class="input-radio">
+					</li>
+				</ul>
+			`;
+			document.body.appendChild( container );
+		} );
+
+		afterAll( () => {
+			document.body.removeChild( container );
+			container = null;
+		} );
+
+		beforeEach( () => {
+			jest.clearAllMocks();
+			getUPEConfig.mockImplementation( ( argument ) => {
+				if ( argument === 'paymentMethodsConfig' ) {
+					return {
+						card: { countries: [] },
+						bancontact: { countries: [ 'BE' ] },
+					};
+				}
+			} );
+		} );
+
+		it( 'should be true when the payment method is restricted to the location', () => {
+			const bancontactUpeElement = document.querySelector(
+				'.payment_method_woocommerce_payments_bancontact'
+			);
+
+			expect(
+				hasPaymentMethodCountryRestrictions( bancontactUpeElement )
+			).toBe( true );
+		} );
+
+		it( 'should be false when the payment method is not restricted to the location', () => {
+			const cardUpeElement = document.querySelector(
+				'.payment_method_woocommerce_payments_card'
+			);
+
+			expect(
+				hasPaymentMethodCountryRestrictions( cardUpeElement )
+			).toBe( false );
+		} );
+	} );
+
 	describe( 'togglePaymentMethodForCountry', () => {
 		let container;
 
@@ -171,7 +228,6 @@ describe( 'UPE checkout utils', () => {
 		} );
 
 		afterEach( () => {
-			// document.getElementById('billing_country').value = '';
 			window.wcpayCustomerData = null;
 		} );
 

client/checkout/utils/upe.js

@@ -292,19 +292,21 @@ export const blocksShowLinkButtonHandler = ( linkAutofill ) => {
 };
 
 /**
- * Hides payment method if it has set specific countries in the PHP class.
+ * Returns true if the payment method has configured with any country restrictions.
  *
- * @param {Object} upeElement The selector of the DOM element of particular payment method to mount the UPE element to.
+ * @param {HTMLElement} upeElement The selector of the DOM element of particular payment method to mount the UPE element to.
  * @return {boolean} Whether the payment method is restricted to selected billing country.
  **/
-export const isPaymentMethodRestrictedToLocation = ( upeElement ) => {
+export const hasPaymentMethodCountryRestrictions = ( upeElement ) => {
 	const paymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );
 	const paymentMethodType = upeElement.dataset.paymentMethodType;
 	return !! paymentMethodsConfig[ paymentMethodType ].countries.length;
 };
 
 /**
- * @param {Object} upeElement The selector of the DOM element of particular payment method to mount the UPE element to.
+ * Hides payment method if it has set specific countries in the PHP class.
+ *
+ * @param {HTMLElement} upeElement The selector of the DOM element of particular payment method to mount the UPE element to.
  **/
 export const togglePaymentMethodForCountry = ( upeElement ) => {
 	const paymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );