Merge pull request #6828 from agamrafaeli/buttonbase-test-handlefocus

[ButtonBase] Add test coverage for handleFocus

src/internal/ButtonBase.js

@@ -189,20 +189,23 @@ export default class ButtonBase extends Component {
 
     event.persist();
 
-    detectKeyboardFocus(this, findDOMNode(this.button), () => {
-      this.keyDown = false;
-      this.setState({ keyboardFocused: true });
-
-      if (this.props.onKeyboardFocus) {
-        this.props.onKeyboardFocus(event);
-      }
-    });
+    const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
+    detectKeyboardFocus(this, findDOMNode(this.button), keyboardFocusCallback);
 
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
   };
 
+  onKeyboardFocusHandler = (event) => {
+    this.keyDown = false;
+    this.setState({ keyboardFocused: true });
+
+    if (this.props.onKeyboardFocus) {
+      this.props.onKeyboardFocus(event);
+    }
+  };
+
   renderRipple(ripple, center) {
     if (ripple === true && !this.props.disabled) {
       return <TouchRipple ref={(c) => { this.ripple = c; }} center={center} />;
@@ -222,6 +225,7 @@ export default class ButtonBase extends Component {
       keyboardFocusedClassName,
       onBlur, // eslint-disable-line no-unused-vars
       onFocus, // eslint-disable-line no-unused-vars
+      onKeyboardFocus, // eslint-disable-line no-unused-vars
       onKeyDown, // eslint-disable-line no-unused-vars
       onKeyUp, // eslint-disable-line no-unused-vars
       onMouseDown, // eslint-disable-line no-unused-vars

src/internal/ButtonBase.spec.js

@@ -340,6 +340,30 @@ describe('<ButtonBase />', () => {
     });
   });
 
+  describe('handleFocus()', () => {
+    it('when disabled should not persist event', () => {
+      const wrapper = mount(<ButtonBase disabled>Hello</ButtonBase>);
+      const instance = wrapper.instance();
+      const eventMock = {
+        persist: spy(),
+      };
+      instance.handleFocus(eventMock);
+      assert.strictEqual(eventMock.persist.callCount, 0);
+    });
+
+    it('onKeyboardFocusHandler() should propogate call to onKeyboardFocus prop', () => {
+      const eventMock = 'woof';
+      const onKeyboardFocusSpy = spy();
+      const wrapper = mount(
+        <ButtonBase component={'span'} onKeyboardFocus={onKeyboardFocusSpy}>Hello</ButtonBase>,
+      );
+      const instance = wrapper.instance();
+      instance.onKeyboardFocusHandler(eventMock);
+      assert.strictEqual(onKeyboardFocusSpy.callCount, 1);
+      assert.strictEqual(onKeyboardFocusSpy.calledWith(eventMock), true);
+    });
+  });
+
   describe('handleKeyDown()', () => {
     let wrapper;
     let instance;