Skip to content

e2e test for Text.id/nativeID #53170

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

Closed
rshest wants to merge 5 commits into from
Closed

e2e test for Text.id/nativeID #53170

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3daeba8
Create e2e test for Text.ellipsizeMode prop
rshest Aug 8, 2025
1b69ecd
Prop test for Text.allowFontScaling
rshest Aug 8, 2025
2c9e1de
E2E test for numberOfLines prop in Text
rshest Aug 8, 2025
b5718a6
Add Fantom test for Text.selectable
rshest Aug 8, 2025
25c74f9
e2e test for Text.id/nativeID (#53170)
rshest Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 235 additions & 0 deletions packages/react-native/Libraries/Text/__tests__/Text-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,243 @@ import {Text} from 'react-native';
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
import ReadOnlyText from 'react-native/src/private/webapis/dom/nodes/ReadOnlyText';

const TEST_TEXT = 'the text';

describe('<Text>', () => {
describe('props', () => {
describe('empty props', () => {
it('renders an empty element when there are no props', () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text>{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput().toJSX()).toEqual(
<rn-paragraph
allowFontScaling="true"
ellipsizeMode="tail"
fontSize="NaN"
fontSizeMultiplier="NaN"
foregroundColor="rgba(0, 0, 0, 0)">
{TEST_TEXT}
</rn-paragraph>,
);
});
});

describe('allowFontScaling', () => {
([true, false] as const).forEach(propVal => {
it(`can be set to "${propVal.toString()}"`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text allowFontScaling={propVal}>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['allowFontScaling']}).toJSX(),
).toEqual(
<rn-paragraph allowFontScaling={propVal.toString()}>
{TEST_TEXT}
</rn-paragraph>,
);
});
});

it(`has 'true' as default`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['allowFontScaling']}).toJSX(),
).toEqual(
<rn-paragraph allowFontScaling={'true'}>{TEST_TEXT}</rn-paragraph>,
);
});
});

describe('ellipsizeMode', () => {
it(`has 'tail' as default on JS side`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(),
).toEqual(
<rn-paragraph ellipsizeMode="tail">{TEST_TEXT}</rn-paragraph>,
);
});

it(`has 'clip' as default on C++ side`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text ellipsizeMode="clip">{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(),
).toEqual(<rn-paragraph>{TEST_TEXT}</rn-paragraph>);
});

(['head', 'middle', 'tail'] as const).forEach(propVal => {
it(`can be set to "${propVal}"`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text ellipsizeMode={propVal}>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(),
).toEqual(
<rn-paragraph ellipsizeMode={propVal}>{TEST_TEXT}</rn-paragraph>,
);
});
});
});

describe('id and nativeID', () => {
it(`has 'id' propagated correctly`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text id="alpha">{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
<rn-paragraph nativeID={'alpha'}>{TEST_TEXT}</rn-paragraph>,
);
});

it(`has 'nativeID' propagated correctly`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text nativeID="alpha">{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
<rn-paragraph nativeID={'alpha'}>{TEST_TEXT}</rn-paragraph>,
);
});
it(`has a precedence of 'id' over 'nativeID'`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(
<Text id="alpha" nativeID="gamma">
{TEST_TEXT}
</Text>,
);
});

expect(
root.getRenderedOutput({props: ['id', 'nativeID']}).toJSX(),
).toEqual(<rn-paragraph nativeID={'alpha'}>{TEST_TEXT}</rn-paragraph>);
});
});

describe('numberOfLines', () => {
let originalConsoleError = null;

afterEach(() => {
if (originalConsoleError != null) {
// $FlowExpectedError[cannot-write]
console.error = originalConsoleError;
originalConsoleError = null;
}
});

it(`doesn't allow negative numbers`, () => {
originalConsoleError = console.error;
// $FlowExpectedError[cannot-write]
console.error = jest.fn();

const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text numberOfLines={-1}>{TEST_TEXT}</Text>);
});

expect(
// NB. "numberOfLines" is mapped to "maximumNumberOfLines" in C++
root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(),
).toEqual(<rn-paragraph>{TEST_TEXT}</rn-paragraph>);
});

it(`has 0 as defult`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text numberOfLines={0}>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(),
).toEqual(<rn-paragraph>{TEST_TEXT}</rn-paragraph>);
});

it(`propagates valid numbers correctly`, () => {
const root = Fantom.createRoot();

[3, 1000].forEach(val => {
Fantom.runTask(() => {
root.render(<Text numberOfLines={val}>{TEST_TEXT}</Text>);
});

expect(
root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(),
).toEqual(
<rn-paragraph maximumNumberOfLines={val.toString()}>
{TEST_TEXT}
</rn-paragraph>,
);
});
});
});

describe('selectable', () => {
it(`can be set to "true"`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text selectable={true}>{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual(
<rn-paragraph selectable={'true'}>{TEST_TEXT}</rn-paragraph>,
);
});

it(`has 'false' as default`, () => {
const root = Fantom.createRoot();

Fantom.runTask(() => {
root.render(<Text>{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual(
<rn-paragraph>{TEST_TEXT}</rn-paragraph>,
);

Fantom.runTask(() => {
root.render(<Text selectable={false}>{TEST_TEXT}</Text>);
});

expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual(
<rn-paragraph>{TEST_TEXT}</rn-paragraph>,
);
});
});

describe('style', () => {
describe('writingDirection', () => {
it('propagates to mounting layer', () => {
Expand Down
Loading