Add unit tests for disputed order notices of WP Admin (#9640)

changelog/dev-add-unit-tests-for-diputed-order-notice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add Jest tests for the disputed order notices

client/components/disputed-order-notice/test/__snapshots__/index.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisputedOrderNoticeHandler renders regular dispute notice 1`] = `
+<div>
+  <div
+    class="wcpay-inline-notice wcpay-inline-warning-notice components-notice is-warning"
+  >
+    <div
+      class="components-notice__content"
+    >
+      <div
+        class="components-flex css-bmzg3m-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="Flex"
+      >
+        <div
+          class="components-flex-item wcpay-inline-notice__content wcpay-inline-warning-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          <strong>
+            This order has a payment dispute for $10.00 for the reason 'Transaction unauthorized'. 
+          </strong>
+           
+          Please respond before Oct 28, 2023.
+          <div
+            class="components-flex wcpay-inline-notice__content__actions css-azptjn-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
+          >
+            <button
+              class="components-button wcpay-inline-notice__action"
+              type="button"
+            >
+              Respond now
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="components-notice__actions"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DisputedOrderNoticeHandler renders urgent dispute notice 1`] = `
+<div>
+  <div
+    class="wcpay-inline-notice wcpay-inline-error-notice components-notice is-error"
+  >
+    <div
+      class="components-notice__content"
+    >
+      <div
+        class="components-flex css-bmzg3m-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="Flex"
+      >
+        <div
+          class="components-flex-item wcpay-inline-notice__content wcpay-inline-error-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          <strong>
+            Please resolve the dispute on this order of $10.00 labeled 'Transaction unauthorized' by Oct 28, 2023.
+          </strong>
+           
+          (Last day today)
+          <div
+            class="components-flex wcpay-inline-notice__content__actions css-azptjn-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
+          >
+            <button
+              class="components-button wcpay-inline-notice__action"
+              type="button"
+            >
+              Respond today
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="components-notice__actions"
+      />
+    </div>
+  </div>
+</div>
+`;

client/components/disputed-order-notice/test/index.test.js

@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+/**
+ * Internal dependencies
+ */
+import DisputedOrderNoticeHandler from '../index';
+import { useCharge } from 'wcpay/data';
+
+jest.mock( 'wcpay/data', () => ( {
+	useCharge: jest.fn(),
+} ) );
+
+jest.mock( 'tracks', () => ( {
+	recordEvent: jest.fn(),
+} ) );
+
+describe( 'DisputedOrderNoticeHandler', () => {
+	const mockCharge = {
+		dispute: {
+			status: 'needs_response',
+			reason: 'fraudulent',
+			amount: 1000,
+			currency: 'USD',
+			evidence_details: {
+				due_by: 1698500219,
+			},
+		},
+	};
+
+	beforeEach( () => {
+		window.wcpaySettings = {
+			zeroDecimalCurrencies: [],
+			connect: {
+				country: 'US',
+			},
+		};
+		useCharge.mockReturnValue( { data: mockCharge } );
+	} );
+
+	afterEach( () => {
+		jest.useRealTimers();
+		jest.clearAllMocks();
+	} );
+
+	test( 'renders urgent dispute notice', () => {
+		const fixedDate = new Date( '2023-10-28T00:00:00Z' );
+		jest.useFakeTimers();
+		jest.setSystemTime( fixedDate );
+
+		const { container } = render(
+			<DisputedOrderNoticeHandler
+				chargeId="ch_123"
+				onDisableOrderRefund={ jest.fn() }
+			/>
+		);
+		const disputeMessages = screen.getAllByText(
+			/Please resolve the dispute on this order of/
+		);
+		expect( disputeMessages[ 0 ] ).toBeInTheDocument();
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent(
+			'Respond today'
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'renders regular dispute notice', () => {
+		const fixedDate = new Date( '2023-10-20T00:00:00Z' );
+		jest.useFakeTimers();
+		jest.setSystemTime( fixedDate );
+
+		const { container } = render(
+			<DisputedOrderNoticeHandler
+				chargeId="ch_123"
+				onDisableOrderRefund={ jest.fn() }
+			/>
+		);
+		const disputeMessages = screen.getAllByText( /Please respond before/ );
+		expect( disputeMessages[ 0 ] ).toBeInTheDocument();
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent(
+			'Respond now'
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'does not render notice if no dispute', () => {
+		useCharge.mockReturnValue( { data: {} } );
+		const { container } = render(
+			<DisputedOrderNoticeHandler
+				chargeId="ch_123"
+				onDisableOrderRefund={ jest.fn() }
+			/>
+		);
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	test( 'does not render notice if dispute is not awaiting response', () => {
+		mockCharge.dispute.status = 'won';
+		render(
+			<DisputedOrderNoticeHandler
+				chargeId="ch_123"
+				onDisableOrderRefund={ jest.fn() }
+			/>
+		);
+		expect(
+			screen.queryByText( /Please resolve the dispute on this order of/ )
+		).not.toBeInTheDocument();
+	} );
+} );