Improve format of mounting logs (facebook#49016)

Summary: Changelog: [internal] This replaces the existing string-based logs with something more structured, and increases the coverage to properly log all operations. Reviewed By: javache Differential Revision: D67549201
rubennorte · Jan 28, 2025 · 09b064a · 09b064a
1 parent 7014600
commit 09b064a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 66 deletions.
diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js
@@ -35,13 +35,12 @@ describe('focus view command', () => {
       );
     });
 
-    const mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(2);
-    expect(mountingLogs[0]).toBe('create view type: `AndroidTextInput`');
-    expect(mountingLogs[1]).toBe(
-      'dispatch command `focus` on component `AndroidTextInput`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: RootView, tag: 1}',
+      'Create {type: AndroidTextInput, tag: 2}',
+      'Insert {type: AndroidTextInput, tag: 2, parentTag: 1, index: 0}',
+      'Command {name: focus, type: AndroidTextInput, tag: 2}',
+    ]);
   });
 
   it('creates view before dispatching view command from useLayoutEffect', () => {
@@ -62,13 +61,12 @@ describe('focus view command', () => {
       root.render(<Component />);
     });
 
-    const mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(2);
-    expect(mountingLogs[0]).toBe('create view type: `AndroidTextInput`');
-    expect(mountingLogs[1]).toBe(
-      'dispatch command `focus` on component `AndroidTextInput`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: RootView, tag: 11}',
+      'Create {type: AndroidTextInput, tag: 4}',
+      'Insert {type: AndroidTextInput, tag: 4, parentTag: 11, index: 0}',
+      'Command {name: focus, type: AndroidTextInput, tag: 4}',
+    ]);
   });
 
   it('creates view before dispatching view command from useEffect', () => {
@@ -85,17 +83,17 @@ describe('focus view command', () => {
 
       return <TextInput ref={textInputRef} />;
     }
+
     Fantom.runTask(() => {
       root.render(<Component />);
     });
 
-    const mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(2);
-    expect(mountingLogs[0]).toBe('create view type: `AndroidTextInput`');
-    expect(mountingLogs[1]).toBe(
-      'dispatch command `focus` on component `AndroidTextInput`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: RootView, tag: 21}',
+      'Create {type: AndroidTextInput, tag: 6}',
+      'Insert {type: AndroidTextInput, tag: 6, parentTag: 21, index: 0}',
+      'Command {name: focus, type: AndroidTextInput, tag: 6}',
+    ]);
   });
 });
 

diff --git a/packages/react-native/Libraries/ReactNative/__tests__/ReactFabric-Suspense-itest.js b/packages/react-native/Libraries/ReactNative/__tests__/ReactFabric-Suspense-itest.js
@@ -120,25 +120,24 @@ describe('Suspense', () => {
       );
     });
 
-    let mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `suspense fallback`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: RootView, tag: 1}',
+      'Create {type: View, tag: 2, nativeId: suspense fallback}',
+      'Insert {type: View, tag: 2, parentTag: 1, index: 0}',
+    ]);
 
     expect(resolveFunction).not.toBeNull();
     Fantom.runTask(() => {
       resolveFunction?.();
       resolveFunction = null;
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `square with data: green`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Remove {type: View, tag: 2, parentTag: 1, index: 0}',
+      'Delete {type: View, tag: 2}',
+      'Create {type: View, tag: 4, nativeId: square with data: green}',
+      'Insert {type: View, tag: 4, parentTag: 1, index: 0}',
+    ]);
 
     Fantom.runTask(() => {
       root.render(
@@ -148,25 +147,25 @@ describe('Suspense', () => {
       );
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `suspense fallback`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Remove {type: View, tag: 4, parentTag: 1, index: 0}',
+      'Delete {type: View, tag: 4}',
+      'Create {type: View, tag: 6, nativeId: suspense fallback}',
+      'Insert {type: View, tag: 6, parentTag: 1, index: 0}',
+    ]);
 
     expect(resolveFunction).not.toBeNull();
     Fantom.runTask(() => {
       resolveFunction?.();
       resolveFunction = null;
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `square with data: red`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Remove {type: View, tag: 6, parentTag: 1, index: 0}',
+      'Delete {type: View, tag: 6}',
+      'Create {type: View, tag: 8, nativeId: square with data: red}',
+      'Insert {type: View, tag: 8, parentTag: 1, index: 0}',
+    ]);
 
     Fantom.runTask(() => {
       root.render(
@@ -176,12 +175,12 @@ describe('Suspense', () => {
       );
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `square with data: green`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Remove {type: View, tag: 8, parentTag: 1, index: 0}',
+      'Delete {type: View, tag: 8}',
+      'Create {type: View, tag: 10, nativeId: square with data: green}',
+      'Insert {type: View, tag: 10, parentTag: 1, index: 0}',
+    ]);
 
     expect(resolveFunction).toBeNull();
   });
@@ -206,12 +205,11 @@ describe('Suspense', () => {
       root.render(<App color="green" />);
     });
 
-    let mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `square with data: green`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Update {type: RootView, tag: 11}',
+      'Create {type: View, tag: 12, nativeId: square with data: green}',
+      'Insert {type: View, tag: 12, parentTag: 11, index: 0}',
+    ]);
 
     expect(resolveFunction).toBeNull();
     Fantom.runTask(() => {
@@ -220,22 +218,20 @@ describe('Suspense', () => {
       });
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
     // Green square is still mounted. Fallback is not shown to the user.
-    expect(mountingLogs.length).toBe(0);
+    expect(root.takeMountingManagerLogs()).toEqual([]);
 
     expect(resolveFunction).not.toBeNull();
     Fantom.runTask(() => {
       resolveFunction?.();
       resolveFunction = null;
     });
 
-    mountingLogs = root.takeMountingManagerLogs();
-
-    expect(mountingLogs.length).toBe(1);
-    expect(mountingLogs[0]).toBe(
-      'create view type: `View` nativeId: `square with data: red`',
-    );
+    expect(root.takeMountingManagerLogs()).toEqual([
+      'Remove {type: View, tag: 12, parentTag: 11, index: 0}',
+      'Delete {type: View, tag: 12}',
+      'Create {type: View, tag: 16, nativeId: square with data: red}',
+      'Insert {type: View, tag: 16, parentTag: 11, index: 0}',
+    ]);
   });
 });