created conditional rendering of controls & tests

CFrez · CFrez · commit 7c4400e110d6 · 2021-02-12T15:11:42.000-06:00
diff --git a/frontend/src/components/widgets/NumberInput/NumberInput.test.tsx b/frontend/src/components/widgets/NumberInput/NumberInput.test.tsx
@@ -191,11 +191,62 @@ describe("NumberInput widget", () => {
       expect(wrapper.find(UIInput).props().overrides.Input.props.step).toBe(1)
     })
 
-    it("should change the state when ArrowUp", () => {
+    it("should have default Float step when step=undefined", () => {
+      const props = getFloatProps({ default: 1.0 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      // @ts-ignore
+      expect(InputWrapper.props().overrides.Input.props.step).toBe(0.01)
+    })
+
+    it("should have default Int step when step=undefined", () => {
+      const props = getIntProps({ default: 10 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      // @ts-ignore
+      expect(InputWrapper.props().overrides.Input.props.step).toBe(1)
+    })
+
+    it("should have default Float step when step=0.0", () => {
+      const props = getFloatProps({ default: 1.0, step: 0.0 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      // @ts-ignore
+      expect(InputWrapper.props().overrides.Input.props.step).toBe(0.01)
+    })
+
+    it("should have default Int step when step=0", () => {
+      const props = getIntProps({ default: 10, step: 0 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      // @ts-ignore
+      expect(InputWrapper.props().overrides.Input.props.step).toBe(1)
+    })
+
+    it("should not have step buttons when step=0", () => {
+      const props = getIntProps({ default: 10, step: 0 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      expect(InputWrapper.exists("StyledInputControls")).toBe(false)
+    })
+
+    it("should not have step buttons when step=0.0", () => {
+      const props = getFloatProps({ step: 0.0 })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      expect(InputWrapper.exists("StyledInputControls")).toBe(false)
+    })
+
+    it("should let ArrowKeys change Int state with no rendered buttons", () => {
       const props = getIntProps({
-        format: "%d",
         default: 10,
-        step: 1,
+        step: 0,
       })
       const wrapper = shallow(<NumberInput {...props} />)
       const InputWrapper = wrapper.find(UIInput)
@@ -209,6 +260,45 @@ describe("NumberInput widget", () => {
       expect(preventDefault).toHaveBeenCalled()
       expect(wrapper.state("value")).toBe(11)
       expect(wrapper.state("dirty")).toBe(false)
+
+      // @ts-ignore
+      InputWrapper.props().onKeyDown({
+        key: "ArrowDown",
+        preventDefault,
+      })
+
+      expect(preventDefault).toHaveBeenCalled()
+      expect(wrapper.state("value")).toBe(10)
+      expect(wrapper.state("dirty")).toBe(false)
+    })
+
+    it("should let ArrowKeys change Float state with no rendered buttons", () => {
+      const props = getFloatProps({
+        default: 1.0,
+        step: 0.0,
+      })
+      const wrapper = shallow(<NumberInput {...props} />)
+      const InputWrapper = wrapper.find(UIInput)
+
+      // @ts-ignore
+      InputWrapper.props().onKeyDown({
+        key: "ArrowDown",
+        preventDefault,
+      })
+
+      expect(preventDefault).toHaveBeenCalled()
+      expect(wrapper.state("value")).toBe(0.99)
+      expect(wrapper.state("dirty")).toBe(false)
+
+      // @ts-ignore
+      InputWrapper.props().onKeyDown({
+        key: "ArrowUp",
+        preventDefault,
+      })
+
+      expect(preventDefault).toHaveBeenCalled()
+      expect(wrapper.state("value")).toBe(1.0)
+      expect(wrapper.state("dirty")).toBe(false)
     })
 
     it("should change the state when ArrowDown", () => {
diff --git a/frontend/src/components/widgets/NumberInput/NumberInput.tsx b/frontend/src/components/widgets/NumberInput/NumberInput.tsx
@@ -281,20 +281,22 @@ class NumberInput extends React.PureComponent<Props, State> {
               },
             }}
           />
-          <StyledInputControls>
-            <StyledInputControl
-              className="step-down"
-              onClick={this.modifyValueUsingStep("decrement")}
-            >
-              <Icon content={Minus} size="xs" />
-            </StyledInputControl>
-            <StyledInputControl
-              className="step-up"
-              onClick={this.modifyValueUsingStep("increment")}
-            >
-              <Icon content={Plus} size="xs" />
-            </StyledInputControl>
-          </StyledInputControls>
+          {element.step !== 0 && (
+            <StyledInputControls>
+              <StyledInputControl
+                className="step-down"
+                onClick={this.modifyValueUsingStep("decrement")}
+              >
+                <Icon content={Minus} size="xs" />
+              </StyledInputControl>
+              <StyledInputControl
+                className="step-up"
+                onClick={this.modifyValueUsingStep("increment")}
+              >
+                <Icon content={Plus} size="xs" />
+              </StyledInputControl>
+            </StyledInputControls>
+          )}
         </StyledInputContainer>
         <StyledInstructionsContainer>
           <InputInstructions
