{"parents":["36baa43560f839f0add7e0ec8125580e3b85235c"],"commit":{"subject":"Convert ChangeEventPlugin to createRoot (#28090)","authorEmail":"silbermann.sebastian@gmail.com","authorName":"Sebastian Silbermann","authoredAt":"2024-01-26T10:20:26+01:00","shortRevision":"6c64428d90","revision":"6c64428d904f8339cddaa0f4850cba89acabe0bb"},"body":"","files":[{"path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js\nindex ae27973a0c..fab10a36e1 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js\n@@ -83,7 +83,7 @@ describe('ChangeEventPlugin', () => {\n \/\/ keep track of the \"current\" value and only fire events when it changes.\n \/\/ See https:\/\/github.com\/facebook\/react\/pull\/5746.\n \n- it('should consider initial text value to be current', () => {\n+ it('should consider initial text value to be current', async () => {\n let called = 0;\n \n function cb(e) {\n@@ -91,10 +91,12 @@ describe('ChangeEventPlugin', () => {\n expect(e.type).toBe('change');\n }\n \n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ const node = container.firstChild;\n node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n \n@@ -102,7 +104,7 @@ describe('ChangeEventPlugin', () => {\n expect(called).toBe(0);\n });\n \n- it('should consider initial text value to be current (capture)', () => {\n+ it('should consider initial text value to be current (capture)', async () => {\n let called = 0;\n \n function cb(e) {\n@@ -110,10 +112,14 @@ describe('ChangeEventPlugin', () => {\n expect(e.type).toBe('change');\n }\n \n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n+ const node = container.firstChild;\n node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n \n@@ -121,7 +127,7 @@ describe('ChangeEventPlugin', () => {\n expect(called).toBe(0);\n });\n \n- it('should not invoke a change event for textarea same value', () => {\n+ it('should not invoke a change event for textarea same value', async () => {\n let called = 0;\n \n function cb(e) {\n@@ -129,17 +135,19 @@ describe('ChangeEventPlugin', () => {\n expect(e.type).toBe('change');\n }\n \n- const node = ReactDOM.render(\n-

,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea onChange={cb} defaultValue=\"initial\" \/>);\n+    });\n+\n+    const node = container.firstChild;\n     node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n     node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n     \/\/ There should be no React change events because the value stayed the same.\n     expect(called).toBe(0);\n   });\n \n-  it('should not invoke a change event for textarea same value (capture)', () => {\n+  it('should not invoke a change event for textarea same value (capture)', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -147,17 +155,19 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const node = ReactDOM.render(\n-      <textarea onChangeCapture={cb} defaultValue=\"initial\" \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea onChangeCapture={cb} defaultValue=\"initial\" \/>);\n+    });\n+\n+    const node = container.firstChild;\n     node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n     node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n     \/\/ There should be no React change events because the value stayed the same.\n     expect(called).toBe(0);\n   });\n \n-  it('should consider initial checkbox checked=true to be current', () => {\n+  it('should consider initial checkbox checked=true to be current', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -165,10 +175,14 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const node = ReactDOM.render(\n-      <input type=\"checkbox\" onChange={cb} defaultChecked={true} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(\n+        <input type=\"checkbox\" onChange={cb} defaultChecked={true} \/>,\n+      );\n+    });\n+\n+    const node = container.firstChild;\n \n     \/\/ Secretly, set `checked` to false, so that dispatching the `click` will\n     \/\/ make it `true` again. Thus, at the time of the event, React should not\n@@ -181,7 +195,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(0);\n   });\n \n-  it('should consider initial checkbox checked=false to be current', () => {\n+  it('should consider initial checkbox checked=false to be current', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -189,10 +203,14 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const node = ReactDOM.render(\n-      <input type=\"checkbox\" onChange={cb} defaultChecked={false} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(\n+        <input type=\"checkbox\" onChange={cb} defaultChecked={false} \/>,\n+      );\n+    });\n+\n+    const node = container.firstChild;\n \n     \/\/ Secretly, set `checked` to true, so that dispatching the `click` will\n     \/\/ make it `false` again. Thus, at the time of the event, React should not\n@@ -205,7 +223,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(0);\n   });\n \n-  it('should fire change for checkbox input', () => {\n+  it('should fire change for checkbox input', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -213,10 +231,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const node = ReactDOM.render(\n-      <input type=\"checkbox\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"checkbox\" onChange={cb} \/>);\n+    });\n+\n+    const node = container.firstChild;\n \n     expect(node.checked).toBe(false);\n     node.dispatchEvent(\n@@ -235,7 +255,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(2);\n   });\n \n-  it('should not fire change setting the value programmatically', () => {\n+  it('should not fire change setting the value programmatically', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -243,10 +263,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"text\" defaultValue=\"foo\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"text\" defaultValue=\"foo\" onChange={cb} \/>);\n+    });\n+\n+    const input = container.firstChild;\n \n     \/\/ Set it programmatically.\n     input.value = 'bar';\n@@ -271,7 +293,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(1);\n   });\n \n-  it('should not distinguish equal string and number values', () => {\n+  it('should not distinguish equal string and number values', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -279,10 +301,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"text\" defaultValue=\"42\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"text\" defaultValue=\"42\" onChange={cb} \/>);\n+    });\n+\n+    const input = container.firstChild;\n \n     \/\/ When we set `value` as a property, React updates the \"current\" value\n     \/\/ that it tracks internally. The \"current\" value is later used to determine\n@@ -296,7 +320,7 @@ describe('ChangeEventPlugin', () => {\n   });\n \n   \/\/ See a similar input test above for a detailed description of why.\n-  it('should not fire change when setting checked programmatically', () => {\n+  it('should not fire change when setting checked programmatically', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -304,10 +328,14 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"checkbox\" onChange={cb} defaultChecked={false} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(\n+        <input type=\"checkbox\" onChange={cb} defaultChecked={false} \/>,\n+      );\n+    });\n+\n+    const input = container.firstChild;\n \n     \/\/ Set the value, updating the \"current\" value that React tracks to true.\n     input.checked = true;\n@@ -326,13 +354,20 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(1);\n   });\n \n-  it('should unmount', () => {\n-    const input = ReactDOM.render(<input \/>, container);\n+  it('should unmount', async () => {\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input \/>);\n+    });\n+\n+    const input = container.firstChild;\n \n-    ReactDOM.unmountComponentAtNode(container);\n+    await act(() => {\n+      root.unmount();\n+    });\n   });\n \n-  it('should only fire change for checked radio button once', () => {\n+  it('should only fire change for checked radio button once', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -340,10 +375,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"radio\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"radio\" onChange={cb} \/>);\n+    });\n+\n+    const input = container.firstChild;\n \n     setUntrackedChecked.call(input, true);\n     input.dispatchEvent(new Event('click', {bubbles: true, cancelable: true}));\n@@ -351,7 +388,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(1);\n   });\n \n-  it('should track radio button cousins in a group', () => {\n+  it('should track radio button cousins in a group', async () => {\n     let called1 = 0;\n     let called2 = 0;\n \n@@ -365,13 +402,17 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const div = ReactDOM.render(\n-      <div>\n-        <input type=\"radio\" name=\"group\" onChange={cb1} \/>\n-        <input type=\"radio\" name=\"group\" onChange={cb2} \/>\n-      <\/div>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(\n+        <div>\n+          <input type=\"radio\" name=\"group\" onChange={cb1} \/>\n+          <input type=\"radio\" name=\"group\" onChange={cb2} \/>\n+        <\/div>,\n+      );\n+    });\n+\n+    const div = container.firstChild;\n     const option1 = div.childNodes[0];\n     const option2 = div.childNodes[1];\n \n@@ -455,7 +496,7 @@ describe('ChangeEventPlugin', () => {\n     });\n   });\n \n-  it('should listen for both change and input events when supported', () => {\n+  it('should listen for both change and input events when supported', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -463,10 +504,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"range\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"range\" onChange={cb} \/>);\n+    });\n+\n+    const input = container.firstChild;\n \n     setUntrackedValue.call(input, 10);\n     input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n@@ -477,7 +520,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(2);\n   });\n \n-  it('should only fire events when the value changes for range inputs', () => {\n+  it('should only fire events when the value changes for range inputs', async () => {\n     let called = 0;\n \n     function cb(e) {\n@@ -485,10 +528,12 @@ describe('ChangeEventPlugin', () => {\n       expect(e.type).toBe('change');\n     }\n \n-    const input = ReactDOM.render(\n-      <input type=\"range\" onChange={cb} \/>,\n-      container,\n-    );\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<input type=\"range\" onChange={cb} \/>);\n+    });\n+\n+    const input = container.firstChild;\n     setUntrackedValue.call(input, '40');\n     input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n     input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n@@ -500,7 +545,7 @@ describe('ChangeEventPlugin', () => {\n     expect(called).toBe(2);\n   });\n \n-  it('does not crash for nodes with custom value property', () => {\n+  it('does not crash for nodes with custom value property', async () => {\n     let originalCreateElement;\n     \/\/ https:\/\/github.com\/facebook\/react\/issues\/10196\n     try {\n@@ -514,16 +559,25 @@ describe('ChangeEventPlugin', () => {\n         return node;\n       };\n       const div = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(div);\n       \/\/ Mount\n-      const node = ReactDOM.render(<input type=\"text\" \/>, div);\n+      await act(() => {\n+        root.render(<input type=\"text\" \/>);\n+      });\n+      const node = div.firstChild;\n       \/\/ Update\n-      ReactDOM.render(<input type=\"text\" \/>, div);\n+      await act(() => {\n+        root.render(<input type=\"text\" \/>);\n+      });\n+\n       \/\/ Change\n       node.dispatchEvent(\n         new Event('change', {bubbles: true, cancelable: true}),\n       );\n       \/\/ Unmount\n-      ReactDOM.unmountComponentAtNode(div);\n+      await act(() => {\n+        root.unmount();\n+      });\n     } finally {\n       document.createElement = originalCreateElement;\n     }\n"}</article></body></html>

dillon1000/react

Files changed