Merge pull request #382 from CraveFood/fix-amount-prop-update

Fix amount prop update

Author: vNakamura

packages/amount-selectors/src/components/AmountSelectors.js

@@ -49,13 +49,13 @@ class AmountSelectors extends React.Component {
     return this.props.onChange(validValue);
   };
 
-  updateDisplayValue = () => {
-    const parsedValue = parseFloat(this.state.value) || 0;
-    const validValue = Math.min(
-      this.props.max,
-      Math.max(this.props.min, parsedValue)
-    );
+  validValue = value => {
+    const parsedValue = parseFloat(value) || 0;
+    return Math.min(this.props.max, Math.max(this.props.min, parsedValue));
+  };
 
+  updateDisplayValue = () => {
+    const validValue = this.validValue(this.state.value);
     this.setState({
       value: validValue,
       displayValue: validValue.toFixed(2)
@@ -76,6 +76,16 @@ class AmountSelectors extends React.Component {
     this.onChange(Math.min(value, this.props.max), this.updateDisplayValue);
   };
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.value !== this.props.value) {
+      const validValue = this.validValue(this.props.value);
+      this.setState({
+        value: validValue,
+        displayValue: validValue.toFixed(2)
+      });
+    }
+  }
+
   render() {
     return (
       <Wrapper size={this.props.size}>

packages/amount-selectors/src/components/AmountSelectors.story.js

@@ -9,6 +9,25 @@ import AmountSelectors from "./AmountSelectors";
 storiesOf("Amount selectors", module)
   .add("Default", withInfo()(() => <AmountSelectors />))
   .add("With value set", withInfo()(() => <AmountSelectors value={2} />))
+  .add(
+    "With value set after mount",
+    withInfo()(() => {
+      class MyStory extends React.Component {
+        state = { value: 10 };
+        render() {
+          return (
+            <div>
+              <AmountSelectors value={this.state.value} />
+              <button onClick={() => this.setState({ value: Math.random() })}>
+                Set Value
+              </button>
+            </div>
+          );
+        }
+      }
+      return <MyStory />;
+    })
+  )
   .add(
     "With 0.5 steps",
     withInfo()(() => <AmountSelectors value={2} step={0.5} />)

packages/amount-selectors/src/components/AmountSelectors.test.js

@@ -81,6 +81,7 @@ describe("Amount selectors", () => {
 
       expect(component.state("value")).toBe(onChangeValue);
     });
+
     test("should handle an event fired by input", () => {
       const initialValue = 0;
       const event = {
@@ -126,4 +127,24 @@ describe("Amount selectors", () => {
       expect(component.state().disableBoth).toBe(true);
     });
   });
+
+  describe("component update", () => {
+    test("should update value when prop value is set after mount", () => {
+      const onChange = jest.fn();
+      const component = mount(
+        <AmountSelectors value={1} onChange={onChange} />
+      );
+      const newValue = 2;
+      component.setProps({ value: newValue });
+      expect(component.state("value")).toBe(newValue);
+    });
+
+    test("should update displayed value when prop value changes", () => {
+      const nextValue = 10;
+      const expectedDisplayValue = "10.00";
+      const component = mount(<AmountSelectors value={0} />);
+      component.setProps({ value: nextValue });
+      expect(component.state().displayValue).toBe(expectedDisplayValue);
+    });
+  });
 });