SpinButton: Events not firing #3282 (#4661) (#7180)

* Fixing: Events not firing #3282

* Added tests for onIncrement, onDecrement and onValidate

* Adding change file.

common/changes/office-ui-fabric-react/master_2018-05-01-00-32.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "SpinButton: addressing onValidate, onIncrement, and onDecrement callbacks to be called correctly.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx

@@ -619,14 +619,12 @@ describe('SpinButton', () => {
     expect(currentValue).toEqual(newCurrentValue);
   });
 
-  it('should fire custom handlers even when value prop is 0', () => {
-    const val: string = 0 as any;
+  it('should fire custom onIncrement handler (with minimal properties)', () => {
     const onIncrement: jest.Mock = jest.fn();
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
         label='label'
-        value={ val }
         onIncrement={ onIncrement }
       />
     );
@@ -643,4 +641,46 @@ describe('SpinButton', () => {
 
     expect(onIncrement).toBeCalled();
   });
+
+  it('should fire custom onDecrement handler (with minimal properties)', () => {
+    const onDecrement: jest.Mock = jest.fn();
+
+    const renderedDOM: HTMLElement = renderIntoDocument(
+      <SpinButton
+        label='label'
+        onDecrement={ onDecrement }
+      />
+    );
+
+    const buttonDOM: Element = renderedDOM.getElementsByClassName('ms-DownButton')[0];
+
+    ReactTestUtils.Simulate.mouseDown(buttonDOM,
+      {
+        type: 'mousedown',
+        clientX: 0,
+        clientY: 0
+      }
+    );
+
+    expect(onDecrement).toBeCalled();
+  });
+
+  it('should fire custom onValidate handler (with minimal properties)', () => {
+    const onValidate: jest.Mock = jest.fn();
+    const exampleNewValue = '99';
+
+    const renderedDOM: HTMLElement = renderIntoDocument(
+      <SpinButton
+        label='label'
+        onValidate={ onValidate }
+      />
+    );
+
+    // Assert on the input element.
+    const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
+    ReactTestUtils.Simulate.input(inputDOM, mockEvent(String(exampleNewValue)));
+    ReactTestUtils.Simulate.blur(inputDOM);
+
+    expect(onValidate).toBeCalled();
+  });
 });

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx

@@ -70,10 +70,6 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
   private _lastValidValue: string;
   private _spinningByMouse: boolean;
 
-  private _onValidate?: (value: string) => string | void;
-  private _onIncrement?: (value: string) => string | void;
-  private _onDecrement?: (value: string) => string | void;
-
   private _currentStepFunctionHandle: number;
   private _initialStepDelay = 400;
   private _stepDelay = 75;
@@ -102,16 +98,6 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     this._labelId = getId('Label');
     this._inputId = getId('input');
     this._spinningByMouse = false;
-
-    if (!props.defaultValue && props.value !== undefined) {
-      this._onValidate = props.onValidate;
-      this._onIncrement = props.onIncrement;
-      this._onDecrement = props.onDecrement;
-    } else {
-      this._onValidate = this._defaultOnValidate;
-      this._onIncrement = this._defaultOnIncrement;
-      this._onDecrement = this._defaultOnDecrement;
-    }
   }
 
   /**
@@ -312,6 +298,14 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     return this.props.value === undefined ? this.state.value : this.props.value;
   }
 
+  private _onValidate = (value: string): string | void => {
+    if (this.props.onValidate) {
+      return this.props.onValidate(value);
+    } else {
+      return this._defaultOnValidate(value);
+    }
+  }
+
   /**
    * Validate function to use if one is not passed in
    */
@@ -323,6 +317,14 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     return String(newValue);
   }
 
+  private _onIncrement = (value: string): string | void => {
+    if (this.props.onIncrement) {
+      return this.props.onIncrement(value);
+    } else {
+      return this._defaultOnIncrement(value);
+    }
+  }
+
   /**
    * Increment function to use if one is not passed in
    */
@@ -332,6 +334,14 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     return String(newValue);
   }
 
+  private _onDecrement = (value: string): string | void => {
+    if (this.props.onDecrement) {
+      return this.props.onDecrement(value);
+    } else {
+      return this._defaultOnDecrement(value);
+    }
+  }
+
   /**
    * Increment function to use if one is not passed in
    */