Merge pull request #98 from Expensify/marcaaron-fixUpdatedConnections

Fix prop dependent withOnyx updates + add test

lib/Onyx.js

@@ -322,7 +322,7 @@ function keyChanged(key, data) {
  */
 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);
     }

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;
                 }
 

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>
 );
 

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();