fix(react-grid): correct changing DataTypeProvider.for property in ru…

…ntime (#2201) * Add key prop to plugin * Add render test * Add valueEdditor test * Refact * Refactor tests
DevExpress · Aug 1, 2019 · 3732635 · 3732635
1 parent c1411e2
commit 3732635
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 3 deletions.
diff --git a/packages/dx-react-grid/src/plugins/data-type-provider.test.tsx b/packages/dx-react-grid/src/plugins/data-type-provider.test.tsx
@@ -1,14 +1,32 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 import { getAvailableFilterOperationsGetter } from '@devexpress/dx-grid-core';
-import { PluginHost } from '@devexpress/dx-react-core';
+import {
+  PluginHost,
+  Template,
+  TemplateConnector,
+  TemplatePlaceholder,
+} from '@devexpress/dx-react-core';
 import { pluginDepsToComponents, getComputedState, setupConsole } from '@devexpress/dx-testing';
 import { DataTypeProvider } from './data-type-provider';
 
 jest.mock('@devexpress/dx-grid-core', () => ({
   getAvailableFilterOperationsGetter: jest.fn(),
 }));
 
+const defaultDeps = {
+  getter: {
+    tableColumns: [
+      { key: 'a', column: { name: 'a' } },
+      { key: 'b', column: { name: 'b' } },
+    ],
+  },
+  template: {
+    table: {},
+  },
+  plugins: ['Table'],
+};
+
 describe('DataTypeProvider', () => {
   let resetConsole;
   beforeAll(() => {
@@ -70,14 +88,158 @@ describe('DataTypeProvider', () => {
   it('should define the "getAvailableFilterOperations" getter', () => {
     const tree = mount((
       <PluginHost>
-        {pluginDepsToComponents({})}
         <DataTypeProvider
           for={['test']}
           getAvailableFilterOperations={() => {}}
         />
+        {pluginDepsToComponents({})}
       </PluginHost>
     ));
     expect(getComputedState(tree).getAvailableFilterOperations)
       .toEqual(expect.any(Function));
   });
+
+  describe('change "for" property in runtime', () => {
+    class Test extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          columnNames: this.props.columnNames,
+          isRowEdit: this.props.isRowEdit,
+        };
+      }
+      render() {
+        const { columnNames } = this.state;
+        const { formatterComponent, editorComponent } = this.props;
+        return (
+          <PluginHost>
+            <Template name="table">
+              <TemplateConnector>
+                {({ tableColumns }) => (
+                  <div>
+                    {tableColumns.map((tableColumn) => {
+                      const { isRowEdit } = this.state;
+                      return isRowEdit
+                      ? (
+                        <TemplatePlaceholder
+                          key={tableColumn.column.name}
+                          name="editCell"
+                          params={{
+                            tableColumn,
+                            tableRow: { key: 'edit_row' },
+                          }}
+                        />)
+                      : (
+                        <TemplatePlaceholder
+                          key={tableColumn.column.name}
+                          name="tableCell"
+                          params={{
+                            tableColumn,
+                            tableRow: { key: 'row' },
+                          }}
+                        />);
+                    })}
+                  </div>
+                )}
+              </TemplateConnector>
+            </Template>
+            <Template name="tableCell">
+              {props => (
+                <TemplatePlaceholder
+                  name="valueFormatter"
+                  params={{
+                    value: {},
+                    column: props.tableColumn.column,
+                  }}
+                  key={props.tableColumn.column.name}
+                />)
+              }
+            </Template>
+            <Template name="editCell">
+              {props => (
+                <TemplatePlaceholder
+                  name="valueEditor"
+                  params={{
+                    value: {},
+                    column: props.tableColumn.column,
+                  }}
+                  key={props.tableColumn.column.name}
+                />)
+              }
+            </Template>
+            {pluginDepsToComponents(defaultDeps)}
+            <DataTypeProvider
+              for={columnNames}
+              formatterComponent={formatterComponent}
+              editorComponent={editorComponent}
+            />
+          </PluginHost>
+        );
+      }
+    }
+
+    it('should re-register valueFormatter templates', () => {
+      const DataFormatter = () => null;
+      const tree = mount((
+        <Test
+          columnNames={[defaultDeps.getter.tableColumns[0].column.name]}
+          isRowEdit={false}
+          formatterComponent={DataFormatter}
+          editorComponent={null}
+        />
+      ));
+
+      expect(tree
+        .find('DataFormatter')
+        .map(node => node.props()))
+        .toMatchObject([{
+          column: defaultDeps.getter.tableColumns[0].column,
+          value: {},
+        }]);
+
+      tree.setState({
+        columnNames: [defaultDeps.getter.tableColumns[1].column.name],
+      });
+
+      expect(tree
+        .find('DataFormatter')
+        .map(node => node.props()))
+        .toMatchObject([{
+          column: defaultDeps.getter.tableColumns[1].column,
+          value: {},
+        }]);
+    });
+
+    it('should re-register valueEditor templates', () => {
+      const DataEditor = () => null;
+      const tree = mount((
+        <Test
+          columnNames={[defaultDeps.getter.tableColumns[0].column.name]}
+          isRowEdit={true}
+          formatterComponent={null}
+          editorComponent={DataEditor}
+        />
+      ));
+
+      expect(tree
+        .find('DataEditor')
+        .map(node => node.props()))
+        .toMatchObject([{
+          column: defaultDeps.getter.tableColumns[0].column,
+          value: {},
+        }]);
+
+      tree.setState({
+        columnNames: [defaultDeps.getter.tableColumns[1].column.name],
+      });
+
+      expect(tree
+        .find('DataEditor')
+        .map(node => node.props()))
+        .toMatchObject([{
+          column: defaultDeps.getter.tableColumns[1].column,
+          value: {},
+        }]);
+    });
+  });
 });
diff --git a/packages/dx-react-grid/src/plugins/data-type-provider.tsx b/packages/dx-react-grid/src/plugins/data-type-provider.tsx
@@ -23,7 +23,7 @@ class DataTypeProviderBase extends React.PureComponent<DataTypeProviderProps> {
     );
 
     return (
-      <Plugin name="DataTypeProvider">
+      <Plugin name="DataTypeProvider" key={columnNames.join('_')}>
         <Getter
           name="getAvailableFilterOperations"
           computed={getAvailableFilterOperationsComputed}