Skip to content

Commit

Permalink
add fantom test for view culling inside <Modal /> (#49860)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #49860

changelog: [internal]

now that Fantom supports tests with <Modal />, add a test to cover scenario where <ScrollView /> is inside of <Modal />.

Reviewed By: rubennorte, rshest

Differential Revision: D70696834

fbshipit-source-id: 5f51917ac5c6a2cf451906e302ee2b62c15449ea
  • Loading branch information
sammy-SC authored and facebook-github-bot committed Mar 8, 2025
1 parent faafd8c commit eeef060
Showing 1 changed file with 67 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
import '../../../Core/InitializeCore.js';
import ensureInstance from '../../../../src/private/utilities/ensureInstance';
import ReactNativeElement from '../../../../src/private/webapis/dom/nodes/ReactNativeElement';
import Modal from '../../../Modal/Modal';
import View from '../../View/View';
import ScrollView from '../ScrollView';
import Fantom from '@react-native/fantom';
Expand Down Expand Up @@ -949,3 +950,69 @@ test('view flattening with culling', () => {
'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
]);
});

test('culling inside of Modal', () => {
const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100});
let maybeNode;

Fantom.runTask(() => {
root.render(
// <ScrollView /> is scrolled down and if it wasn't for the Modal,
// the content would be culled.
<ScrollView
contentOffset={{x: 0, y: 100}}
style={{height: 100, width: 100}}>
<Modal
ref={(node: ?React.ElementRef<typeof Modal>) => {
maybeNode = node;
}}
/>
</ScrollView>,
);
});

const element = ensureInstance(maybeNode, ReactNativeElement);

Fantom.runOnUIThread(() => {
Fantom.enqueueModalSizeUpdate(element, {
width: 100,
height: 100,
});
});
Fantom.runWorkLoop();

expect(root.takeMountingManagerLogs()).toEqual([
'Update {type: "RootView", nativeID: (root)}',
'Create {type: "ScrollView", nativeID: (N/A)}',
'Insert {type: "ScrollView", parentNativeID: (root), index: 0, nativeID: (N/A)}',
'Create {type: "View", nativeID: (N/A)}',
'Create {type: "ModalHostView", nativeID: (root)}',
'Create {type: "View", nativeID: (N/A)}',
'Insert {type: "View", parentNativeID: (root), index: 0, nativeID: (N/A)}',
'Insert {type: "ModalHostView", parentNativeID: (N/A), index: 0, nativeID: (root)}',
'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: (N/A)}',
]);

Fantom.runTask(() => {
root.render(
<ScrollView
contentOffset={{x: 0, y: 100}}
style={{height: 100, width: 100}}>
<Modal
ref={(node: ?React.ElementRef<typeof Modal>) => {
maybeNode = node;
}}>
<View
nativeID={'child'}
style={{height: 10, width: 10, marginTop: 45}}
/>
</Modal>
</ScrollView>,
);
});

expect(root.takeMountingManagerLogs()).toEqual([
'Create {type: "View", nativeID: "child"}',
'Insert {type: "View", parentNativeID: (N/A), index: 0, nativeID: "child"}',
]);
});

0 comments on commit eeef060

Please sign in to comment.