{"body":"Convert SyntheticKeyboardEvent-test to createRoot","files":[{"status":"M","path":"packages\/react-dom\/src\/events\/__tests__\/SyntheticKeyboardEvent-test.js"}],"parents":["a2eaa21ac70ef898535479cb9fc9ea546854e072"],"patch":"diff --git a\/packages\/react-dom\/src\/events\/__tests__\/SyntheticKeyboardEvent-test.js b\/packages\/react-dom\/src\/events\/__tests__\/SyntheticKeyboardEvent-test.js\nindex 5f8919e3fe..f616a7c44f 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/SyntheticKeyboardEvent-test.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/SyntheticKeyboardEvent-test.js\n@@ -10,20 +10,30 @@\n 'use strict';\n \n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n+\n+let act;\n \n describe('SyntheticKeyboardEvent', () => {\n let container;\n+ let root;\n \n beforeEach(() => {\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+\n+ act = require('internal-test-utils').act;\n+\n \/\/ The container has to be attached for events to fire.\n container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n document.body.appendChild(container);\n });\n \n- afterEach(() => {\n+ afterEach(async () => {\n+ await act(() => {\n+ root.unmount();\n+ });\n document.body.removeChild(container);\n container = null;\n });\n@@ -32,17 +42,18 @@ describe('SyntheticKeyboardEvent', () => {\n describe('charCode', () => {\n describe('when event is `keypress`', () => {\n describe('when charCode is present in nativeEvent', () => {\n- it('when charCode is 0 and keyCode is 13, returns 13', () => {\n+ it('when charCode is 0 and keyCode is 13, returns 13', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 0,\n keyCode: 13,\n@@ -53,17 +64,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(charCode).toBe(13);\n });\n \n- it('when charCode is 32 or bigger and keyCode is missing, returns charCode', () => {\n+ it('when charCode is 32 or bigger and keyCode is missing, returns charCode', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 32,\n bubbles: true,\n@@ -73,17 +85,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(charCode).toBe(32);\n });\n \n- it('when charCode is 13 and keyCode is missing, returns charCode', () => {\n+ it('when charCode is 13 and keyCode is missing, returns charCode', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 13,\n bubbles: true,\n@@ -96,17 +109,18 @@ describe('SyntheticKeyboardEvent', () => {\n \/\/ Firefox creates a keypress event for function keys too. This removes\n \/\/ the unwanted keypress events. Enter is however both printable and\n \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n- it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', () => {\n+ it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', async () => {\n let called = false;\n- const node = ReactDOM.render(\n- {\n- called = true;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ called = true;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 31,\n bubbles: true,\n@@ -116,17 +130,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(called).toBe(false);\n });\n \n- it('when charCode is 10, returns 13', () => {\n+ it('when charCode is 10, returns 13', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 10,\n bubbles: true,\n@@ -136,17 +151,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(charCode).toBe(13);\n });\n \n- it('when charCode is 10 and ctrl is pressed, returns 13', () => {\n+ it('when charCode is 10 and ctrl is pressed, returns 13', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 10,\n ctrlKey: true,\n@@ -181,17 +197,18 @@ describe('SyntheticKeyboardEvent', () => {\n charCodeDescriptor = null;\n });\n \n- it('when keyCode is 32 or bigger, returns keyCode', () => {\n+ it('when keyCode is 32 or bigger, returns keyCode', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n keyCode: 32,\n bubbles: true,\n@@ -201,17 +218,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(charCode).toBe(32);\n });\n \n- it('when keyCode is 13, returns 13', () => {\n+ it('when keyCode is 13, returns 13', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n keyCode: 13,\n bubbles: true,\n@@ -221,17 +239,18 @@ describe('SyntheticKeyboardEvent', () => {\n expect(charCode).toBe(13);\n });\n \n- it('when keyCode is smaller than 32 and is not 13, ignores keypress', () => {\n+ it('when keyCode is smaller than 32 and is not 13, ignores keypress', async () => {\n let called = false;\n- const node = ReactDOM.render(\n- {\n- called = true;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ called = true;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n keyCode: 31,\n bubbles: true,\n@@ -244,28 +263,29 @@ describe('SyntheticKeyboardEvent', () => {\n });\n \n describe('when event is not `keypress`', () => {\n- it('returns 0', () => {\n+ it('returns 0', async () => {\n let charCodeDown = null;\n let charCodeUp = null;\n- const node = ReactDOM.render(\n- {\n- charCodeDown = e.charCode;\n- }}\n- onKeyUp={e => {\n- charCodeUp = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCodeDown = e.charCode;\n+ }}\n+ onKeyUp={e => {\n+ charCodeUp = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n key: 'Del',\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n key: 'Del',\n bubbles: true,\n@@ -277,17 +297,18 @@ describe('SyntheticKeyboardEvent', () => {\n });\n });\n \n- it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', () => {\n+ it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', async () => {\n let charCode = null;\n- const node = ReactDOM.render(\n- {\n- charCode = e.charCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ charCode = e.charCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n charCode: 31,\n bubbles: true,\n@@ -300,28 +321,29 @@ describe('SyntheticKeyboardEvent', () => {\n \n describe('keyCode', () => {\n describe('when event is `keydown` or `keyup`', () => {\n- it('returns a passed keyCode', () => {\n+ it('returns a passed keyCode', async () => {\n let keyCodeDown = null;\n let keyCodeUp = null;\n- const node = ReactDOM.render(\n- {\n- keyCodeDown = e.keyCode;\n- }}\n- onKeyUp={e => {\n- keyCodeUp = e.keyCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ keyCodeDown = e.keyCode;\n+ }}\n+ onKeyUp={e => {\n+ keyCodeUp = e.keyCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n keyCode: 40,\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n keyCode: 40,\n bubbles: true,\n@@ -334,17 +356,18 @@ describe('SyntheticKeyboardEvent', () => {\n });\n \n describe('when event is `keypress`', () => {\n- it('returns 0', () => {\n+ it('returns 0', async () => {\n let keyCode = null;\n- const node = ReactDOM.render(\n- {\n- keyCode = e.keyCode;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ keyCode = e.keyCode;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 65,\n bubbles: true,\n@@ -358,19 +381,20 @@ describe('SyntheticKeyboardEvent', () => {\n \n describe('which', () => {\n describe('when event is `keypress`', () => {\n- it('is consistent with `charCode`', () => {\n+ it('is consistent with `charCode`', async () => {\n let calls = 0;\n- const node = ReactDOM.render(\n- {\n- expect(e.which).toBe(e.charCode);\n- calls++;\n- }}\n- \/>,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ {\n+ expect(e.which).toBe(e.charCode);\n+ calls++;\n+ }}\n+ \/>,\n+ );\n+ });\n \/\/ Try different combinations from other tests.\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 0,\n keyCode: 13,\n@@ -378,14 +402,14 @@ describe('SyntheticKeyboardEvent', () => {\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 32,\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 13,\n bubbles: true,\n@@ -397,50 +421,51 @@ describe('SyntheticKeyboardEvent', () => {\n });\n \n describe('when event is `keydown` or `keyup`', () => {\n- it('is consistent with `keyCode`', () => {\n+ it('is consistent with `keyCode`', async () => {\n let calls = 0;\n- const node = ReactDOM.render(\n- {\n- expect(e.which).toBe(e.keyCode);\n- calls++;\n- }}\n- onKeyUp={e => {\n- expect(e.which).toBe(e.keyCode);\n- calls++;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ expect(e.which).toBe(e.keyCode);\n+ calls++;\n+ }}\n+ onKeyUp={e => {\n+ expect(e.which).toBe(e.keyCode);\n+ calls++;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n key: 'Del',\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n charCode: 31,\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n keyCode: 40,\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n key: 'Del',\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n keyCode: 40,\n bubbles: true,\n@@ -453,39 +478,40 @@ describe('SyntheticKeyboardEvent', () => {\n });\n \n describe('code', () => {\n- it('returns code on `keydown`, `keyup` and `keypress`', () => {\n+ it('returns code on `keydown`, `keyup` and `keypress`', async () => {\n let codeDown = null;\n let codeUp = null;\n let codePress = null;\n- const node = ReactDOM.render(\n- {\n- codeDown = e.code;\n- }}\n- onKeyUp={e => {\n- codeUp = e.code;\n- }}\n- onKeyPress={e => {\n- codePress = e.code;\n- }}\n- \/>,\n- container,\n- );\n- node.dispatchEvent(\n+ await act(() => {\n+ root.render(\n+ {\n+ codeDown = e.code;\n+ }}\n+ onKeyUp={e => {\n+ codeUp = e.code;\n+ }}\n+ onKeyPress={e => {\n+ codePress = e.code;\n+ }}\n+ \/>,\n+ );\n+ });\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'KeyQ',\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n code: 'KeyQ',\n bubbles: true,\n cancelable: true,\n }),\n );\n- node.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n code: 'KeyQ',\n charCode: 113,\n@@ -501,7 +527,7 @@ describe('SyntheticKeyboardEvent', () => {\n });\n \n describe('EventInterface', () => {\n- it('is able to `preventDefault` and `stopPropagation`', () => {\n+ it('is able to `preventDefault` and `stopPropagation`', async () => {\n let expectedCount = 0;\n const eventHandler = event => {\n expect(event.isDefaultPrevented()).toBe(false);\n@@ -513,30 +539,31 @@ describe('SyntheticKeyboardEvent', () => {\n expect(event.isPropagationStopped()).toBe(true);\n expectedCount++;\n };\n- const div = ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n \n- div.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keydown', {\n keyCode: 40,\n bubbles: true,\n cancelable: true,\n }),\n );\n- div.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keyup', {\n keyCode: 40,\n bubbles: true,\n cancelable: true,\n }),\n );\n- div.dispatchEvent(\n+ container.firstChild.dispatchEvent(\n new KeyboardEvent('keypress', {\n charCode: 40,\n keyCode: 40,\n","commit":{"revision":"624b51388b25143398a71e42225c612a9a785218","shortRevision":"624b51388b","authorName":"Jan Kassens","subject":"Convert SyntheticKeyboardEvent-test to createRoot (#28007)","authoredAt":"2024-01-19T13:36:05-05:00","authorEmail":"jkassens@meta.com"}}

dillon1000/react

Files changed