Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

write fantom tests percentage based width and height (#48560)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48560

changelog: [internal]

add tests for width and height and margin style. Covering percentage-based dimensions and invalid inputs.

The test coverage is needed to make removal of folly::tryTo safe.

Reviewed By: rubennorte

Differential Revision: D67942139

fbshipit-source-id: c1e517dfb102eea892c998cf6ff4190fa69cdfa7
This commit is contained in:
Samuel Susla
2025-01-09 06:09:36 -08:00
committed by Facebook GitHub Bot
parent e7a37c1b5f
commit 1cbcea49bf
1 changed files with 181 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Components/View/__tests__/View-itest.js
Vendored
+181
View File
@@ -0,0 +1,181 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/
import '../../../Core/InitializeCore.js';
import * as Fantom from '@react-native/fantom';
import * as React from 'react';
const View = require('../View');
describe('width and height style', () => {
it('handles correct percentage-based dimensions', () => {
const root = Fantom.createRoot();
Fantom.runTask(() => {
root.render(
<View style={{width: 100, height: 100}}>
<View style={{width: '20%', height: '50%'}} collapsable={false} />
</View>,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
layoutMetrics-frame="{x:0,y:0,width:20,height:50}"
height="50.000000%"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="3"
width="20.000000%"
/>,
);
root.destroy();
});
it('handles numeric values passed in as strings', () => {
const root = Fantom.createRoot();
Fantom.runTask(() => {
root.render(
<View style={{width: '5', height: '10'}} collapsable={false} />,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
layoutMetrics-frame="{x:0,y:0,width:5,height:10}"
height="10.000000"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="3"
width="5.000000"
/>,
);
root.destroy();
});
it('handles invalid values, falling back to default', () => {
const root = Fantom.createRoot();
Fantom.runTask(() => {
root.render(
<View style={{width: 100, height: 100}}>
<View
// 5pt is a valid CSS value but RN can't parse it.
style={{width: '5pt', height: 'error 50%'}}
collapsable={false}
/>
</View>,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
layoutMetrics-frame="{x:0,y:0,width:100,height:0}"
height="undefined"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="3"
width="undefined"
/>,
);
root.destroy();
});
});
describe('margin style', () => {
it('handles correct percentage-based values', () => {
const root = Fantom.createRoot();
Fantom.runTask(() => {
root.render(
<View style={{width: 100, height: 200}}>
<View
style={{width: 5, height: 10, margin: '50%'}}
collapsable={false}
/>
</View>,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
layoutMetrics-frame="{x:50,y:50,width:5,height:10}"
height="10.000000"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="3"
margin="50.000000%"
width="5.000000"
/>,
);
root.destroy();
});
it('handles numeric values passed in as strings', () => {
const root = Fantom.createRoot();
Fantom.runTask(() => {
root.render(
<View style={{width: 100, height: 200}}>
<View
style={{width: 5, height: 10, margin: '5'}}
collapsable={false}
/>
</View>,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
layoutMetrics-frame="{x:5,y:5,width:5,height:10}"
height="10.000000"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="3"
margin="5.000000"
width="5.000000"
/>,
);
root.destroy();
});
});