test(SingleDatePicker): add tests for onFocusOut event

karma.conf.js

@@ -11,6 +11,7 @@ module.exports = (config) => {
     files: ['test/browser-main.js'],
 
     webpack: {
+      mode: 'development',
       externals: {
         sinon: true,
       },
@@ -36,7 +37,6 @@ module.exports = (config) => {
               presets: ['airbnb'],
             },
           },
-          { test: /\.json$/, loader: 'json-loader' },
 
           // Inject the Airbnb shims into the bundle
           { test: /test\/_helpers/, loader: 'imports-loader?shims=airbnb-js-shims' },

package.json

@@ -83,7 +83,6 @@
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
     "in-publish": "^2.0.0",
-    "json-loader": "^0.5.7",
     "karma": "^3.1.1",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.1.0",

src/components/SingleDatePicker.jsx

@@ -249,7 +249,16 @@ class SingleDatePicker extends React.PureComponent {
 
   onFocusOut(e) {
     const { onFocusChange } = this.props;
-    if (this.dayPickerContainer.contains(e.relatedTarget || e.target) || this.dayPickerContainer.contains(e.target)) return;
+    // In cases where **relatedTarget** is not null, it points to the right
+    // element here. However, in cases where it is null (such as clicking on a
+    // specific day) or it is **document.body** (IE11), the appropriate value is **event.target**.
+    //
+    // We handle both situations here by using the ` || ` operator to fallback
+    // to *event.target** when **relatedTarget** is not provided.
+    const relatedTarget = e.relatedTarget === document.body
+      ? e.target
+      : (e.relatedTarget || e.target);
+    if (this.dayPickerContainer.contains(relatedTarget)) return;
     onFocusChange({ focused: false });
   }
 

test/components/SingleDatePicker_spec.jsx

@@ -595,20 +595,66 @@ describe('SingleDatePicker', () => {
     });
   });
 
-  describe('#onFocusOut', () => {
-    it('calls props.onFocusChange with focused: false', () => {
-      const onFocusChangeStub = sinon.stub();
-      const wrapper = shallow((
+  describeIfWindow('#onFocusOut', () => {
+    let wrapper;
+    let ctrl;
+    let onFocusChangeStub;
+    let dpcContainsStub;
+
+    beforeEach(() => {
+      onFocusChangeStub = sinon.stub();
+      dpcContainsStub = sinon.stub();
+      wrapper = shallow((
         <SingleDatePicker id="date" onFocusChange={onFocusChangeStub} />
       )).dive();
-
-      wrapper.instance().dayPickerContainer = {
-        contains: () => false,
+      ctrl = wrapper.instance();
+      ctrl.dayPickerContainer = {
+        contains: dpcContainsStub.returns(true),
       };
+    });
+
+    afterEach(() => {
+      onFocusChangeStub.reset();
+      dpcContainsStub.reset();
+    });
 
-      wrapper.instance().onFocusOut({});
+    it('calls props.onFocusChange with focused: false when dayPickerContainer does not contain the target', () => {
+      dpcContainsStub.returns(false);
+      ctrl.onFocusOut({});
       expect(onFocusChangeStub.callCount).to.equal(1);
       expect(onFocusChangeStub.getCall(0).args[0]).to.deep.equal({ focused: false });
     });
+
+    it('should not call props.onFocusChange when dayPickerContainer contains the target', () => {
+      ctrl.onFocusOut({});
+      expect(onFocusChangeStub.callCount).to.equal(0);
+    });
+
+    it('should check the target when related target is the same as the document body', () => {
+      const event = {
+        relatedTarget: document.body,
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.target);
+    });
+
+    it('should check the target when related target is defined', () => {
+      const event = {
+        relatedTarget: 'related target',
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.relatedTarget);
+    });
+
+    it('should check the target when related target is not defined', () => {
+      const event = {
+        relatedTarget: undefined,
+        target: 'target',
+      };
+      ctrl.onFocusOut(event);
+      expect(dpcContainsStub.getCall(0).args[0]).to.equal(event.target);
+    });
   });
 });