feat(listviews): SIP-34 filters for charts, dashboards, datasets (#10335)

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { MenuItem } from 'react-bootstrap';
 import { QueryParamProvider } from 'use-query-params';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
@@ -42,6 +41,7 @@ function makeMockLocation(query) {
   };
 }
 
+const fetchSelectsMock = jest.fn(() => []);
 const mockedProps = {
   title: 'Data Table',
   columns: [
@@ -60,10 +60,26 @@ const mockedProps = {
     },
   ],
   filters: [
+    {
+      Header: 'ID',
+      id: 'id',
+      input: 'select',
+      selects: [{ label: 'foo', value: 'bar' }],
+      operator: 'eq',
+    },
     {
       Header: 'Name',
       id: 'name',
-      operators: [{ label: 'Starts With', value: 'sw' }],
+      input: 'search',
+      operator: 'ct',
+    },
+    {
+      Header: 'Age',
+      id: 'age',
+      input: 'select',
+      fetchSelects: fetchSelectsMock,
+      paginate: true,
+      operator: 'eq',
     },
   ],
   data: [
@@ -145,59 +161,6 @@ describe('ListView', () => {
                                     `);
   });
 
-  it('calls fetchData on filter', () => {
-    act(() => {
-      wrapper
-        .find('.dropdown-toggle')
-        .children('button')
-        .at(0)
-        .props()
-        .onClick();
-
-      wrapper
-        .find(MenuItem)
-        .at(0)
-        .props()
-        .onSelect({ id: 'name', Header: 'name' });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper.find('.filter-inputs input[type="text"]').prop('onChange')({
-        persist() {},
-        currentTarget: { value: 'foo' },
-      });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper.find('[data-test="apply-filters"]').last().prop('onClick')();
-    });
-    wrapper.update();
-
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "name",
-        "operator": "sw",
-        "value": "foo",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [
-      Object {
-        "desc": false,
-        "id": "id",
-      },
-    ],
-  },
-]
-`);
-  });
-
   it('renders pagination controls', () => {
     expect(wrapper.find(Pagination).exists()).toBe(true);
     expect(wrapper.find(Pagination.Prev).exists()).toBe(true);
@@ -212,26 +175,20 @@ Array [
     wrapper.update();
 
     expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "name",
-        "operator": "sw",
-        "value": "foo",
-      },
-    ],
-    "pageIndex": 1,
-    "pageSize": 1,
-    "sortBy": Array [
-      Object {
-        "desc": false,
-        "id": "id",
-      },
-    ],
-  },
-]
-`);
+      Array [
+        Object {
+          "filters": Array [],
+          "pageIndex": 1,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
   });
 
   it('handles bulk actions on 1 row', () => {
@@ -339,46 +296,6 @@ Array [
       '"Invalid filter config, some_column is not present in columns"',
     );
   });
-});
-
-describe('ListView with new UI filters', () => {
-  const fetchSelectsMock = jest.fn(() => []);
-  const newFiltersProps = {
-    ...mockedProps,
-    isSIP34FilterUIEnabled: true,
-    filters: [
-      {
-        Header: 'ID',
-        id: 'id',
-        input: 'select',
-        selects: [{ label: 'foo', value: 'bar' }],
-        operator: 'eq',
-      },
-      {
-        Header: 'Name',
-        id: 'name',
-        input: 'search',
-        operator: 'ct',
-      },
-      {
-        Header: 'Age',
-        id: 'age',
-        input: 'select',
-        fetchSelects: fetchSelectsMock,
-        paginate: true,
-        operator: 'eq',
-      },
-    ],
-  };
-
-  const wrapper = factory(newFiltersProps);
-
-  afterEach(() => {
-    mockedProps.fetchData.mockClear();
-    mockedProps.bulkActions.forEach(ba => {
-      ba.onSelect.mockClear();
-    });
-  });
 
   it('renders UI filters', () => {
     expect(wrapper.find(ListViewFilters)).toHaveLength(1);
@@ -407,43 +324,53 @@ describe('ListView with new UI filters', () => {
       wrapper.find('[data-test="search-input"]').last().props().onBlur();
     });
 
-    expect(newFiltersProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "id",
-        "operator": "eq",
-        "value": "bar",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [],
-  },
-]
-`);
+    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "filters": Array [
+            Object {
+              "id": "id",
+              "operator": "eq",
+              "value": "bar",
+            },
+          ],
+          "pageIndex": 0,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
 
-    expect(newFiltersProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "filters": Array [
-      Object {
-        "id": "id",
-        "operator": "eq",
-        "value": "bar",
-      },
-      Object {
-        "id": "name",
-        "operator": "ct",
-        "value": "something",
-      },
-    ],
-    "pageIndex": 0,
-    "pageSize": 1,
-    "sortBy": Array [],
-  },
-]
-`);
+    expect(mockedProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "filters": Array [
+            Object {
+              "id": "id",
+              "operator": "eq",
+              "value": "bar",
+            },
+            Object {
+              "id": "name",
+              "operator": "ct",
+              "value": "something",
+            },
+          ],
+          "pageIndex": 0,
+          "pageSize": 1,
+          "sortBy": Array [
+            Object {
+              "desc": false,
+              "id": "id",
+            },
+          ],
+        },
+      ]
+    `);
   });
 });