[inputs] Fix some DcrInput instances (#2360)

The latest chage to DcrInput broke some input combinations. This fixes them and
adds a set of unit tests to ensure the proper behavior of DcrInput in DCR mode.

Author: matheusd

app/components/inputs/DcrInput.js

@@ -17,6 +17,13 @@ import { MAX_DCR_AMOUNT } from "constants";
 export const FixedDcrInput = ({ currencyDisplay, ...props }) =>
   <FloatInput {...{ ...props, unit: currencyDisplay, maxFracDigits: 8 }} />;
 
+function countDecimalDigits(s) {
+  for (let i = s.length-1; i >= 0; i--) {
+    if (s[i] === ".") return s.length - i - 1;
+  }
+  return 0;
+}
+
 /**
  * DcrInput provides a way to receive decred amount inputs. Instead of the usual
  * value/onChange pair, it uses amount/onChangeAmount to track values in decred
@@ -32,21 +39,36 @@ class DcrInput extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      decimal: false
+      decimal: false,
+      decimalDigits: 0
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.amount !== prevProps.amount && !this.props.amount && this.props.amount !== 0) {
+      // Amount just got cleared, so clear decimalDigits as well to display a
+      // blank input.
+      this.setState({ decimalDigits: 0 });
+    }
+  }
+
   // amountToDisplayStr converts the given amount in atoms to the appropriate
   // string to display given the current config of this input.
   amountToDisplayStr(amount) {
-    if (!amount && !this.state.decimal) return amount;
-    if (!amount) return "0.";
+    if (!amount) {
+      if (this.state.decimal) {
+        return "0.";
+      } else if (this.state.decimalDigits) {
+        return (0).toFixed(this.state.decimalDigits);
+      }
+      return amount;
+    }
     const { unitDivisor } = this.props;
     let scaled = amount / unitDivisor;
     if (this.state.decimal) {
-      scaled += ".";
+      return scaled.toFixed(0) + ".";
     }
-    return scaled;
+    return scaled.toFixed(this.state.decimalDigits);
   }
 
   // typedValueToAmount converts the given string value typed into the input to
@@ -60,14 +82,15 @@ class DcrInput extends React.Component {
     let amount;
     const value = e.target.value;
     const decimal = value && value.length > 0 && value[value.length-1] == ".";
+    const decimalDigits = countDecimalDigits(value);
     if (value) {
       amount = this.typedValueToAmount(value);
 
       // Pre-validate if <= max supply
       if (amount > MAX_DCR_AMOUNT) return;
     }
     if (onChangeAmount) onChangeAmount({ ...e, value, atomValue: amount });
-    this.setState({ decimal });
+    this.setState({ decimal, decimalDigits });
   }
 
   render() {

package.json

@@ -80,8 +80,8 @@
         }
       ],
       "window": {
-        "width":540,
-        "height":315
+        "width": 540,
+        "height": 315
       }
     },
     "files": [
@@ -167,6 +167,8 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",

test/unit/components/inputs/DcrInput.spec.js

@@ -0,0 +1,96 @@
+import { DcrInput } from "inputs";
+import { Provider } from "react-redux";
+
+import { createStore } from "redux";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+const reducer = s => s;
+
+// Test DcrInput component which loops back amount after an onChangeAmount event.
+// This is roughly how users of DcrInput behave.
+@autobind
+class TestDcrInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { amount: 0 };
+  }
+  onChangeAmount({ atomValue }) {
+    this.setState({ amount: atomValue });
+  }
+  render() {
+    return <DcrInput amount={this.state.amount} onChangeAmount={this.onChangeAmount} />;
+  }
+}
+
+function renderWithRedux(
+  ui,
+  { initialState, store = createStore(reducer, initialState) } = {}
+) {
+  return {
+    ...render(<Provider store={store}>{ui}</Provider>),
+    store
+  };
+}
+
+describe("DcrInput in DCR mode works", () => {
+
+  let queries;
+
+  const expectAfterChange = (targetValue, displayValue) => {
+    const { getByRole } = queries;
+    fireEvent.change(getByRole("textbox"), { target: { value: targetValue } });
+    expect(getByRole("textbox")).toHaveValue(displayValue);
+  };
+
+  beforeEach(() => {
+    queries = renderWithRedux(
+      <TestDcrInput />,
+      { initialState: { settings: { currentSettings: { currencyDisplay: "DCR" } } } }
+    );
+  });
+
+
+  test.each(
+    [
+      [ null, "" ],
+      [ undefined, "0" ],
+      [ "", "" ],
+      [ "0", "0" ],
+      [ "0.", "0." ],
+      [ ".", "0." ],
+      [ "0.0", "0.0" ],
+      [ "0.01", "0.01" ],
+      [ "0.010", "0.010" ],
+      [ "0.0000000", "0.0000000" ],
+      [ "0.00000000", "0.00000000" ],
+      [ "0.00000001", "0.00000001" ],
+      [ "0.1", "0.1" ],
+      [ "0.99999999", "0.99999999" ],
+      [ "1", "1" ],
+      [ "1.", "1." ],
+      [ "1.0", "1.0" ],
+      [ "1.01", "1.01" ],
+      [ "1.010", "1.010" ],
+      [ "1.0000000", "1.0000000" ],
+      [ "1.00000001", "1.00000001" ],
+      [ "1.1", "1.1" ],
+      [ "1.10", "1.10" ],
+      [ "1.101", "1.101" ],
+      [ "1.00000000", "1.00000000" ],
+      [ "1.00000001", "1.00000001" ],
+      [ "1.000000001", "1.00000000" ],
+      [ "123.918", "123.918" ],
+      [ "102891.28183707", "102891.28183707" ],
+      [ "20999999.9999999", "20999999.9999999" ],
+      [ "20999999.99999999", "20999999.99999999" ],
+      [ "a", "" ],
+      [ "1a", "1" ],
+      [ "1.2b", "1.2" ],
+      [ "1.2.", "1.2" ],
+      [ "1.2.2", "1.2" ],
+      [ "1,", "1." ],
+      [ "1,2", "1.2" ]
+    ],
+  )("'%s' into '%s'", expectAfterChange);
+});