diff --git a/packages/react-native/Libraries/Text/__tests__/Text-itest.js b/packages/react-native/Libraries/Text/__tests__/Text-itest.js index c16ff81ade1a..c640d35a7a2c 100644 --- a/packages/react-native/Libraries/Text/__tests__/Text-itest.js +++ b/packages/react-native/Libraries/Text/__tests__/Text-itest.js @@ -21,8 +21,263 @@ 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('', () => { describe('props', () => { + describe('empty props', () => { + it('renders an empty element when there are no props', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput().toJSX()).toEqual( + + {TEST_TEXT} + , + ); + }); + }); + + describe('allowFontScaling', () => { + ([true, false] as const).forEach(propVal => { + it(`can be set to "${propVal.toString()}"`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['allowFontScaling']}).toJSX(), + ).toEqual( + + {TEST_TEXT} + , + ); + }); + }); + + it(`has 'true' as default`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['allowFontScaling']}).toJSX(), + ).toEqual( + {TEST_TEXT}, + ); + }); + }); + + describe('ellipsizeMode', () => { + it(`has 'tail' as default on JS side`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(), + ).toEqual( + {TEST_TEXT}, + ); + }); + + it(`has 'clip' as default on C++ side`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(), + ).toEqual({TEST_TEXT}); + }); + + (['head', 'middle', 'tail'] as const).forEach(propVal => { + it(`can be set to "${propVal}"`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['ellipsizeMode']}).toJSX(), + ).toEqual( + {TEST_TEXT}, + ); + }); + }); + }); + + describe('id and nativeID', () => { + it(`has 'id' propagated correctly`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual( + {TEST_TEXT}, + ); + }); + + it(`has 'nativeID' propagated correctly`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual( + {TEST_TEXT}, + ); + }); + it(`has a precedence of 'id' over 'nativeID'`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + {TEST_TEXT} + , + ); + }); + + expect( + root.getRenderedOutput({props: ['id', 'nativeID']}).toJSX(), + ).toEqual({TEST_TEXT}); + }); + }); + + describe('maxFontSizeMultiplier', () => { + it(`propagates valid numbers correctly`, () => { + const root = Fantom.createRoot(); + + [-1, 0, 1, 3, 1000].forEach(val => { + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['maxFontSizeMultiplier']}).toJSX(), + ).toEqual( + + {TEST_TEXT} + , + ); + }); + }); + }); + + 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({TEST_TEXT}); + }); + + expect( + // NB. "numberOfLines" is mapped to "maximumNumberOfLines" in C++ + root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(), + ).toEqual({TEST_TEXT}); + }); + + it(`has 0 as defult`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(), + ).toEqual({TEST_TEXT}); + }); + + it(`propagates valid numbers correctly`, () => { + const root = Fantom.createRoot(); + + [3, 1000].forEach(val => { + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect( + root.getRenderedOutput({props: ['maximumNumberOfLines']}).toJSX(), + ).toEqual( + + {TEST_TEXT} + , + ); + }); + }); + }); + + describe('selectable', () => { + it(`can be set to "true"`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual( + {TEST_TEXT}, + ); + }); + + it(`has 'false' as default`, () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual( + {TEST_TEXT}, + ); + + Fantom.runTask(() => { + root.render({TEST_TEXT}); + }); + + expect(root.getRenderedOutput({props: ['selectable']}).toJSX()).toEqual( + {TEST_TEXT}, + ); + }); + }); + describe('style', () => { describe('writingDirection', () => { it('propagates to mounting layer', () => {