Fix products incorrectly marked as discounted (#11386)

* Fix: Remove incorrect discount label

We don't want to mark a product as having a discount when price includes
additional costs

* Add "goToCart" E2E helper function

* Add the CartPage class

* Add the Cart product price E2E tests

* Remove unnecessary comments

* Mark the Cart shopper E2E testing file as a having side effects

* Fix the "Strict mode violation" error

* Try another fix for the "Strict mode violation"

assets/js/base/components/product-price/index.tsx

@@ -280,7 +280,7 @@ const ProductPrice = ( {
 		console.error( 'Price formats need to include the `<price/>` tag.' );
 	}
 
-	const isDiscounted = regularPrice && price !== regularPrice;
+	const isDiscounted = regularPrice && price && price < regularPrice;
 	let priceComponent = (
 		<span
 			className={ classNames(

tests/e2e/tests/cart/cart-block.shopper.block_theme.side_effects.spec.ts

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
+import {
+	installPluginFromPHPFile,
+	uninstallPluginFromPHPFile,
+} from '@woocommerce/e2e-mocks/custom-plugins';
+
+/**
+ * Internal dependencies
+ */
+import { CartPage } from './cart.page';
+import {
+	DISCOUNTED_PRODUCT_NAME,
+	REGULAR_PRICED_PRODUCT_NAME,
+} from '../checkout/constants';
+
+const test = base.extend< { pageObject: CartPage } >( {
+	pageObject: async ( { page }, use ) => {
+		const pageObject = new CartPage( {
+			page,
+		} );
+		await use( pageObject );
+	},
+} );
+
+test.describe( 'Shopper → Cart block', () => {
+	test( 'The discount label is only visible next to the discounted product', async ( {
+		pageObject,
+		frontendUtils,
+	} ) => {
+		await frontendUtils.goToShop();
+		await frontendUtils.emptyCart();
+		await frontendUtils.addToCart( DISCOUNTED_PRODUCT_NAME );
+		await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME );
+		await frontendUtils.goToCart();
+		// Check for discount on the discounted product
+		const discountedProductRow = await pageObject.findProductRow(
+			DISCOUNTED_PRODUCT_NAME
+		);
+		await expect( discountedProductRow ).toBeVisible();
+		const capRegularPriceElement = discountedProductRow.locator(
+			'.wc-block-components-product-price__regular'
+		);
+		const capDiscountedPriceElement = discountedProductRow.locator(
+			'.wc-block-components-product-price__value.is-discounted'
+		);
+		await expect( capRegularPriceElement ).toBeVisible();
+		await expect( capDiscountedPriceElement ).toBeVisible();
+
+		// Check for absence of discount on the regular priced product
+		const regularPricedProductRow = await pageObject.findProductRow(
+			REGULAR_PRICED_PRODUCT_NAME
+		);
+		await expect( regularPricedProductRow ).toBeVisible();
+		const hoodieRegularPriceElement = regularPricedProductRow.locator(
+			'.wc-block-components-product-price__regular'
+		);
+		const hoodieDiscountedPriceElement = regularPricedProductRow.locator(
+			'.wc-block-components-product-price__value.is-discounted'
+		);
+		await expect( hoodieRegularPriceElement ).toBeHidden();
+		await expect( hoodieDiscountedPriceElement ).toBeHidden();
+	} );
+
+	test( 'Products with updated prices should not display a discount label', async ( {
+		pageObject,
+		frontendUtils,
+	} ) => {
+		await installPluginFromPHPFile(
+			`${ __dirname }/update-price-plugin.php`
+		);
+		await frontendUtils.goToShop();
+		await frontendUtils.emptyCart();
+		await frontendUtils.addToCart( DISCOUNTED_PRODUCT_NAME );
+		await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME );
+		await frontendUtils.goToCart();
+
+		// Ensure no discount label is present on the products in the cart
+		const capRow = await pageObject.findProductRow(
+			DISCOUNTED_PRODUCT_NAME
+		);
+		await expect( capRow ).toBeVisible();
+		const capRegularPriceElement = capRow.locator(
+			'.wc-block-components-product-price__regular'
+		);
+		const capDiscountedPriceElement = capRow.locator(
+			'.wc-block-components-product-price__value.is-discounted'
+		);
+		await expect( capRegularPriceElement ).toBeHidden();
+		await expect( capDiscountedPriceElement ).toBeHidden();
+
+		// Locate the price element within the Cap product row
+		const capPriceElement = capRow
+			.locator( '.wc-block-components-product-price__value' )
+			.first();
+		await expect( capPriceElement ).toBeVisible();
+
+		// Get the text content of the price element and check the price
+		const capPriceText = await capPriceElement.textContent();
+		expect( capPriceText ).toBe( '$50.00' );
+
+		const hoodieRow = await pageObject.findProductRow(
+			REGULAR_PRICED_PRODUCT_NAME
+		);
+		await expect( hoodieRow ).toBeVisible();
+		const hoodieRegularPriceElement = hoodieRow.locator(
+			'.wc-block-components-product-price__regular'
+		);
+		const hoodieDiscountedPriceElement = hoodieRow.locator(
+			'.wc-block-components-product-price__value.is-discounted'
+		);
+		await expect( hoodieRegularPriceElement ).toBeHidden();
+		await expect( hoodieDiscountedPriceElement ).toBeHidden();
+
+		// Locate the price element within the Hoodie with Logo product row
+		const hoodiePriceElement = hoodieRow
+			.locator( '.wc-block-components-product-price__value' )
+			.first();
+		await expect( hoodiePriceElement ).toBeVisible();
+
+		// Get the text content of the price element and check the price
+		const hoodiePriceText = await hoodiePriceElement.textContent();
+		expect( hoodiePriceText ).toBe( '$50.00' );
+
+		await uninstallPluginFromPHPFile(
+			`${ __dirname }/update-price-plugin.php`
+		);
+	} );
+} );

tests/e2e/tests/cart/cart.page.ts

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { Page } from '@playwright/test';
+
+export class CartPage {
+	public page: Page;
+
+	constructor( { page }: { page: Page } ) {
+		this.page = page;
+	}
+
+	async findProductRow( productName: string ) {
+		await this.page.waitForSelector( '.wc-block-cart-items__row' );
+		const productRows = this.page.locator( '.wc-block-cart-items__row' );
+		const rowCount = await productRows.count();
+
+		for ( let i = 0; i < rowCount; i++ ) {
+			const productRow = productRows.nth( i );
+			const nameElement = productRow.locator(
+				'.wc-block-components-product-name'
+			);
+			const nameText = await nameElement.innerText();
+			if ( nameText === productName ) {
+				return productRow;
+			}
+		}
+
+		return productRows;
+	}
+}

tests/e2e/tests/cart/update-price-plugin.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Plugin Name: Update Price
+ * Description: Update price of products
+ * @package     WordPress
+ */
+
+/**
+ * Update price of products
+ *
+ * @param object $cart_object Cart object.
+ */
+function calc_price( $cart_object ) {
+	foreach ( $cart_object->get_cart() as $hash => $value ) {
+		$value['data']->set_price( 50 );
+	}
+}
+
+add_action( 'woocommerce_before_calculate_totals', 'calc_price' );

tests/e2e/tests/checkout/constants.ts

@@ -4,3 +4,5 @@ export const FREE_SHIPPING_NAME = 'Free shipping';
 export const FREE_SHIPPING_PRICE = '$0.00';
 export const FLAT_RATE_SHIPPING_NAME = 'Flat rate shipping';
 export const FLAT_RATE_SHIPPING_PRICE = '$10.00';
+export const DISCOUNTED_PRODUCT_NAME = 'Cap';
+export const REGULAR_PRICED_PRODUCT_NAME = 'Polo';

tests/e2e/utils/frontend/frontend-utils.page.ts

@@ -50,6 +50,12 @@ export class FrontendUtils {
 		} );
 	}
 
+	async goToCart() {
+		await this.page.goto( '/cart', {
+			waitUntil: 'commit',
+		} );
+	}
+
 	async goToShop() {
 		await this.page.goto( '/shop', {
 			waitUntil: 'commit',