{"commit":{"revision":"4cc8ec64c2c853146f35ee3c7d072fe23847a006","authorName":"Timothy Yung","authorEmail":"yungsters@fb.com","shortRevision":"4cc8ec64c2","authoredAt":"2021-07-26T23:45:26-07:00","subject":"Separate unit tests for ReactFabricHostComponent (#21969)"},"parents":["d4d7864934025232e8bca5d2febec846ec1bd6e3"],"files":[{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabricHostComponent-test.internal.js","status":"A"}],"patch":"diff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\nindex ebe763af02..c7e4e3dee1 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n@@ -13,14 +13,9 @@\n let React;\n let ReactFabric;\n let createReactNativeComponentClass;\n-let UIManager;\n let StrictMode;\n-let TextInputState;\n let act;\n \n-const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =\n- 'Warning: setNativeProps is not currently supported in Fabric';\n-\n const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =\n \"Warning: dispatchCommand was called with a ref that isn't a \" +\n 'native component. Use React.forwardRef to get access to the underlying native component';\n@@ -42,12 +37,8 @@ describe('ReactFabric', () => {\n React = require('react');\n StrictMode = React.StrictMode;\n ReactFabric = require('react-native-renderer\/fabric');\n- UIManager = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n- .UIManager;\n createReactNativeComponentClass = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n .ReactNativeViewConfigRegistry.register;\n- TextInputState = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n- .TextInputState;\n \n act = require('jest-react').act;\n });\n@@ -227,44 +218,6 @@ describe('ReactFabric', () => {\n ).toMatchSnapshot();\n });\n \n- it('should not call UIManager.updateView from ref.setNativeProps', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- UIManager.updateView.mockReset();\n-\n- let viewRef;\n- act(() => {\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n- });\n- expect(UIManager.updateView).not.toBeCalled();\n-\n- expect(() => {\n- viewRef.setNativeProps({});\n- }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {\n- withoutStack: true,\n- });\n-\n- expect(UIManager.updateView).not.toBeCalled();\n-\n- expect(() => {\n- viewRef.setNativeProps({foo: 'baz'});\n- }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {\n- withoutStack: true,\n- });\n- expect(UIManager.updateView).not.toBeCalled();\n- });\n-\n it('should call dispatchCommand for native refs', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n@@ -386,275 +339,6 @@ describe('ReactFabric', () => {\n expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();\n });\n \n- it('should call FabricUIManager.measure on ref.measure', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measure.mockClear();\n-\n- let viewRef;\n- act(() => {\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n- });\n-\n- expect(nativeFabricUIManager.measure).not.toBeCalled();\n- const successCallback = jest.fn();\n- viewRef.measure(successCallback);\n- expect(nativeFabricUIManager.measure).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);\n- });\n-\n- it('should no-op if calling measure on unmounted refs', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measure.mockClear();\n-\n- let viewRef;\n- act(() => {\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n- });\n- const dangerouslyRetainedViewRef = viewRef;\n- act(() => {\n- ReactFabric.stopSurface(11);\n- });\n-\n- expect(nativeFabricUIManager.measure).not.toBeCalled();\n- const successCallback = jest.fn();\n- dangerouslyRetainedViewRef.measure(successCallback);\n- expect(nativeFabricUIManager.measure).not.toBeCalled();\n- expect(successCallback).not.toBeCalled();\n- });\n-\n- it('should call FabricUIManager.measureInWindow on ref.measureInWindow', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measureInWindow.mockClear();\n-\n- let viewRef;\n- act(() => {\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n- });\n-\n- expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n- const successCallback = jest.fn();\n- viewRef.measureInWindow(successCallback);\n- expect(nativeFabricUIManager.measureInWindow).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);\n- });\n-\n- it('should no-op if calling measureInWindow on unmounted refs', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measureInWindow.mockClear();\n-\n- let viewRef;\n- act(() => {\n- ReactFabric.render(\n- {\n- viewRef = ref;\n- }}\n- \/>,\n- 11,\n- );\n- });\n- const dangerouslyRetainedViewRef = viewRef;\n- act(() => {\n- ReactFabric.stopSurface(11);\n- });\n-\n- expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n- const successCallback = jest.fn();\n- dangerouslyRetainedViewRef.measureInWindow(successCallback);\n- expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();\n- expect(successCallback).not.toBeCalled();\n- });\n-\n- it('should support ref in ref.measureLayout', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measureLayout.mockClear();\n-\n- let viewRef;\n- let otherRef;\n- act(() => {\n- ReactFabric.render(\n- \n- {\n- viewRef = ref;\n- }}\n- \/>\n- {\n- otherRef = ref;\n- }}\n- \/>\n- <\/View>,\n- 11,\n- );\n- });\n-\n- expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n- const successCallback = jest.fn();\n- const failureCallback = jest.fn();\n- viewRef.measureLayout(otherRef, successCallback, failureCallback);\n- expect(nativeFabricUIManager.measureLayout).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledTimes(1);\n- expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);\n- });\n-\n- it('should no-op if calling measureLayout on unmounted \"from\" ref', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measureLayout.mockClear();\n-\n- let viewRef;\n- let otherRef;\n- act(() => {\n- ReactFabric.render(\n- \n- {\n- viewRef = ref;\n- }}\n- \/>\n- {\n- otherRef = ref;\n- }}\n- \/>\n- <\/View>,\n- 11,\n- );\n- });\n- const dangerouslyRetainedOtherRef = otherRef;\n- act(() => {\n- ReactFabric.render(\n- \n- {\n- viewRef = ref;\n- }}\n- \/>\n- {null}\n- <\/View>,\n- 11,\n- );\n- });\n-\n- expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n- const successCallback = jest.fn();\n- const failureCallback = jest.fn();\n- viewRef.measureLayout(\n- dangerouslyRetainedOtherRef,\n- successCallback,\n- failureCallback,\n- );\n- expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n- expect(successCallback).not.toBeCalled();\n- expect(failureCallback).not.toBeCalled();\n- });\n-\n- it('should no-op if calling measureLayout on unmounted \"to\" ref', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- nativeFabricUIManager.measureLayout.mockClear();\n-\n- let viewRef;\n- let otherRef;\n- act(() => {\n- ReactFabric.render(\n- \n- {\n- viewRef = ref;\n- }}\n- \/>\n- {\n- otherRef = ref;\n- }}\n- \/>\n- <\/View>,\n- 11,\n- );\n- });\n- const dangerouslyRetainedViewRef = viewRef;\n- act(() => {\n- ReactFabric.render(\n- \n- {null}\n- {\n- otherRef = ref;\n- }}\n- \/>\n- <\/View>,\n- 11,\n- );\n- });\n-\n- expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n- const successCallback = jest.fn();\n- const failureCallback = jest.fn();\n- dangerouslyRetainedViewRef.measureLayout(\n- otherRef,\n- successCallback,\n- failureCallback,\n- );\n- expect(nativeFabricUIManager.measureLayout).not.toBeCalled();\n- expect(successCallback).not.toBeCalled();\n- expect(failureCallback).not.toBeCalled();\n- });\n-\n it('returns the correct instance and calls it in the callback', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\n@@ -1202,44 +886,6 @@ describe('ReactFabric', () => {\n expect(match).toBe(child._nativeTag);\n });\n \n- it('blur on host component calls TextInputState', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- const viewRef = React.createRef();\n- act(() => {\n- ReactFabric.render(, 11);\n- });\n-\n- expect(TextInputState.blurTextInput).not.toBeCalled();\n-\n- viewRef.current.blur();\n-\n- expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);\n- expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);\n- });\n-\n- it('focus on host component calls TextInputState', () => {\n- const View = createReactNativeComponentClass('RCTView', () => ({\n- validAttributes: {foo: true},\n- uiViewClassName: 'RCTView',\n- }));\n-\n- const viewRef = React.createRef();\n- act(() => {\n- ReactFabric.render(, 11);\n- });\n-\n- expect(TextInputState.focusTextInput).not.toBeCalled();\n-\n- viewRef.current.focus();\n-\n- expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);\n- expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);\n- });\n-\n it('should no-op if calling sendAccessibilityEvent on unmounted refs', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricHostComponent-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricHostComponent-test.internal.js\nnew file mode 100644\nindex 0000000000..de19bf7fe8\n--- \/dev\/null\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabricHostComponent-test.internal.js\n@@ -0,0 +1,220 @@\n+\/**\n+ * (c) Facebook, Inc. and its affiliates. Confidential and proprietary.\n+ *\n+ * @emails react-core\n+ * @jest-environment node\n+ *\/\n+\n+'use strict';\n+\n+import * as React from 'react';\n+\n+beforeEach(() => {\n+ jest.resetModules();\n+ jest.restoreAllMocks();\n+\n+ require('react-native\/Libraries\/ReactPrivate\/InitializeNativeFabricUIManager');\n+});\n+\n+\/**\n+ * Renders a sequence of mock views as dictated by `keyLists`. The `keyLists`\n+ * argument is an array of arrays which determines the number of render passes,\n+ * how many views will be rendered in each pass, and what the keys are for each\n+ * of the views.\n+ *\n+ * If an element in `keyLists` is null, the entire root will be unmounted.\n+ *\n+ * The return value is an array of arrays with the resulting refs from rendering\n+ * each corresponding array of keys.\n+ *\n+ * If the corresponding array of keys is null, the returned element at that\n+ * index will also be null.\n+ *\/\n+function mockRenderKeys(keyLists) {\n+ const ReactFabric = require('react-native-renderer\/fabric');\n+ const createReactNativeComponentClass = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n+ .ReactNativeViewConfigRegistry.register;\n+ const {act} = require('jest-react');\n+\n+ const mockContainerTag = 11;\n+ const MockView = createReactNativeComponentClass('RCTMockView', () => ({\n+ validAttributes: {},\n+ uiViewClassName: 'RCTMockView',\n+ }));\n+\n+ return keyLists.map(keyList => {\n+ if (Array.isArray(keyList)) {\n+ const refs = keyList.map(key => undefined);\n+ act(() => {\n+ ReactFabric.render(\n+ \n+ {keyList.map((key, index) => (\n+ {\n+ refs[index] = ref;\n+ }}\n+ \/>\n+ ))}\n+ <\/MockView>,\n+ mockContainerTag,\n+ );\n+ });\n+ \/\/ Clone `refs` to ignore future passes.\n+ return [...refs];\n+ }\n+ if (keyList == null) {\n+ act(() => {\n+ ReactFabric.stopSurface(mockContainerTag);\n+ });\n+ return null;\n+ }\n+ throw new TypeError(\n+ `Invalid 'keyLists' element of type ${typeof keyList}.`,\n+ );\n+ });\n+}\n+\n+describe('blur', () => {\n+ test('blur() invokes TextInputState', () => {\n+ const {\n+ TextInputState,\n+ } = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface');\n+\n+ const [[fooRef]] = mockRenderKeys([['foo']]);\n+\n+ fooRef.blur();\n+\n+ expect(TextInputState.blurTextInput.mock.calls).toEqual([[fooRef]]);\n+ });\n+});\n+\n+describe('focus', () => {\n+ test('focus() invokes TextInputState', () => {\n+ const {\n+ TextInputState,\n+ } = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface');\n+\n+ const [[fooRef]] = mockRenderKeys([['foo']]);\n+\n+ fooRef.focus();\n+\n+ expect(TextInputState.focusTextInput.mock.calls).toEqual([[fooRef]]);\n+ });\n+});\n+\n+describe('measure', () => {\n+ test('component.measure(...) invokes callback', () => {\n+ const [[fooRef]] = mockRenderKeys([['foo']]);\n+\n+ const callback = jest.fn();\n+ fooRef.measure(callback);\n+\n+ expect(nativeFabricUIManager.measure).toHaveBeenCalledTimes(1);\n+ expect(callback.mock.calls).toEqual([[10, 10, 100, 100, 0, 0]]);\n+ });\n+\n+ test('unmounted.measure(...) does nothing', () => {\n+ const [[fooRef]] = mockRenderKeys([['foo'], null]);\n+\n+ const callback = jest.fn();\n+ fooRef.measure(callback);\n+\n+ expect(nativeFabricUIManager.measure).not.toHaveBeenCalled();\n+ expect(callback).not.toHaveBeenCalled();\n+ });\n+});\n+\n+describe('measureInWindow', () => {\n+ test('component.measureInWindow(...) invokes callback', () => {\n+ const [[fooRef]] = mockRenderKeys([['foo']]);\n+\n+ const callback = jest.fn();\n+ fooRef.measureInWindow(callback);\n+\n+ expect(nativeFabricUIManager.measureInWindow).toHaveBeenCalledTimes(1);\n+ expect(callback.mock.calls).toEqual([[10, 10, 100, 100]]);\n+ });\n+\n+ test('unmounted.measureInWindow(...) does nothing', () => {\n+ const [[fooRef]] = mockRenderKeys([['foo'], null]);\n+\n+ const callback = jest.fn();\n+ fooRef.measureInWindow(callback);\n+\n+ expect(nativeFabricUIManager.measureInWindow).not.toHaveBeenCalled();\n+ expect(callback).not.toHaveBeenCalled();\n+ });\n+});\n+\n+describe('measureLayout', () => {\n+ test('component.measureLayout(component, ...) invokes callback', () => {\n+ const [[fooRef, barRef]] = mockRenderKeys([['foo', 'bar']]);\n+\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ fooRef.measureLayout(barRef, successCallback, failureCallback);\n+\n+ expect(nativeFabricUIManager.measureLayout).toHaveBeenCalledTimes(1);\n+ expect(successCallback.mock.calls).toEqual([[1, 1, 100, 100]]);\n+ });\n+\n+ test('unmounted.measureLayout(component, ...) does nothing', () => {\n+ const [[fooRef, barRef]] = mockRenderKeys([\n+ ['foo', 'bar'],\n+ ['foo', null],\n+ ]);\n+\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ fooRef.measureLayout(barRef, successCallback, failureCallback);\n+\n+ expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();\n+ expect(successCallback).not.toHaveBeenCalled();\n+ });\n+\n+ test('component.measureLayout(unmounted, ...) does nothing', () => {\n+ const [[fooRef, barRef]] = mockRenderKeys([\n+ ['foo', 'bar'],\n+ [null, 'bar'],\n+ ]);\n+\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ fooRef.measureLayout(barRef, successCallback, failureCallback);\n+\n+ expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();\n+ expect(successCallback).not.toHaveBeenCalled();\n+ });\n+\n+ test('unmounted.measureLayout(unmounted, ...) does nothing', () => {\n+ const [[fooRef, barRef]] = mockRenderKeys([['foo', 'bar'], null]);\n+\n+ const successCallback = jest.fn();\n+ const failureCallback = jest.fn();\n+ fooRef.measureLayout(barRef, successCallback, failureCallback);\n+\n+ expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();\n+ expect(successCallback).not.toHaveBeenCalled();\n+ });\n+});\n+\n+describe('setNativeProps', () => {\n+ test('setNativeProps(...) emits a warning', () => {\n+ const {\n+ UIManager,\n+ } = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface');\n+\n+ const [[fooRef]] = mockRenderKeys([['foo']]);\n+\n+ expect(() => {\n+ fooRef.setNativeProps({});\n+ }).toErrorDev(\n+ ['Warning: setNativeProps is not currently supported in Fabric'],\n+ {\n+ withoutStack: true,\n+ },\n+ );\n+ expect(UIManager.updateView).not.toBeCalled();\n+ });\n+});\n","body":""}

dillon1000/react

Files changed