@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 103 lines 2.91 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @emails react-core
8 */
9
10 'use strict';
11
12 jest.resetModules();
13 const React = require('react');
14 let ReactFreshRuntime;
15 if (__DEV__) {
16 ReactFreshRuntime = require('react-refresh/runtime');
17 ReactFreshRuntime.injectIntoGlobalHook(global);
18 }
19 const ReactDOMClient = require('react-dom/client');
20 const act = require('internal-test-utils').act;
21
22 jest.resetModules();
23 const ReactART = require('react-art');
24 const ARTSVGMode = require('art/modes/svg');
25 const ARTCurrentMode = require('art/modes/current');
26 ARTCurrentMode.setCurrent(ARTSVGMode);
27
28 describe('ReactFresh', () => {
29 let container;
30
31 beforeEach(() => {
32 if (__DEV__) {
33 container = document.createElement('div');
34 document.body.appendChild(container);
35 }
36 });
37
38 afterEach(() => {
39 if (__DEV__) {
40 document.body.removeChild(container);
41 container = null;
42 }
43 });
44
45 it('can update components managed by different renderers independently', async () => {
46 if (__DEV__) {
47 const InnerV1 = function () {
48 return <ReactART.Shape fill="blue" />;
49 };
50 ReactFreshRuntime.register(InnerV1, 'Inner');
51
52 const OuterV1 = function () {
53 return (
54 <div style={{color: 'blue'}}>
55 <ReactART.Surface>
56 <InnerV1 />
57 </ReactART.Surface>
58 </div>
59 );
60 };
61 ReactFreshRuntime.register(OuterV1, 'Outer');
62
63 const root = ReactDOMClient.createRoot(container);
64 await act(() => {
65 root.render(<OuterV1 />);
66 });
67 const el = container.firstChild;
68 const pathEl = el.querySelector('path');
69 expect(el.style.color).toBe('blue');
70 expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(0, 0, 255)');
71
72 // Perform a hot update to the ART-rendered component.
73 const InnerV2 = function () {
74 return <ReactART.Shape fill="red" />;
75 };
76 ReactFreshRuntime.register(InnerV2, 'Inner');
77
78 ReactFreshRuntime.performReactRefresh();
79 expect(container.firstChild).toBe(el);
80 expect(el.querySelector('path')).toBe(pathEl);
81 expect(el.style.color).toBe('blue');
82 expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');
83
84 // Perform a hot update to the DOM-rendered component.
85 const OuterV2 = function () {
86 return (
87 <div style={{color: 'red'}}>
88 <ReactART.Surface>
89 <InnerV1 />
90 </ReactART.Surface>
91 </div>
92 );
93 };
94 ReactFreshRuntime.register(OuterV2, 'Outer');
95
96 ReactFreshRuntime.performReactRefresh();
97 expect(el.style.color).toBe('red');
98 expect(container.firstChild).toBe(el);
99 expect(el.querySelector('path')).toBe(pathEl);
100 expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');
101 }
102 });
103 });