Test that fabric renderer sends diffs

facebook · Jan 23, 2018 · 5ef0566 · 5ef0566
1 parent 04d8fec
commit 5ef0566
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/packages/react-native-renderer/src/__mocks__/FabricUIManager.js b/packages/react-native-renderer/src/__mocks__/FabricUIManager.js
@@ -72,21 +72,21 @@ const RCTFabricUIManager = {
   }),
   cloneNodeWithNewProps: jest.fn(function cloneNodeWithNewProps(
     node,
-    newProps,
+    newPropsDiff,
   ) {
     return {
       reactTag: node.reactTag,
       viewName: node.viewName,
-      props: newProps,
+      props: {...node.props, ...newPropsDiff},
       children: node.children,
     };
   }),
   cloneNodeWithNewChildrenAndProps: jest.fn(
-    function cloneNodeWithNewChildrenAndProps(node, newProps) {
+    function cloneNodeWithNewChildrenAndProps(node, newPropsDiff) {
       return {
         reactTag: node.reactTag,
         viewName: node.viewName,
-        props: newProps,
+        props: {...node.props, ...newPropsDiff},
         children: [],
       };
     },

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -109,6 +109,48 @@ describe('ReactFabric', () => {
     ).toBe(1);
   });
 
+  it('should only pass props diffs to FabricUIManager.cloneNode', () => {
+    const View = createReactNativeComponentClass('View', () => ({
+      validAttributes: {foo: true, bar: true},
+      uiViewClassName: 'View',
+    }));
+
+    ReactFabric.render(
+      <View foo="a" bar="a">
+        1
+      </View>,
+      11,
+    );
+    expect(FabricUIManager.cloneNode).not.toBeCalled();
+    expect(FabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(FabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(FabricUIManager.cloneNodeWithNewChildrenAndProps).not.toBeCalled();
+
+    ReactFabric.render(
+      <View foo="a" bar="b">
+        1
+      </View>,
+      11,
+    );
+    expect(FabricUIManager.cloneNodeWithNewProps.mock.calls[0][1]).toEqual({
+      bar: 'b',
+    });
+    expect(FabricUIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+
+    ReactFabric.render(
+      <View foo="b" bar="b">
+        2
+      </View>,
+      11,
+    );
+    expect(
+      FabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],
+    ).toEqual({
+      foo: 'b',
+    });
+    expect(FabricUIManager.__dumpHierarchyForJestTestsOnly()).toMatchSnapshot();
+  });
+
   it('should not call UIManager.updateView from setNativeProps for properties that have not changed', () => {
     const View = createReactNativeComponentClass('View', () => ({
       validAttributes: {foo: true},

diff --git a/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap b/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap
@@ -49,3 +49,15 @@ exports[`ReactFabric renders and reorders children 2`] = `
    View {\\"title\\":\\"z\\"}
    View {\\"title\\":\\"y\\"}"
 `;
+
+exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 1`] = `
+"11
+ View {\\"foo\\":\\"a\\",\\"bar\\":\\"b\\"}
+   RCTRawText {\\"text\\":\\"1\\"}"
+`;
+
+exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 2`] = `
+"11
+ View {\\"foo\\":\\"b\\",\\"bar\\":\\"b\\"}
+   RCTRawText {\\"text\\":\\"2\\"}"
+`;