feat(react-grid): Use column name if its title is not specified

packages/dx-react-grid-bootstrap3/.eslintrc.json

@@ -10,7 +10,8 @@
         "import/prefer-default-export": "off",
         "no-underscore-dangle": "off",
         "react/forbid-prop-types": "off",
-        "jsx-a11y/no-static-element-interactions": "off"
+        "jsx-a11y/no-static-element-interactions": "off",
+        "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.*"]}]
     },
     "env": {
       "jest/globals": true

packages/dx-react-grid-bootstrap3/package.json

@@ -65,6 +65,7 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "core-js": "^2.4.1",
+    "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-airbnb-base": "^11.1.3",

packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx

@@ -24,7 +24,7 @@ export const GroupPanelCell = ({
         });
       }}
     >
-      {column.title}
+      {column.title || column.name}
       {allowSorting && sortingDirection && (
         <span>
           &nbsp;

packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { GroupPanelCell } from './group-panel-cell';
+
+describe('GroupPanelCell', () => {
+  test('should use column name if title is not specified', () => {
+    const tree = mount(
+      <GroupPanelCell
+        column={{
+          name: 'Test',
+        }}
+      />,
+    );
+
+    expect(tree.find('div > span').text()).toBe('Test');
+  });
+});

packages/dx-react-grid-bootstrap3/src/templates/table-group-row-cell.jsx

@@ -18,7 +18,7 @@ export const TableGroupRowCell = ({ style, colspan, row, isExpanded, toggleGroup
         marginRight: '10px',
       }}
     />
-    <strong>{row.column.title}: {row.value}</strong>
+    <strong>{row.column.title || row.column.name}: {row.value}</strong>
   </td>
 );
 

packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.jsx

@@ -10,6 +10,7 @@ export const TableHeaderCell = ({
 }) => {
   const align = column.align || 'left';
   const invertedAlign = align === 'left' ? 'right' : 'left';
+  const columnTitle = column.title || column.name;
 
   const gropingControl = allowGrouping && (
     <div
@@ -45,13 +46,13 @@ export const TableHeaderCell = ({
           style={{ visibility: sortingDirection ? 'visible' : 'hidden' }}
         />
         &nbsp;
-        {column.title}
+        {columnTitle}
       </span>
     ) : (
       <span
         className={sortingDirection ? 'text-primary' : ''}
       >
-        {column.title}
+        {columnTitle}
         &nbsp;
         <SortingIndicator
           direction={sortingDirection}
@@ -91,7 +92,7 @@ export const TableHeaderCell = ({
         }}
       >
         {allowSorting ? sortingControl : (
-          column.title
+          columnTitle
         )}
       </div>
     </th>

packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { TableHeaderCell } from './table-header-cell';
+
+describe('TableHeaderCell', () => {
+  test('should use column name if title is not specified', () => {
+    const tree = mount(
+      <table>
+        <thead>
+          <tr>
+            <TableHeaderCell
+              column={{
+                name: 'Test',
+              }}
+            />
+          </tr>
+        </thead>
+      </table>,
+    );
+
+    expect(tree.find('th > div').text()).toBe('Test');
+  });
+});

packages/dx-react-grid-material-ui/.eslintrc.json

@@ -11,7 +11,7 @@
         "no-underscore-dangle": "off",
         "react/forbid-prop-types": "off",
         "jsx-a11y/no-static-element-interactions": "off",
-        "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.*"]}]
+        "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.*", "**/testing.*"]}]
     },
     "env": {
       "jest/globals": true

packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx

@@ -37,7 +37,7 @@ const GroupPanelCellBase = ({
         active={allowSorting && !!sortingDirection}
         direction={sortingDirection}
       >
-        {column.title}
+        {column.title || column.name}
       </TableSortLabel>
     </span>
     &nbsp;

packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mountWithStyles } from '../utils/testing';
+import { GroupPanelCell } from './group-panel-cell';
+
+describe('GroupPanelCell', () => {
+  test('should use column name if title is not specified', () => {
+    const tree = mountWithStyles(
+      <GroupPanelCell
+        column={{
+          name: 'Test',
+        }}
+      />,
+    );
+
+    expect(tree.find('TableSortLabel').text()).toBe('Test');
+  });
+});

packages/dx-react-grid-material-ui/src/templates/pagination.test.jsx

@@ -1,21 +1,18 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
 import injectTapEventPlugin from 'react-tap-event-plugin';
+import { mountWithStyles } from '../utils/testing';
 import { Pagination } from './pagination';
 
 injectTapEventPlugin();
 
 describe('Pagination', () => {
   describe('#render', () => {
-    const paginationTree = (totalPages, currentPage) => mount(
-      <MuiThemeProvider theme={createMuiTheme()}>
-        <Pagination
-          totalPages={totalPages}
-          currentPage={currentPage}
-          onCurrentPageChange={() => {}}
-        />
-      </MuiThemeProvider>,
+    const paginationTree = (totalPages, currentPage) => mountWithStyles(
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        onCurrentPageChange={() => {}}
+      />,
     );
 
     test('can select the first item', () => {

packages/dx-react-grid-material-ui/src/templates/table-filter-cell.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mountWithStyles } from '../utils/testing';
+import { TableFilterCell } from './table-filter-cell';
+
+describe('TableFilterCell', () => {
+  test('should use column name if title is not specified', () => {
+    const tree = mountWithStyles(
+      <table>
+        <thead>
+          <tr>
+            <TableFilterCell
+              column={{
+                name: 'Test',
+              }}
+            />
+          </tr>
+        </thead>
+      </table>,
+    );
+
+    expect(tree.find('TextField').prop('label')).toBe('Test');
+  });
+});

packages/dx-react-grid-material-ui/src/templates/table-group-row-cell.jsx

@@ -50,7 +50,7 @@ const TableGroupRowCellBase = ({
       }
     </span>
     <strong style={{ verticalAlign: 'middle' }}>
-      {row.column.title}: {row.value}
+      {row.column.title || row.column.name}: {row.value}
     </strong>
   </TableCell>
 );

packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx

@@ -57,6 +57,7 @@ export const TableHeaderCellBase = ({
 }) => {
   const align = column.align || 'left';
   const invertedAlign = align === 'left' ? 'right' : 'left';
+  const columnTitle = column.title || column.name;
 
   const groupingControlClasses = classNames(
     {
@@ -98,7 +99,7 @@ export const TableHeaderCellBase = ({
       active={!!sortingDirection}
       direction={sortingDirection}
     >
-      {column.title}
+      {columnTitle}
     </TableSortLabel>
   );
 
@@ -115,7 +116,7 @@ export const TableHeaderCellBase = ({
       {gropingControl}
       <div className={titleClasses}>
         {allowSorting ? sortingControl : (
-          column.title
+          columnTitle
         )}
       </div>
     </TableCell>

packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mountWithStyles } from '../utils/testing';
+import { TableHeaderCell } from './table-header-cell';
+
+describe('TableHeaderCell', () => {
+  test('should use column name if title is not specified', () => {
+    const tree = mountWithStyles(
+      <table>
+        <thead>
+          <tr>
+            <TableHeaderCell
+              column={{
+                name: 'Test',
+              }}
+            />
+          </tr>
+        </thead>
+      </table>,
+    );
+
+    expect(tree.find('div').text()).toBe('Test');
+  });
+});

packages/dx-react-grid-material-ui/src/utils/testing.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
+
+export const mountWithStyles = children =>
+  mount(
+    <MuiThemeProvider theme={createMuiTheme()}>
+      {children}
+    </MuiThemeProvider>,
+  );
+