mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Restructure Fantom test for View to follow convention (#52983)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/52983 Changelog: [internal] Just moving some tests that were defined under `<View>` that were related to styles, to under `<View> > props > style`. Reviewed By: rshest Differential Revision: D79447450 fbshipit-source-id: e97cc4e058ffc8170b7fa74176cc8dc27e26cfde
This commit is contained in:
Rubén Norte authored and 
Facebook GitHub Bot committed
1 parent
c28a601d80
commit
68e5a24ef7
1 file changed
+202
-193
+202
-193
@@ -20,209 +20,217 @@ import {View} from 'react-native';
|
||||
import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
|
||||
|
||||
describe('<View>', () => {
|
||||
describe('width and height style', () => {
|
||||
it('handles correct percentage-based dimensions', () => {
|
||||
const root = Fantom.createRoot();
|
||||
describe('props', () => {
|
||||
describe('style', () => {
|
||||
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>,
|
||||
);
|
||||
});
|
||||
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%"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('transform style', () => {
|
||||
it('causes view to be unflattened', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<View style={{transform: [{translateX: 10}]}} />);
|
||||
});
|
||||
|
||||
expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
|
||||
<rn-view transform='[{"translateX": 10.000000}]' />,
|
||||
);
|
||||
});
|
||||
|
||||
[
|
||||
[undefined, {x: -5, y: 0, width: 20, height: 10}],
|
||||
['50% 50%', {x: -5, y: 0, width: 20, height: 10}],
|
||||
['top left', {x: 0, y: 0, width: 20, height: 10}],
|
||||
['right bottom', {x: -10, y: 0, width: 20, height: 10}],
|
||||
].forEach(([transformOrigin, expectedBounds]) => {
|
||||
it(`applies transformOrigin correctly for ${String(transformOrigin)}`, () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const viewRef = createRef<HostInstance>();
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<View
|
||||
ref={viewRef}
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
transform: [{scaleX: 2}],
|
||||
transformOrigin,
|
||||
}}
|
||||
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%"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
|
||||
it('handles numeric values passed in as strings', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const viewBounds = viewElement.getBoundingClientRect();
|
||||
expect(viewBounds.x).toBe(expectedBounds.x);
|
||||
expect(viewBounds.y).toBe(expectedBounds.y);
|
||||
expect(viewBounds.width).toBe(expectedBounds.width);
|
||||
expect(viewBounds.height).toBe(expectedBounds.height);
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
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"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('transform style', () => {
|
||||
it('causes view to be unflattened', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<View style={{transform: [{translateX: 10}]}} />);
|
||||
});
|
||||
|
||||
expect(
|
||||
root.getRenderedOutput({props: ['transform']}).toJSX(),
|
||||
).toEqual(<rn-view transform='[{"translateX": 10.000000}]' />);
|
||||
});
|
||||
|
||||
[
|
||||
[undefined, {x: -5, y: 0, width: 20, height: 10}],
|
||||
['50% 50%', {x: -5, y: 0, width: 20, height: 10}],
|
||||
['top left', {x: 0, y: 0, width: 20, height: 10}],
|
||||
['right bottom', {x: -10, y: 0, width: 20, height: 10}],
|
||||
].forEach(([transformOrigin, expectedBounds]) => {
|
||||
it(`applies transformOrigin correctly for ${String(transformOrigin)}`, () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const viewRef = createRef<HostInstance>();
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<View
|
||||
ref={viewRef}
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
transform: [{scaleX: 2}],
|
||||
transformOrigin,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
const viewElement = ensureInstance(
|
||||
viewRef.current,
|
||||
ReactNativeElement,
|
||||
);
|
||||
|
||||
const viewBounds = viewElement.getBoundingClientRect();
|
||||
expect(viewBounds.x).toBe(expectedBounds.x);
|
||||
expect(viewBounds.y).toBe(expectedBounds.y);
|
||||
expect(viewBounds.width).toBe(expectedBounds.width);
|
||||
expect(viewBounds.height).toBe(expectedBounds.height);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('props', () => {
|
||||
describe('pointerEvents', () => {
|
||||
it('auto does not propagate to the mounting layer, it is the default', () => {
|
||||
const root = Fantom.createRoot();
|
||||
@@ -285,6 +293,7 @@ describe('<View>', () => {
|
||||
).toEqual(<rn-view pointerEvents="none" />);
|
||||
});
|
||||
});
|
||||
|
||||
describe('accessibility', () => {
|
||||
describe('accessibilityActions', () => {
|
||||
it('is propagated to the mounting layer', () => {
|
||||
|
||||
Reference in new issue
Block a user