Fix card fields rendered multiple times

This commit is contained in:
Emili Castells Guasch 2024-07-29 12:18:41 +02:00
parent 6fbdb9417b
commit 6f7270c35b
5 changed files with 41 additions and 30 deletions

View file

@ -1,6 +1,13 @@
import { cardFieldStyles } from './CardFieldsHelper';
let fieldsRendered = false;
export function renderFields( cardFields ) {
if ( fieldsRendered === true ) {
return;
}
fieldsRendered = true;
const nameField = document.getElementById(
'ppcp-credit-card-gateway-card-name'
);

View file

@ -7,7 +7,7 @@ require( 'dotenv' ).config( { path: '.env' } );
* @see https://playwright.dev/docs/test-configuration
*/
module.exports = defineConfig( {
timeout: 60000,
timeout: 30000,
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: false,

View file

@ -0,0 +1,22 @@
const { test, expect } = require( '@playwright/test' );
const { loginAsCustomer } = require( './utils/user' );
const { openPaypalPopup, loginIntoPaypal } = require( './utils/paypal-popup' );
test( 'PayPal logged-in user free trial subscription without payment token', async ( {
page,
} ) => {
await loginAsCustomer( page );
await page.goto( '/product/free-trial' );
await page.click( 'text=Sign up now' );
await page.goto( '/classic-checkout' );
const popup = await openPaypalPopup( page );
await loginIntoPaypal( popup );
popup.locator( '#consentButton' ).click();
await page.click( 'text=Proceed to PayPal' );
const title = await page.locator( '.entry-title' );
await expect( title ).toHaveText( 'Order received' );
} );

View file

@ -93,19 +93,20 @@ test.describe( 'Classic checkout', () => {
await page.click( 'text=Credit Cards' );
const creditCardNumber = page
.frameLocator( '#braintree-hosted-field-number' )
.locator( '#credit-card-number' );
const creditCardNumber = await page
.frameLocator( '[title="paypal_card_number_field"]' )
.locator( '.card-field-number' );
await creditCardNumber.fill( CREDIT_CARD_NUMBER );
const expirationDate = page
.frameLocator( '#braintree-hosted-field-expirationDate' )
.locator( '#expiration' );
await expirationDate.fill( CREDIT_CARD_EXPIRATION );
const expirationDate = await page
.frameLocator( 'iframe[title="paypal_card_expiry_field"]' )
.locator( 'input.card-field-expiry' );
await expirationDate.click();
await page.keyboard.type( CREDIT_CARD_EXPIRATION );
const cvv = page
.frameLocator( '#braintree-hosted-field-cvv' )
.locator( '#cvv' );
const cvv = await page
.frameLocator( '[title="paypal_card_cvv_field"]' )
.locator( '.card-field-cvv' );
await cvv.fill( CREDIT_CARD_CVV );
await Promise.all( [

View file

@ -82,22 +82,3 @@ test( 'ACDC add payment method', async ( { page } ) => {
await page.waitForURL( '/my-account/payment-methods' );
} );
test( 'PayPal logged-in user free trial subscription without payment token', async ( {
page,
} ) => {
await loginAsCustomer( page );
await page.goto( '/product/free-trial' );
await page.click( 'text=Sign up now' );
await page.goto( '/classic-checkout' );
const popup = await openPaypalPopup( page );
await loginIntoPaypal( popup );
popup.locator( '#consentButton' ).click();
await page.click( 'text=Proceed to PayPal' );
const title = await page.locator( '.entry-title' );
await expect( title ).toHaveText( 'Order received' );
} );