From e6c206753423b2fd40b552880f514d37b1f2bbdc Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 30 Jan 2024 21:01:55 +0100 Subject: [PATCH] Convert truestedTypes to createRoot --- .../__tests__/trustedTypes-test.internal.js | 86 +++++++++++++------ 1 file changed, 59 insertions(+), 27 deletions(-) diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js index 777ef41756ce4..599084b637a16 100644 --- a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js +++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js @@ -11,8 +11,9 @@ describe('when Trusted Types are available in global object', () => { let React; - let ReactDOM; + let ReactDOMClient; let ReactFeatureFlags; + let act; let container; let ttObject1; let ttObject2; @@ -34,7 +35,8 @@ describe('when Trusted Types are available in global object', () => { ReactFeatureFlags = require('shared/ReactFeatureFlags'); ReactFeatureFlags.enableTrustedTypesIntegration = true; React = require('react'); - ReactDOM = require('react-dom'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; ttObject1 = { toString() { return 'Hi'; @@ -53,7 +55,7 @@ describe('when Trusted Types are available in global object', () => { delete window.trustedTypes; }); - it('should not stringify trusted values for dangerouslySetInnerHTML', () => { + it('should not stringify trusted values for dangerouslySetInnerHTML', async () => { const innerHTMLDescriptor = Object.getOwnPropertyDescriptor( Element.prototype, 'innerHTML', @@ -69,20 +71,21 @@ describe('when Trusted Types are available in global object', () => { return innerHTMLDescriptor.set.apply(this, arguments); }, }); - ReactDOM.render( -
, - container, - ); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); + expect(container.innerHTML).toBe('
Hi
'); expect(innerHTMLCalls.length).toBe(1); // Ensure it didn't get stringified when passed to a DOM sink: expect(innerHTMLCalls[0]).toBe(ttObject1); innerHTMLCalls.length = 0; - ReactDOM.render( -
, - container, - ); + await act(() => { + root.render(
); + }); + expect(container.innerHTML).toBe('
Bye
'); expect(innerHTMLCalls.length).toBe(1); // Ensure it didn't get stringified when passed to a DOM sink: @@ -96,7 +99,7 @@ describe('when Trusted Types are available in global object', () => { } }); - it('should not stringify trusted values for setAttribute (unknown attribute)', () => { + it('should not stringify trusted values for setAttribute (unknown attribute)', async () => { const setAttribute = Element.prototype.setAttribute; try { const setAttributeCalls = []; @@ -104,7 +107,11 @@ describe('when Trusted Types are available in global object', () => { setAttributeCalls.push([this, name.toLowerCase(), value]); return setAttribute.apply(this, arguments); }; - ReactDOM.render(
, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); + expect(container.innerHTML).toBe('
'); expect(setAttributeCalls.length).toBe(1); expect(setAttributeCalls[0][0]).toBe(container.firstChild); @@ -113,7 +120,10 @@ describe('when Trusted Types are available in global object', () => { expect(setAttributeCalls[0][2]).toBe(ttObject1); setAttributeCalls.length = 0; - ReactDOM.render(
, container); + await act(() => { + root.render(
); + }); + expect(setAttributeCalls.length).toBe(1); expect(setAttributeCalls[0][0]).toBe(container.firstChild); expect(setAttributeCalls[0][1]).toBe('data-foo'); @@ -124,7 +134,7 @@ describe('when Trusted Types are available in global object', () => { } }); - it('should not stringify trusted values for setAttribute (known attribute)', () => { + it('should not stringify trusted values for setAttribute (known attribute)', async () => { const setAttribute = Element.prototype.setAttribute; try { const setAttributeCalls = []; @@ -132,7 +142,11 @@ describe('when Trusted Types are available in global object', () => { setAttributeCalls.push([this, name.toLowerCase(), value]); return setAttribute.apply(this, arguments); }; - ReactDOM.render(
, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(
); + }); + expect(container.innerHTML).toBe('
'); expect(setAttributeCalls.length).toBe(1); expect(setAttributeCalls[0][0]).toBe(container.firstChild); @@ -141,7 +155,10 @@ describe('when Trusted Types are available in global object', () => { expect(setAttributeCalls[0][2]).toBe(ttObject1); setAttributeCalls.length = 0; - ReactDOM.render(
, container); + await act(() => { + root.render(
); + }); + expect(setAttributeCalls.length).toBe(1); expect(setAttributeCalls[0][0]).toBe(container.firstChild); expect(setAttributeCalls[0][1]).toBe('class'); @@ -152,7 +169,7 @@ describe('when Trusted Types are available in global object', () => { } }); - it('should not stringify trusted values for setAttributeNS', () => { + it('should not stringify trusted values for setAttributeNS', async () => { const setAttributeNS = Element.prototype.setAttributeNS; try { const setAttributeNSCalls = []; @@ -160,7 +177,11 @@ describe('when Trusted Types are available in global object', () => { setAttributeNSCalls.push([this, ns, name, value]); return setAttributeNS.apply(this, arguments); }; - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + expect(container.innerHTML).toBe(''); expect(setAttributeNSCalls.length).toBe(1); expect(setAttributeNSCalls[0][0]).toBe(container.firstChild); @@ -170,7 +191,10 @@ describe('when Trusted Types are available in global object', () => { expect(setAttributeNSCalls[0][3]).toBe(ttObject1); setAttributeNSCalls.length = 0; - ReactDOM.render(, container); + await act(() => { + root.render(); + }); + expect(setAttributeNSCalls.length).toBe(1); expect(setAttributeNSCalls[0][0]).toBe(container.firstChild); expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink'); @@ -209,14 +233,17 @@ describe('when Trusted Types are available in global object', () => { }); // @gate !disableIEWorkarounds - it('should log a warning', () => { + it('should log a warning', async () => { class Component extends React.Component { render() { return ; } } - expect(() => { - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await expect(async () => { + await act(() => { + root.render(); + }); }).toErrorDev( "Warning: Using 'dangerouslySetInnerHTML' in an svg element with " + 'Trusted Types enabled in an Internet Explorer will cause ' + @@ -229,9 +256,12 @@ describe('when Trusted Types are available in global object', () => { }); }); - it('should warn once when rendering script tag in jsx on client', () => { - expect(() => { - ReactDOM.render(, container); + it('should warn once when rendering script tag in jsx on client', async () => { + const root = ReactDOMClient.createRoot(container); + await expect(async () => { + await act(() => { + root.render(); + }); }).toErrorDev( 'Warning: Encountered a script tag while rendering React component. ' + 'Scripts inside React components are never executed when rendering ' + @@ -241,6 +271,8 @@ describe('when Trusted Types are available in global object', () => { ); // check that the warning is printed only once - ReactDOM.render(, container); + await act(() => { + root.render(); + }); }); });