Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert CSSProperty to createRoot #28181

Merged
merged 1 commit into from
Feb 2, 2024
Merged

Convert CSSProperty to createRoot #28181

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
113 changes: 75 additions & 38 deletions packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
'use strict';

const React = require('react');
const ReactDOM = require('react-dom');
const ReactDOMClient = require('react-dom/client');
const ReactDOMServer = require('react-dom/server');
const act = require('internal-test-utils').act;

describe('CSSPropertyOperations', () => {
it('should automatically append `px` to relevant styles', () => {
Expand Down Expand Up @@ -66,15 +67,19 @@ describe('CSSPropertyOperations', () => {
expect(html).toContain('"--someColor:#000000"');
});

it('should set style attribute when styles exist', () => {
it('should set style attribute when styles exist', async () => {
const styles = {
backgroundColor: '#000',
display: 'none',
};
let div = <div style={styles} />;
const root = document.createElement('div');
div = ReactDOM.render(div, root);
expect(/style=".*"/.test(root.innerHTML)).toBe(true);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<div style={styles} />);
});

const div = container.firstChild;
expect(/style=".*"/.test(container.innerHTML)).toBe(true);
});

it('should not set style attribute when no styles exist', () => {
Expand All @@ -87,7 +92,7 @@ describe('CSSPropertyOperations', () => {
expect(/style=/.test(html)).toBe(false);
});

it('should warn when using hyphenated style names', () => {
it('should warn when using hyphenated style names', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -96,16 +101,20 @@ describe('CSSPropertyOperations', () => {
}
}

const root = document.createElement('div');

expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should warn when updating hyphenated style names', () => {
it('should warn when updating hyphenated style names', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -118,10 +127,16 @@ describe('CSSPropertyOperations', () => {
'-ms-transform': 'translate3d(0, 0, 0)',
'-webkit-transform': 'translate3d(0, 0, 0)',
};
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);

expect(() => ReactDOM.render(<Comp style={styles} />, root)).toErrorDev([
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<Comp />);
});
await expect(async () => {
await act(() => {
root.render(<Comp style={styles} />);
});
}).toErrorDev([
'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
Expand All @@ -131,7 +146,7 @@ describe('CSSPropertyOperations', () => {
]);
});

it('warns when miscapitalizing vendored style names', () => {
it('warns when miscapitalizing vendored style names', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -148,9 +163,13 @@ describe('CSSPropertyOperations', () => {
}
}

const root = document.createElement('div');

expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev([
// msTransform is correct already and shouldn't warn
'Warning: Unsupported vendor-prefixed style property oTransform. ' +
'Did you mean OTransform?' +
Expand All @@ -163,7 +182,7 @@ describe('CSSPropertyOperations', () => {
]);
});

it('should warn about style having a trailing semicolon', () => {
it('should warn about style having a trailing semicolon', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -181,9 +200,13 @@ describe('CSSPropertyOperations', () => {
}
}

const root = document.createElement('div');

expect(() => ReactDOM.render(<Comp />, root)).toErrorDev([
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev([
"Warning: Style property values shouldn't contain a semicolon. " +
'Try "backgroundColor: blue" instead.' +
'\n in div (at **)' +
Expand All @@ -195,7 +218,7 @@ describe('CSSPropertyOperations', () => {
]);
});

it('should warn about style containing a NaN value', () => {
it('should warn about style containing a NaN value', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -204,27 +227,34 @@ describe('CSSPropertyOperations', () => {
}
}

const root = document.createElement('div');

expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should not warn when setting CSS custom properties', () => {
it('should not warn when setting CSS custom properties', async () => {
class Comp extends React.Component {
render() {
return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
}
}

const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<Comp />);
});
});

it('should warn about style containing an Infinity value', () => {
it('should warn about style containing an Infinity value', async () => {
class Comp extends React.Component {
static displayName = 'Comp';

Expand All @@ -233,25 +263,32 @@ describe('CSSPropertyOperations', () => {
}
}

const root = document.createElement('div');

expect(() => ReactDOM.render(<Comp />, root)).toErrorDev(
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<Comp />);
});
}).toErrorDev(
'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should not add units to CSS custom properties', () => {
it('should not add units to CSS custom properties', async () => {
class Comp extends React.Component {
render() {
return <div style={{'--foo': '5'}} />;
}
}

const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<Comp />);
});

expect(root.children[0].style.getPropertyValue('--foo')).toEqual('5');
expect(container.children[0].style.getPropertyValue('--foo')).toEqual('5');
});
});