@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 167 lines 5.96 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 describe('ReactDOMShorthandCSSPropertyCollision', () => {
13 let act;
14
15 let React;
16 let ReactDOMClient;
17 let assertConsoleErrorDev;
18
19 beforeEach(() => {
20 jest.resetModules();
21
22 act = require('internal-test-utils').act;
23 React = require('react');
24 ReactDOMClient = require('react-dom/client');
25 assertConsoleErrorDev =
26 require('internal-test-utils').assertConsoleErrorDev;
27 });
28
29 it('should warn for conflicting CSS shorthand updates', async () => {
30 const container = document.createElement('div');
31 const root = ReactDOMClient.createRoot(container);
32 await act(() => {
33 root.render(<div style={{font: 'foo', fontStyle: 'bar'}} />);
34 });
35 await act(() => {
36 root.render(<div style={{font: 'foo'}} />);
37 });
38 assertConsoleErrorDev([
39 'Removing a style property during rerender (fontStyle) ' +
40 'when a conflicting property is set (font) can lead to styling ' +
41 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
42 'properties for the same value; instead, replace the shorthand ' +
43 'with separate values.' +
44 '\n in div (at **)',
45 ]);
46
47 // These updates are OK and don't warn:
48 await act(() => {
49 root.render(<div style={{font: 'qux', fontStyle: 'bar'}} />);
50 });
51 await act(() => {
52 root.render(<div style={{font: 'foo', fontStyle: 'baz'}} />);
53 });
54
55 await act(() => {
56 root.render(<div style={{font: 'qux', fontStyle: 'baz'}} />);
57 });
58 assertConsoleErrorDev([
59 'Updating a style property during rerender (font) when ' +
60 'a conflicting property is set (fontStyle) can lead to styling ' +
61 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
62 'properties for the same value; instead, replace the shorthand ' +
63 'with separate values.' +
64 '\n in div (at **)',
65 ]);
66 await act(() => {
67 root.render(<div style={{fontStyle: 'baz'}} />);
68 });
69 assertConsoleErrorDev([
70 'Removing a style property during rerender (font) when ' +
71 'a conflicting property is set (fontStyle) can lead to styling ' +
72 "bugs. To avoid this, don't mix shorthand and non-shorthand " +
73 'properties for the same value; instead, replace the shorthand ' +
74 'with separate values.' +
75 '\n in div (at **)',
76 ]);
77
78 // A bit of a special case: backgroundPosition isn't technically longhand
79 // (it expands to backgroundPosition{X,Y} but so does background)
80 await act(() => {
81 root.render(
82 <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
83 );
84 });
85 await act(() => {
86 root.render(<div style={{background: 'yellow'}} />);
87 });
88 assertConsoleErrorDev([
89 'Removing a style property during rerender ' +
90 '(backgroundPosition) when a conflicting property is set ' +
91 "(background) can lead to styling bugs. To avoid this, don't mix " +
92 'shorthand and non-shorthand properties for the same value; ' +
93 'instead, replace the shorthand with separate values.' +
94 '\n in div (at **)',
95 ]);
96 await act(() => {
97 root.render(
98 <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
99 );
100 });
101 // But setting them at the same time is OK:
102 await act(() => {
103 root.render(
104 <div style={{background: 'green', backgroundPosition: 'top'}} />,
105 );
106 });
107 await act(() => {
108 root.render(<div style={{backgroundPosition: 'top'}} />);
109 });
110 assertConsoleErrorDev([
111 'Removing a style property during rerender (background) ' +
112 'when a conflicting property is set (backgroundPosition) can lead ' +
113 "to styling bugs. To avoid this, don't mix shorthand and " +
114 'non-shorthand properties for the same value; instead, replace the ' +
115 'shorthand with separate values.' +
116 '\n in div (at **)',
117 ]);
118
119 // A bit of an even more special case: borderLeft and borderStyle overlap.
120 await act(() => {
121 root.render(
122 <div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
123 );
124 });
125 await act(() => {
126 root.render(<div style={{borderLeft: '1px solid red'}} />);
127 });
128 assertConsoleErrorDev([
129 'Removing a style property during rerender (borderStyle) ' +
130 'when a conflicting property is set (borderLeft) can lead to ' +
131 "styling bugs. To avoid this, don't mix shorthand and " +
132 'non-shorthand properties for the same value; instead, replace the ' +
133 'shorthand with separate values.' +
134 '\n in div (at **)',
135 ]);
136 await act(() => {
137 root.render(
138 <div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
139 );
140 });
141 assertConsoleErrorDev([
142 'Updating a style property during rerender (borderStyle) ' +
143 'when a conflicting property is set (borderLeft) can lead to ' +
144 "styling bugs. To avoid this, don't mix shorthand and " +
145 'non-shorthand properties for the same value; instead, replace the ' +
146 'shorthand with separate values.' +
147 '\n in div (at **)',
148 ]);
149 // But setting them at the same time is OK:
150 await act(() => {
151 root.render(
152 <div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
153 );
154 });
155 await act(() => {
156 root.render(<div style={{borderStyle: 'dotted'}} />);
157 });
158 assertConsoleErrorDev([
159 'Removing a style property during rerender (borderLeft) ' +
160 'when a conflicting property is set (borderStyle) can lead to ' +
161 "styling bugs. To avoid this, don't mix shorthand and " +
162 'non-shorthand properties for the same value; instead, replace the ' +
163 'shorthand with separate values.' +
164 '\n in div (at **)',
165 ]);
166 });
167 });