set enableAutoFocus to true by default, and add tests for the enableA…

…utoFocus configuration (adazzle#813)
supamanda · Jun 26, 2017 · 68a6ddb · 68a6ddb
1 parent 9ab8687
commit 68a6ddb
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 1 deletion.
diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js
@@ -132,7 +132,7 @@ const ReactDataGrid = React.createClass({
         rowsStart: 5,
         rowsEnd: 5
       },
-      enabledCellAutoFocus: true
+      enableCellAutoFocus: true
     };
   },
 

diff --git a/packages/react-data-grid/src/__tests__/Cell.spec.js b/packages/react-data-grid/src/__tests__/Cell.spec.js
@@ -3,6 +3,7 @@ let rewire       = require('rewire');
 let Cell         = rewire('../Cell');
 let rewireModule = require('../../../../test/rewireModule');
 let StubComponent = require('../../../../test/StubComponent');
+import ReactDOM from 'react-dom';
 import { mount, shallow } from 'enzyme';
 import _ from 'underscore';
 Object.assign = require('object-assign');
@@ -494,6 +495,73 @@ describe('Cell Tests', () => {
     });
   });
 
+  describe('Cell checkFocus', () => {
+    const shallowRenderComponent = (props) => {
+      const wrapper = shallow(<Cell {...props} />);
+      return wrapper;
+    };
+    describe('when the cell is selected but not active and the grid is not scrolling', () => {
+      const getProps = ({
+        enableCellAutoFocus = true,
+        getDataGridDOMNode = () => ({})
+      }) => ({
+        column: helpers.columns[0],
+        isScrolling: false,
+        cellMetaData: {
+          selected: { rowIdx: 1, idx: 1 },
+          active: false,
+          enableCellAutoFocus
+        },
+        getDataGridDOMNode,
+        rowIdx: 1,
+        idx: 1,
+        value: 'value'
+      });
+      describe('when enableCellAutoFocus is set to true', () => {
+        const enableCellAutoFocus = true;
+        it('focuses on the cell when document has no active element', () => {
+          const enzymeWrapper = shallowRenderComponent(getProps({ enableCellAutoFocus }));
+          spyOn(document, 'activeElement').and.returnValue(null);
+          const focus = jasmine.createSpy();
+          spyOn(ReactDOM, 'findDOMNode').and.returnValue({ focus });
+          enzymeWrapper.instance().checkFocus();
+          expect(ReactDOM.findDOMNode).toHaveBeenCalledWith(enzymeWrapper.instance());
+          expect(focus).toHaveBeenCalled();
+        });
+        it('focuses on the cell when document is focused on body and cell autofocus is enabled', () => {
+          const enzymeWrapper = shallowRenderComponent(getProps({ enableCellAutoFocus }));
+          spyOn(document, 'activeElement').and.returnValue({ nodeName: 'body' });
+          const focus = jasmine.createSpy();
+          spyOn(ReactDOM, 'findDOMNode').and.returnValue({ focus });
+          enzymeWrapper.instance().checkFocus();
+          expect(ReactDOM.findDOMNode).toHaveBeenCalledWith(enzymeWrapper.instance());
+          expect(focus).toHaveBeenCalled();
+        });
+      });
+      describe('when enableCellAutoFocus is set to false', () => {
+        const enableCellAutoFocus = false;
+        it('does not focus on the cell when document has no active element', () => {
+          const enzymeWrapper = shallowRenderComponent(getProps({ enableCellAutoFocus }));
+          spyOn(document, 'activeElement').and.returnValue(null);
+          const focus = jasmine.createSpy();
+          spyOn(ReactDOM, 'findDOMNode').and.returnValue({ focus });
+          enzymeWrapper.instance().checkFocus();
+          expect(ReactDOM.findDOMNode).not.toHaveBeenCalledWith(enzymeWrapper.instance());
+          expect(focus).not.toHaveBeenCalled();
+        });
+        it('does not focus on the cell when document is focused on body and cell autofocus is enabled', () => {
+          const enzymeWrapper = shallowRenderComponent(getProps({ enableCellAutoFocus }));
+          spyOn(document, 'activeElement').and.returnValue({ nodeName: 'body' });
+          const focus = jasmine.createSpy();
+          spyOn(ReactDOM, 'findDOMNode').and.returnValue({ focus });
+          enzymeWrapper.instance().checkFocus();
+          expect(ReactDOM.findDOMNode).not.toHaveBeenCalledWith(enzymeWrapper.instance());
+          expect(focus).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
   describe('Rendering Cell component', () => {
     const shallowRenderComponent = (props) => {
       const wrapper = shallow(<Cell {...props} />);

diff --git a/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js b/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js
@@ -1,3 +1,38 @@
+import React from 'react';
+import ReactDataGrid from '../ReactDataGrid';
+import { shallow } from 'enzyme';
+import * as helpers from '../helpers/test/GridPropHelpers';
+
+function shallowRenderGrid({
+  enableCellAutoFocus = undefined
+}) {
+  const enzymeWrapper = shallow(<ReactDataGrid
+    columns={helpers.columns}
+    rowGetter={helpers.rowGetter}
+    rowsCount={helpers.rowsCount()}
+    enableCellSelect
+    enableCellAutoFocus={enableCellAutoFocus}
+  />);
+  return {
+    enzymeWrapper
+  };
+}
+
+describe('configure enableCellAutoFocus property', () => {
+  it('passes enableCellAutoFocus property in the Grid cellMetaData', () => {
+    const enableCellAutoFocus = true;
+    const { enzymeWrapper } = shallowRenderGrid({ enableCellAutoFocus });
+    expect(enzymeWrapper.find('Grid').props().cellMetaData.enableCellAutoFocus).toEqual(enableCellAutoFocus);
+  });
+  it('sets enableCellAutoFocus to true by default', () => {
+    const { enzymeWrapper } = shallowRenderGrid({});
+    expect(enzymeWrapper.find('Grid').props().cellMetaData.enableCellAutoFocus).toBe(true);
+  });
+  it('sets enableCellAutoFocus to false if it is configured', () => {
+    const { enzymeWrapper } = shallowRenderGrid({ enableCellAutoFocus: false });
+    expect(enzymeWrapper.find('Grid').props().cellMetaData.enableCellAutoFocus).toBe(false);
+  });
+});
 
 //
 //   var testProps = {