From 5acd4d2e09343275ea80ca5bc2d54fbb752432b9 Mon Sep 17 00:00:00 2001 From: Biki das Date: Thu, 20 Mar 2025 23:56:44 +0530 Subject: [PATCH 1/4] Added tests for reset form action when default action is prevented --- .../__tests__/ReactDOMEventListener-test.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js index f6447642bceba..b2287af376f27 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js @@ -16,11 +16,25 @@ describe('ReactDOMEventListener', () => { let ReactDOMServer; let act; let simulateEventDispatch; + let setUntrackedValue; + let setUntrackedChecked; + + function dispatchEventOnNode(node, type) { + node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true})); + } beforeEach(() => { jest.resetModules(); React = require('react'); ReactDOM = require('react-dom'); + setUntrackedValue = Object.getOwnPropertyDescriptor( + HTMLInputElement.prototype, + 'value', + ).set; + setUntrackedChecked = Object.getOwnPropertyDescriptor( + HTMLInputElement.prototype, + 'checked', + ).set; ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); act = require('internal-test-utils').act; @@ -443,6 +457,74 @@ describe('ReactDOMEventListener', () => { } }); + describe('form resetting', () => { + it('should not reset form if is prevented', async () => { + const container = document.createElement('div'); + document.body.appendChild(container); + + try { + const textRef = React.createRef(); + const buttonRef = React.createRef(); + + const handleChangeTextBox = jest.fn(); + + class Form extends React.Component { + state = {text: 'test'}; + + render() { + return ( +
+ { + this.setState({text: event.target.value}); + handleChangeTextBox(event); + }} + /> + +
+ ); + } + } + + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); + + await act(() => { + setUntrackedValue.call(textRef.current, 'test1'); + dispatchEventOnNode(textRef.current, 'input'); + }); + + expect(handleChangeTextBox).toHaveBeenCalledTimes(1); + + await act(() => { + buttonRef.current.click(); + }); + + expect(textRef.current.value).toEqual('test1'); + + await act(() => { + setUntrackedValue.call(textRef.current, 'test1'); + dispatchEventOnNode(textRef.current, 'input'); + }); + + expect(handleChangeTextBox).toHaveBeenCalledTimes(1); + } finally { + document.body.removeChild(container); + } + }); + }); + it('should dispatch loadstart only for media elements', async () => { const container = document.createElement('div'); document.body.appendChild(container); From cb069b4207741dc0e13624d3e8fa52f6b99579f7 Mon Sep 17 00:00:00 2001 From: Biki das Date: Thu, 20 Mar 2025 23:57:47 +0530 Subject: [PATCH 2/4] capitalise test describe block initials --- packages/react-dom/src/__tests__/ReactDOMEventListener-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js index b2287af376f27..0d4e3fdb6f7b8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js @@ -457,7 +457,7 @@ describe('ReactDOMEventListener', () => { } }); - describe('form resetting', () => { + describe('Form resetting', () => { it('should not reset form if is prevented', async () => { const container = document.createElement('div'); document.body.appendChild(container); From 1471a62f4c4d159215d6d4b92049f0bdc916a2a0 Mon Sep 17 00:00:00 2001 From: Biki das Date: Fri, 21 Mar 2025 00:04:22 +0530 Subject: [PATCH 3/4] removed checked variable --- .../react-dom/src/__tests__/ReactDOMEventListener-test.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js index 0d4e3fdb6f7b8..3e3ab3dfe74b5 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js @@ -17,7 +17,6 @@ describe('ReactDOMEventListener', () => { let act; let simulateEventDispatch; let setUntrackedValue; - let setUntrackedChecked; function dispatchEventOnNode(node, type) { node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true})); @@ -31,10 +30,6 @@ describe('ReactDOMEventListener', () => { HTMLInputElement.prototype, 'value', ).set; - setUntrackedChecked = Object.getOwnPropertyDescriptor( - HTMLInputElement.prototype, - 'checked', - ).set; ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); act = require('internal-test-utils').act; From d23300ca37719ef8cd7a10b4dfa566dfb803b72d Mon Sep 17 00:00:00 2001 From: Biki das Date: Fri, 21 Mar 2025 00:41:31 +0530 Subject: [PATCH 4/4] added test for correct reset --- .../__tests__/ReactDOMEventListener-test.js | 67 ++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js index 3e3ab3dfe74b5..2a2bb082e002c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js @@ -453,7 +453,72 @@ describe('ReactDOMEventListener', () => { }); describe('Form resetting', () => { - it('should not reset form if is prevented', async () => { + it('should reset the form correctly', async () => { + const container = document.createElement('div'); + document.body.appendChild(container); + + try { + const textRef = React.createRef(); + const buttonRef = React.createRef(); + + const handleChangeTextBox = jest.fn(); + + class Form extends React.Component { + state = {text: 'test'}; + + render() { + return ( + + { + this.setState({text: event.target.value}); + handleChangeTextBox(event); + }} + /> + + + ); + } + } + + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); + + expect(textRef.current.value).toEqual('test'); + + await act(() => { + setUntrackedValue.call(textRef.current, 'test1'); + dispatchEventOnNode(textRef.current, 'input'); + }); + + expect(handleChangeTextBox).toHaveBeenCalledTimes(1); + expect(textRef.current.value).toEqual('test1'); + + await act(() => { + buttonRef.current.click(); + }); + + expect(textRef.current.value).toEqual('test'); + + handleChangeTextBox.mockClear(); + await act(() => { + setUntrackedValue.call(textRef.current, 'test'); + dispatchEventOnNode(textRef.current, 'input'); + }); + + expect(handleChangeTextBox).toHaveBeenCalledTimes(1); + } finally { + document.body.removeChild(container); + } + }); + + it('should not reset form if it is prevented', async () => { const container = document.createElement('div'); document.body.appendChild(container);