woocommerce/plugins/woocommerce-blocks/tests/e2e/specs/performance/cart.test.js

/**
 * Internal dependencies
 */
import { shopper, getLoadingDurations } from '../../../utils';
import { SIMPLE_PHYSICAL_PRODUCT_NAME } from '../../../utils/constants';
import { logPerformanceResult } from '../../utils';

describe( 'Cart performance', () => {
	beforeAll( async () => {
		await shopper.goToShop();
		await shopper.addToCartFromShopPage( SIMPLE_PHYSICAL_PRODUCT_NAME );
	} );

	it( 'Loading', async () => {
		await shopper.block.goToCart();

		const results = {
			serverResponse: [],
			firstPaint: [],
			domContentLoaded: [],
			loaded: [],
			firstContentfulPaint: [],
			firstBlock: [],
			type: [],
			focus: [],
			inserterOpen: [],
			inserterHover: [],
			inserterSearch: [],
			listViewOpen: [],
		};

		let i = 3;

		// Measuring loading time.
		while ( i-- ) {
			await page.reload();
			await page.waitForSelector( '.wc-block-cart' );
			const {
				serverResponse,
				firstPaint,
				domContentLoaded,
				loaded,
				firstContentfulPaint,
				firstBlock,
			} = await getLoadingDurations();

			// Multiply by 1000 to get time in ms
			results.serverResponse.push( serverResponse * 1000 );
			results.firstPaint.push( firstPaint * 1000 );
			results.domContentLoaded.push( domContentLoaded * 1000 );
			results.loaded.push( loaded * 1000 );
			results.firstContentfulPaint.push( firstContentfulPaint * 1000 );
			results.firstBlock.push( firstBlock * 1000 );
		}

		Object.entries( results ).forEach( ( [ name, value ] ) => {
			if (
				Array.isArray( value ) &&
				value.every( ( x ) => typeof x === 'number' ) &&
				value.length === 0
			) {
				return;
			}
			logPerformanceResult( `Cart block loading: (${ name })`, value );
		} );

		// To stop warning about no assertions.
		expect( true ).toBe( true );
	} );

	it( 'Quantity change', async () => {
		await shopper.block.goToCart();
		await page.waitForSelector(
			'button.wc-block-components-quantity-selector__button--plus'
		);
		let i = 3;

		const timesForResponse = [];
		while ( i-- ) {
			const start = performance.now();
			await expect( page ).toClick(
				'button.wc-block-components-quantity-selector__button--plus'
			);
			await page.waitForResponse(
				( response ) =>
					response.url().indexOf( '/wc/store/v1/batch' ) !== -1 &&
					response.status() === 207
			);
			const end = performance.now();
			timesForResponse.push( end - start );
		}
		logPerformanceResult(
			'Cart block: Change cart item quantity',
			timesForResponse
		);
	} );

	it( 'Coupon entry', async () => {
		await shopper.block.goToCart();
		await page.waitForSelector(
			'button.wc-block-components-quantity-selector__button--plus'
		);
		let i = 3;

		const timesForResponse = [];
		while ( i-- ) {
			const start = performance.now();
			await expect( page ).toClick( 'button', { text: 'Coupon code' } );
			await expect( page ).toFill(
				'[aria-label="Enter code"]',
				'test_coupon'
			);
			await expect( page ).toClick( 'button', { text: 'Apply' } );
			await page.waitForResponse(
				( response ) =>
					response.url().indexOf( '/wc/store/v1/batch' ) !== -1 &&
					response.status() === 207
			);
			const end = performance.now();
			// Close the coupon panel.
			await expect( page ).toClick( 'button', { text: 'Coupon code' } );
			timesForResponse.push( end - start );
		}
		logPerformanceResult( 'Cart block: Coupon entry', timesForResponse );
	} );
} );