diff --git a/lib/Onyx.js b/lib/Onyx.js index 014e15656..82324d50b 100644 --- a/lib/Onyx.js +++ b/lib/Onyx.js @@ -328,7 +328,7 @@ function keyChanged(key, data, hasNewValue = true) { */ function sendDataToConnection(config, val, key) { if (config.withOnyxInstance) { - config.withOnyxInstance.setInitialState(config.statePropertyName, val); + config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val); } else if (_.isFunction(config.callback)) { config.callback(val, key); } diff --git a/lib/withOnyx.js b/lib/withOnyx.js index 834e1ad96..123fc4ad8 100644 --- a/lib/withOnyx.js +++ b/lib/withOnyx.js @@ -31,7 +31,7 @@ export default function (mapOnyxToState) { constructor(props) { super(props); - this.setInitialState = this.setInitialState.bind(this); + this.setWithOnyxState = this.setWithOnyxState.bind(this); // This stores all the Onyx connection IDs to be used when the component unmounts so everything can be // disconnected. It is a key value store with the format {[mapping.key]: connectionID}. @@ -86,9 +86,9 @@ export default function (mapOnyxToState) { * @param {String} statePropertyName * @param {*} val */ - setInitialState(statePropertyName, val) { + setWithOnyxState(statePropertyName, val) { if (!this.state.loading) { - console.error('withOnyx.setInitialState() called after loading: false'); + this.setState({[statePropertyName]: val}); return; } diff --git a/tests/components/ViewWithText.js b/tests/components/ViewWithText.js index 692edc744..f7c20d79b 100644 --- a/tests/components/ViewWithText.js +++ b/tests/components/ViewWithText.js @@ -8,7 +8,7 @@ const propTypes = { const ViewWithText = props => ( <View> - <Text>{props.text}</Text> + <Text testID="text-element">{props.text}</Text> </View> ); diff --git a/tests/unit/withOnyxTest.js b/tests/unit/withOnyxTest.js index 509cb5ffc..4f34112bc 100644 --- a/tests/unit/withOnyxTest.js +++ b/tests/unit/withOnyxTest.js @@ -126,6 +126,36 @@ describe('withOnyx', () => { }); }); + it('should update if a prop dependent key changes', () => { + let rerender; + let getByTestId; + const onRender = jest.fn(); + const TestComponentWithOnyx = withOnyx({ + text: { + key: props => `${ONYX_KEYS.COLLECTION.TEST_KEY}${props.collectionID}`, + }, + })(ViewWithText); + Onyx.set(`${ONYX_KEYS.COLLECTION.TEST_KEY}1`, 'test_1'); + Onyx.set(`${ONYX_KEYS.COLLECTION.TEST_KEY}2`, 'test_2'); + return waitForPromisesToResolve() + .then(() => { + const result = render(<TestComponentWithOnyx onRender={onRender} collectionID="1" />); + rerender = result.rerender; + getByTestId = result.getByTestId; + return waitForPromisesToResolve(); + }) + .then(() => { + expect(getByTestId('text-element').props.children).toEqual('test_1'); + }) + .then(() => { + rerender(<TestComponentWithOnyx collectionID="2" />); + return waitForPromisesToResolve(); + }) + .then(() => { + expect(getByTestId('text-element').props.children).toEqual('test_2'); + }); + }); + it('should pass a prop from one connected component to another', () => { const collectionItemID = 1; const onRender = jest.fn();