Hide "including X in taxes" when the amount of tax is 0 (#4262)

* Hide "including x in taxes" if tax amount is 0

* Add jest types to tsconfig

* Move SHOW_TAXES into component body

This is to make the code more testable and allows us to change values. There's no significant performance impact because of this change.

* Add tests and snapshots for TotalsFooterItem

assets/js/base/components/cart-checkout/totals/footer-item/index.js

@@ -18,11 +18,11 @@ import { getSetting } from '@woocommerce/settings';
  */
 import './style.scss';
 
-const SHOW_TAXES =
-	getSetting( 'taxesEnabled', true ) &&
-	getSetting( 'displayCartPricesIncludingTax', false );
-
 const TotalsFooterItem = ( { currency, values } ) => {
+	const SHOW_TAXES =
+		getSetting( 'taxesEnabled', true ) &&
+		getSetting( 'displayCartPricesIncludingTax', false );
+
 	const { total_price: totalPrice, total_tax: totalTax } = values;
 
 	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
@@ -38,14 +38,17 @@ const TotalsFooterItem = ( { currency, values } ) => {
 		validation: mustBeString,
 	} );
 
+	const parsedTaxValue = parseInt( totalTax, 10 );
+
 	return (
 		<TotalsItem
 			className="wc-block-components-totals-footer-item"
 			currency={ currency }
 			label={ label }
 			value={ parseInt( totalPrice, 10 ) }
 			description={
-				SHOW_TAXES && (
+				SHOW_TAXES &&
+				parsedTaxValue !== 0 && (
 					<p className="wc-block-components-totals-footer-item-tax">
 						{ createInterpolateElement(
 							__(
@@ -57,7 +60,7 @@ const TotalsFooterItem = ( { currency, values } ) => {
 									<FormattedMonetaryAmount
 										className="wc-block-components-totals-footer-item-tax-value"
 										currency={ currency }
-										value={ parseInt( totalTax, 10 ) }
+										value={ parsedTaxValue }
 									/>
 								),
 							}

assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is 0 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    />
+  </div>
+</div>
+`;
+
+exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is disabled 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    />
+  </div>
+</div>
+`;
+
+exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater than 0 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    >
+      <p
+        class="wc-block-components-totals-footer-item-tax"
+      >
+        Including 
+        <span
+          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+        >
+          £1.00
+        </span>
+         in taxes
+      </p>
+    </div>
+  </div>
+</div>
+`;

assets/js/base/components/cart-checkout/totals/footer-item/test/index.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TotalsFooterItem from '../index';
+import { allSettings } from '../../../../../../settings/shared/settings-init';
+
+describe( 'TotalsFooterItem', () => {
+	beforeEach( () => {
+		allSettings.taxesEnabled = true;
+		allSettings.displayCartPricesIncludingTax = true;
+	} );
+	const currency = {
+		code: 'GBP',
+		decimalSeparator: '.',
+		minorUnit: 2,
+		prefix: '£',
+		suffix: '',
+		symbol: '£',
+		thousandSeparator: ',',
+	};
+
+	const values = {
+		currency_code: 'GBP',
+		currency_decimal_separator: '.',
+		currency_minor_unit: 2,
+		currency_prefix: '£',
+		currency_suffix: '',
+		currency_symbol: '£',
+		currency_thousand_separator: ',',
+		tax_lines: [],
+		length: 2,
+		total_discount: '0',
+		total_discount_tax: '0',
+		total_fees: '0',
+		total_fees_tax: '0',
+		total_items: '7100',
+		total_items_tax: '0',
+		total_price: '8500',
+		total_shipping: '0',
+		total_shipping_tax: '0',
+		total_tax: '0',
+	};
+
+	it( 'Does not show the "including %s of tax" line if tax is 0', () => {
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ values } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'Does not show the "including %s of tax" line if tax is disabled', () => {
+		allSettings.taxesEnabled = false;
+		/* This shouldn't ever happen if taxes are disabled, but this is to test whether the taxesEnabled setting works */
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'Shows the "including %s of tax" line if tax is greater than 0', () => {
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+} );

tsconfig.base.json

@@ -20,7 +20,7 @@
 		"composite": true,
 		"rootDir": ".",
 		"typeRoots": [ "./node_modules/@types" ],
-		"types": [],
+		"types": ["jest"],
 		"paths": {
 			"@woocommerce/atomic-blocks": [ "assets/js/base/atomic/blocks" ],
 			"@woocommerce/atomic-blocks/*": [