Enhancement/add test for custom filter render (#736)

* Fix variable names and test descriptions * Add test for custom filter rendering
gregnb · Jul 2, 2019 · 7bf34ff · 7bf34ff
1 parent 330026f
commit 7bf34ff
Showing 1 changed file with 33 additions and 31 deletions.
diff --git a/test/MUIDataTableFilter.test.js b/test/MUIDataTableFilter.test.js
@@ -18,30 +18,7 @@ describe('<TableFilter />', function() {
     columns = [
       { name: 'firstName', label: 'First Name', display: true, sort: true, filter: true, sortDirection: 'desc' },
       { name: 'company', label: 'Company', display: true, sort: true, filter: true, sortDirection: 'desc' },
-      {
-        name: 'city',
-        label: 'City Label',
-        display: true,
-        sort: true,
-        filter: true,
-        sortDirection: 'desc',
-        options: {
-          filter: true,
-          filterType: 'custom',
-          customFilterListRender: v => `City: ${v}`,
-          filterOptions: {
-            names: [],
-            logic(city, filters) {
-              return false;
-            },
-            display: (filterList, onChange, index, column) => (
-              <div>
-                <TextField id="ForTesting">ForTesting</TextField>
-              </div>
-            ),
-          },
-        },
-      },
+      { name: 'city', label: 'City Label', display: true, sort: true, filter: true, sortDirection: 'desc' },
       { name: 'state', label: 'State', display: true, sort: true, filter: true, sortDirection: 'desc' },
     ];
 
@@ -73,7 +50,7 @@ describe('<TableFilter />', function() {
     assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'State']);
   });
 
-  it("should data table filter view with checkboxes if filterType = 'checkbox'", () => {
+  it("should render data table filter view with checkboxes if filterType = 'checkbox'", () => {
     const options = { filterType: 'checkbox', textLabels };
     const filterList = [[], [], [], []];
     const shallowWrapper = mount(
@@ -84,20 +61,20 @@ describe('<TableFilter />', function() {
     assert.strictEqual(actualResult.length, 13);
   });
 
-  it('should data table filter view with no checkboxes if filter=false for each column', () => {
+  it('should render data table filter view with no checkboxes if filter=false for each column', () => {
     const options = { filterType: 'checkbox', textLabels };
     const filterList = [[], [], [], []];
     columns = columns.map(item => (item.filter = false));
 
-    const shallowWrapper = mount(
+    const mountWrapper = mount(
       <TableFilter columns={columns} filterData={filterData} filterList={filterList} options={options} />,
     );
 
-    const actualResult = shallowWrapper.find(Checkbox);
+    const actualResult = mountWrapper.find(Checkbox);
     assert.strictEqual(actualResult.length, 0);
   });
 
-  it("should data table filter view with selects if filterType = 'select'", () => {
+  it("should render data table filter view with selects if filterType = 'select'", () => {
     const options = { filterType: 'select', textLabels };
     const filterList = [['Joe James'], [], [], []];
 
@@ -109,7 +86,7 @@ describe('<TableFilter />', function() {
     assert.strictEqual(actualResult.length, 4);
   });
 
-  it('should data table filter view no selects if filter=false for each column', () => {
+  it('should render data table filter view no selects if filter=false for each column', () => {
     const options = { filterType: 'select', textLabels };
     const filterList = [['Joe James'], [], [], []];
     columns = columns.map(item => (item.filter = false));
@@ -122,7 +99,7 @@ describe('<TableFilter />', function() {
     assert.strictEqual(actualResult.length, 0);
   });
 
-  it("should data table filter view with checkbox selects if filterType = 'multiselect'", () => {
+  it("should render data table filter view with checkbox selects if filterType = 'multiselect'", () => {
     const options = { filterType: 'multiselect', textLabels };
     const filterList = [['Joe James', 'John Walsh'], [], [], []];
 
@@ -134,6 +111,31 @@ describe('<TableFilter />', function() {
     assert.strictEqual(actualResult.length, 4);
   });
 
+  it("should data table custom filter view with if filterType = 'custom' and a valid display filterOption is provided", () => {
+    const options = {
+      filterType: 'custom',
+      textLabels,
+      filterOptions: {
+        names: [],
+        logic(city, filters) {
+          return false;
+        },
+        display: (filterList, onChange, index, column) => (
+          <div>
+            <TextField id="custom-filter-render">Custom Filter Render</TextField>
+          </div>
+        ),
+      }
+    };
+    const filterList = [[], [], [], []];
+    const mountWrapper = mount(
+      <TableFilter columns={columns} filterData={filterData} filterList={filterList} options={options} />,
+    );
+
+    const actualResult = mountWrapper.find('#custom-filter-render');
+    assert.isAtLeast(actualResult.length, 1);
+  });
+
   it("should render column.label as filter label if filterType = 'textField'", () => {
     const options = { filterType: 'textField', textLabels };
     const filterList = [[], [], [], []];