test: Tests audit for the Dashboard FilterBar (#13916)

* Add FilterBar tests

* Finalize FilterBar tests

* Add tests for FilterBar Header

* Add tests for FilterBar FilterConfigurationLink

* Add tests for FilterBar FilterSets EditSection

* Add tests for FilterBar FilterSets

* Clean up

* Add tests for FilterBar FilterSetUnit

* Add tests for FilterBar FilterSets FiltersHeader

* Add tests for FilterBar FilterSets Footer

* Fix linting

* Fix import

* Fix minor changes

* Fix import

* Add factory and clean up

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/FilterBar_spec.tsx

@@ -1,50 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import { styledMount as mount } from 'spec/helpers/theming';
-import { Provider } from 'react-redux';
-import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar/FilterBar';
-import Button from 'src/components/Button';
-import { mockStore } from 'spec/fixtures/mockStore';
-
-describe('FilterBar', () => {
-  const props = {
-    filtersOpen: false,
-    toggleFiltersBar: jest.fn(),
-  };
-
-  const wrapper = mount(
-    <Provider store={mockStore}>
-      <FilterBar {...props} />
-    </Provider>,
-  );
-
-  it('is a valid', () => {
-    expect(React.isValidElement(<FilterBar {...props} />)).toBe(true);
-  });
-  it('has filter and collapse icons', () => {
-    expect(wrapper.find({ name: 'filter' })).toExist();
-    expect(wrapper.find({ name: 'collapse' })).toExist();
-  });
-  it('has apply and clear all buttons', () => {
-    expect(wrapper.find(Button).length).toBe(2);
-    expect(wrapper.find(Button).at(0)).toHaveProp('buttonStyle', 'tertiary');
-    expect(wrapper.find(Button).at(1)).toHaveProp('buttonStyle', 'primary');
-  });
-});

superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts

@@ -19,8 +19,28 @@
 import { DataMaskStateWithId, DataMaskType } from 'src/dataMask/types';
 import { NativeFiltersState } from 'src/dashboard/reducers/types';
 
+export const mockDataMaskInfo: DataMaskStateWithId = {
+  [DataMaskType.CrossFilters]: {},
+  [DataMaskType.OwnFilters]: {},
+  [DataMaskType.NativeFilters]: {
+    DefaultsID: {
+      id: 'DefaultId',
+      currentState: {
+        value: [],
+      },
+    },
+  },
+};
+
 export const nativeFiltersInfo: NativeFiltersState = {
-  filterSets: {},
+  filterSets: {
+    'set-id': {
+      id: 'DefaultsID',
+      name: 'Set name',
+      nativeFilters: {},
+      dataMask: mockDataMaskInfo,
+    },
+  },
   filters: {
     DefaultsID: {
       cascadeParentIds: [],
@@ -49,16 +69,3 @@ export const nativeFiltersInfo: NativeFiltersState = {
     },
   },
 };
-
-export const mockDataMaskInfo: DataMaskStateWithId = {
-  [DataMaskType.CrossFilters]: {},
-  [DataMaskType.OwnFilters]: {},
-  [DataMaskType.NativeFilters]: {
-    DefaultsID: {
-      id: 'DefaultId',
-      currentState: {
-        value: [],
-      },
-    },
-  },
-};

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -49,7 +49,7 @@ import {
   DASHBOARD_ROOT_DEPTH,
   DashboardStandaloneMode,
 } from 'src/dashboard/util/constants';
-import FilterBar from '../nativeFilters/FilterBar/FilterBar';
+import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
 import { StickyVerticalBar } from '../StickyVerticalBar';
 import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
 import { useFilters } from '../nativeFilters/FilterBar/state';

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { mockStore } from 'spec/fixtures/mockStore';
+import { Provider } from 'react-redux';
+import FilterBar, { FiltersBarProps } from '.';
+
+const createProps = () => ({
+  filtersOpen: false,
+  toggleFiltersBar: jest.fn(),
+});
+
+const setup = (props: FiltersBarProps) => (
+  <Provider store={mockStore}>
+    <FilterBar {...props} />
+  </Provider>
+);
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the "Filters" heading', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Filters')).toBeInTheDocument();
+});
+
+test('should render the "Clear all" option', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Clear all')).toBeInTheDocument();
+});
+
+test('should render the "Apply" option', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Apply')).toBeInTheDocument();
+});
+
+test('should render the collapse icon', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByRole('img', { name: 'collapse' })).toBeInTheDocument();
+});
+
+test('should render the filter icon', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByRole('img', { name: 'filter' })).toBeInTheDocument();
+});
+
+test('should render the filter control name', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('test')).toBeInTheDocument();
+});
+
+test('should toggle', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  const collapse = screen.getByRole('img', { name: 'collapse' });
+  expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
+  userEvent.click(collapse);
+  expect(mockedProps.toggleFiltersBar).toHaveBeenCalled();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink/FilterConfigurationLink.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import FilterConfigurationLink from '.';
+
+test('should render', () => {
+  const { container } = render(
+    <FilterConfigurationLink>Config link</FilterConfigurationLink>,
+    {
+      useRedux: true,
+    },
+  );
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the config link text', () => {
+  render(<FilterConfigurationLink>Config link</FilterConfigurationLink>, {
+    useRedux: true,
+  });
+  expect(screen.getByText('Config link')).toBeInTheDocument();
+});
+
+test('should render the modal on click', () => {
+  render(<FilterConfigurationLink>Config link</FilterConfigurationLink>, {
+    useRedux: true,
+  });
+  const configLink = screen.getByText('Config link');
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  userEvent.click(configLink);
+  expect(screen.getByRole('dialog')).toBeInTheDocument();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink/index.tsx

@@ -19,8 +19,8 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { setFilterConfiguration } from 'src/dashboard/actions/nativeFilters';
-import { FilterConfiguration } from '../types';
-import { FiltersConfigModal } from '../FiltersConfigModal/FiltersConfigModal';
+import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
+import { FiltersConfigModal } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal';
 
 export interface FCBProps {
   createNewOnOpen?: boolean;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { mockStore } from 'spec/fixtures/mockStore';
+import { Provider } from 'react-redux';
+import EditSection, { EditSectionProps } from './EditSection';
+
+const createProps = () => ({
+  filterSetId: 'set-id',
+  dataMaskSelected: {
+    DefaultsID: {
+      currentState: {
+        value: 'value',
+      },
+    },
+  },
+  onCancel: jest.fn(),
+  disabled: false,
+});
+
+const setup = (props: EditSectionProps) => (
+  <Provider store={mockStore}>
+    <EditSection {...props} />
+  </Provider>
+);
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the title', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Editing filter set:')).toBeInTheDocument();
+});
+
+test('should render the set name', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Set name')).toBeInTheDocument();
+});
+
+test('should render a textbox', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+});
+
+test('should change the set name', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  const textbox = screen.getByRole('textbox');
+  userEvent.clear(textbox);
+  userEvent.type(textbox, 'New name');
+  expect(textbox).toHaveValue('New name');
+});
+
+test('should render the enter icon', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByRole('img', { name: 'enter' })).toBeInTheDocument();
+});
+
+test('should render the Cancel button', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Cancel')).toBeInTheDocument();
+});
+
+test('should cancel', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  const cancelBtn = screen.getByText('Cancel');
+  expect(mockedProps.onCancel).not.toHaveBeenCalled();
+  userEvent.click(cancelBtn);
+  expect(mockedProps.onCancel).toHaveBeenCalled();
+});
+
+test('should render the Save button', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Save')).toBeInTheDocument();
+});
+
+test('should render the Save button as disabled', () => {
+  const mockedProps = createProps();
+  const saveDisabledProps = {
+    ...mockedProps,
+    disabled: true,
+  };
+  render(setup(saveDisabledProps));
+  expect(screen.getByText('Save').parentElement).toBeDisabled();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx

@@ -58,7 +58,7 @@ const ActionButton = styled.div<{ disabled?: boolean }>`
   }
 `;
 
-type EditSectionProps = {
+export type EditSectionProps = {
   filterSetId: string;
   dataMaskSelected: DataMaskUnit;
   onCancel: HandlerFunction;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { mockStore } from 'spec/fixtures/mockStore';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+import FilterSetUnit, { FilterSetUnitProps } from './FilterSetUnit';
+
+const createProps = () => ({
+  editMode: true,
+  setFilterSetName: jest.fn(),
+  onDelete: jest.fn(),
+  onEdit: jest.fn(),
+  onRebuild: jest.fn(),
+});
+
+function openDropdown() {
+  const dropdownIcon = screen.getByRole('img', { name: 'ellipsis' });
+  userEvent.click(dropdownIcon);
+}
+
+const setup = (props: FilterSetUnitProps) => (
+  <Provider store={mockStore}>
+    <FilterSetUnit {...props} />
+  </Provider>
+);
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the edit button', () => {
+  const mockedProps = createProps();
+  const editModeOffProps = {
+    ...mockedProps,
+    editMode: false,
+  };
+  render(setup(editModeOffProps));
+  expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+});
+
+test('should render the menu', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  openDropdown();
+  expect(screen.getByRole('menu')).toBeInTheDocument();
+  expect(screen.getAllByRole('menuitem')).toHaveLength(3);
+  expect(screen.getByText('Edit')).toBeInTheDocument();
+  expect(screen.getByText('Rebuild')).toBeInTheDocument();
+  expect(screen.getByText('Delete')).toBeInTheDocument();
+});
+
+test('should edit', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  openDropdown();
+  const editBtn = screen.getByText('Edit');
+  expect(mockedProps.onEdit).not.toHaveBeenCalled();
+  userEvent.click(editBtn);
+  expect(mockedProps.onEdit).toHaveBeenCalled();
+});
+
+test('should delete', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  openDropdown();
+  const deleteBtn = screen.getByText('Delete');
+  expect(mockedProps.onDelete).not.toHaveBeenCalled();
+  userEvent.click(deleteBtn);
+  expect(mockedProps.onDelete).toHaveBeenCalled();
+});
+
+test('should rebuild', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  openDropdown();
+  const rebuildBtn = screen.getByText('Rebuild');
+  expect(mockedProps.onRebuild).not.toHaveBeenCalled();
+  userEvent.click(rebuildBtn);
+  expect(mockedProps.onRebuild).toHaveBeenCalled();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx

@@ -40,7 +40,7 @@ const IconsBlock = styled.div`
   }
 `;
 
-type FilterSetUnitProps = {
+export type FilterSetUnitProps = {
   editMode?: boolean;
   isApplied?: boolean;
   filterSet?: FilterSet;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSets.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { mockStore } from 'spec/fixtures/mockStore';
+import { Provider } from 'react-redux';
+import FilterSets, { FilterSetsProps } from '.';
+
+const createProps = () => ({
+  disabled: false,
+  isFilterSetChanged: false,
+  dataMaskSelected: {
+    DefaultsID: {
+      currentState: {
+        value: 'value',
+      },
+    },
+  },
+  onEditFilterSet: jest.fn(),
+  onFilterSelectionChange: jest.fn(),
+});
+
+const setup = (props: FilterSetsProps) => (
+  <Provider store={mockStore}>
+    <FilterSets {...props} />
+  </Provider>
+);
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the default title', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('New filter set')).toBeInTheDocument();
+});
+
+test('should render the right number of filters', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Filters (1)')).toBeInTheDocument();
+});
+
+test('should render the filters', () => {
+  const mockedProps = createProps();
+  render(setup(mockedProps));
+  expect(screen.getByText('Set name')).toBeInTheDocument();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.test.tsx

@@ -17,29 +17,38 @@
  * under the License.
  */
 import React from 'react';
-import { styledMount as mount } from 'spec/helpers/theming';
-import { Provider } from 'react-redux';
-import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
+import { render, screen } from 'spec/helpers/testing-library';
 import { mockStore } from 'spec/fixtures/mockStore';
+import { Provider } from 'react-redux';
+import FiltersHeader, { FiltersHeaderProps } from './FiltersHeader';
 
-describe('FilterConfigurationButton', () => {
-  const mockedProps = {
-    createNewOnOpen: false,
-  };
-  it('is valid', () => {
-    expect(
-      React.isValidElement(<FilterConfigurationLink {...mockedProps} />),
-    ).toBe(true);
-  });
-  it('takes in children', () => {
-    const wrapper = mount(
-      <Provider store={mockStore}>
-        <FilterConfigurationLink {...mockedProps}>
-          {' '}
-          <span>Test</span>
-        </FilterConfigurationLink>
-      </Provider>,
-    );
-    expect(wrapper.find('span')).toHaveLength(1);
-  });
+const mockedProps = {
+  dataMask: {
+    DefaultsID: {
+      currentState: {
+        value: 'value',
+      },
+    },
+  },
+};
+const setup = (props: FiltersHeaderProps) => (
+  <Provider store={mockStore}>
+    <FiltersHeader {...props} />
+  </Provider>
+);
+
+test('should render', () => {
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the right number of filters', () => {
+  render(setup(mockedProps));
+  expect(screen.getByText('Filters (1)')).toBeInTheDocument();
+});
+
+test('should render the name and value', () => {
+  render(setup(mockedProps));
+  expect(screen.getByText('test:')).toBeInTheDocument();
+  expect(screen.getByText('value')).toBeInTheDocument();
 });

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FiltersHeader.tsx

@@ -54,7 +54,7 @@ const StyledCollapse = styled(Collapse)`
   }
 `;
 
-type FiltersHeaderProps = {
+export type FiltersHeaderProps = {
   dataMask?: DataMaskUnit;
   filterSet?: FilterSet;
 };
@@ -93,8 +93,9 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
             t('Filter metadata changed in dashboard. It will not be applied.'))
         }
         placement="bottomLeft"
+        key={id}
       >
-        <div>
+        <div data-test="filter-info">
           <Typography.Text strong delete={removedFilter} mark={changedFilter}>
             {name}:&nbsp;
           </Typography.Text>

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/Footer.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'spec/helpers/testing-library';
+import Footer from './Footer';
+
+const createProps = () => ({
+  filterSetName: 'Set name',
+  disabled: false,
+  editMode: false,
+  onCancel: jest.fn(),
+  onEdit: jest.fn(),
+  onCreate: jest.fn(),
+});
+
+const editModeProps = {
+  ...createProps(),
+  editMode: true,
+};
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(<Footer {...mockedProps} />, { useRedux: true });
+  expect(container).toBeInTheDocument();
+});
+
+test('should render a button', () => {
+  const mockedProps = createProps();
+  render(<Footer {...mockedProps} />, { useRedux: true });
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText('Create new filter set')).toBeInTheDocument();
+});
+
+test('should render a disabled button', () => {
+  const mockedProps = createProps();
+  const disabledProps = {
+    ...mockedProps,
+    disabled: true,
+  };
+  render(<Footer {...disabledProps} />, { useRedux: true });
+  expect(screen.getByRole('button')).toBeDisabled();
+});
+
+test('should edit', () => {
+  const mockedProps = createProps();
+  render(<Footer {...mockedProps} />, { useRedux: true });
+  const btn = screen.getByRole('button');
+  expect(mockedProps.onEdit).not.toHaveBeenCalled();
+  userEvent.click(btn);
+  expect(mockedProps.onEdit).toHaveBeenCalled();
+});
+
+test('should render the Create button', () => {
+  render(<Footer {...editModeProps} />, { useRedux: true });
+  expect(screen.getByText('Create')).toBeInTheDocument();
+});
+
+test('should create', () => {
+  render(<Footer {...editModeProps} />, { useRedux: true });
+  const createBtn = screen.getByText('Create');
+  expect(editModeProps.onCreate).not.toHaveBeenCalled();
+  userEvent.click(createBtn);
+  expect(editModeProps.onCreate).toHaveBeenCalled();
+});
+
+test('should render the Cancel button', () => {
+  render(<Footer {...editModeProps} />, { useRedux: true });
+  expect(screen.getByText('Cancel')).toBeInTheDocument();
+});
+
+test('should cancel', () => {
+  render(<Footer {...editModeProps} />, { useRedux: true });
+  const cancelBtn = screen.getByText('Cancel');
+  expect(editModeProps.onCancel).not.toHaveBeenCalled();
+  userEvent.click(cancelBtn);
+  expect(editModeProps.onCancel).toHaveBeenCalled();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/Footer.tsx

@@ -23,7 +23,7 @@ import { Tooltip } from 'src/common/components/Tooltip';
 import { APPLY_FILTERS_HINT } from './utils';
 import { useFilterSetNameDuplicated } from './state';
 
-type FooterProps = {
+export type FooterProps = {
   filterSetName: string;
   disabled: boolean;
   editMode: boolean;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/index.tsx

@@ -61,7 +61,7 @@ const FilterSetUnitWrapper = styled.div<{
     `background: ${selected ? theme.colors.primary.light5 : 'transparent'}`};
 `;
 
-type FilterSetsProps = {
+export type FilterSetsProps = {
   disabled: boolean;
   isFilterSetChanged: boolean;
   dataMaskSelected: DataMaskUnit;
@@ -253,6 +253,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
           onClick={(e: MouseEvent<HTMLElement>) =>
             takeFilterSet(filterSet.id, e.target as HTMLElement)
           }
+          key={filterSet.id}
         >
           <FilterSetUnit
             isApplied={filterSet.id === selectedFiltersSetId && !disabled}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import Header from './index';
+
+const createProps = () => ({
+  toggleFiltersBar: jest.fn(),
+  onApply: jest.fn(),
+  setDataMaskSelected: jest.fn(),
+  dataMaskSelected: {
+    DefaultsID: {
+      currentState: {
+        value: null,
+      },
+    },
+  },
+  dataMaskApplied: {
+    DefaultsID: {
+      id: 'DefaultsID',
+      currentState: {
+        value: null,
+      },
+    },
+  },
+  isApplyDisabled: false,
+});
+
+test('should render', () => {
+  const mockedProps = createProps();
+  const { container } = render(<Header {...mockedProps} />, { useRedux: true });
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the "Filters" heading', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText('Filters')).toBeInTheDocument();
+});
+
+test('should render the "Clear all" option', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText('Clear all')).toBeInTheDocument();
+});
+
+test('should render the "Apply" button', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText('Apply')).toBeInTheDocument();
+  expect(screen.getByText('Apply').parentElement).toBeEnabled();
+});
+
+test('should render the "Clear all" button as disabled', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  const clearBtn = screen.getByText('Clear all');
+  expect(clearBtn.parentElement).toBeDisabled();
+});
+
+test('should render the "Apply" button as disabled', () => {
+  const mockedProps = createProps();
+  const applyDisabledProps = {
+    ...mockedProps,
+    isApplyDisabled: true,
+  };
+  render(<Header {...applyDisabledProps} />, { useRedux: true });
+  const applyBtn = screen.getByText('Apply');
+  expect(applyBtn.parentElement).toBeDisabled();
+  userEvent.click(applyBtn);
+  expect(mockedProps.onApply).not.toHaveBeenCalled();
+});
+
+test('should apply', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  const applyBtn = screen.getByText('Apply');
+  expect(mockedProps.onApply).not.toHaveBeenCalled();
+  userEvent.click(applyBtn);
+  expect(mockedProps.onApply).toHaveBeenCalled();
+});
+
+test('should render the expand button', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  expect(screen.getByRole('button', { name: 'expand' })).toBeInTheDocument();
+});
+
+test('should toggle', () => {
+  const mockedProps = createProps();
+  render(<Header {...mockedProps} />, { useRedux: true });
+  const expandBtn = screen.getByRole('button', { name: 'expand' });
+  expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
+  userEvent.click(expandBtn);
+  expect(mockedProps.toggleFiltersBar).toHaveBeenCalled();
+});

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx

@@ -24,9 +24,9 @@ import Button from 'src/components/Button';
 import { useSelector } from 'react-redux';
 import { getInitialMask } from 'src/dataMask/reducer';
 import { DataMaskUnit, DataMaskUnitWithId } from 'src/dataMask/types';
-import FilterConfigurationLink from './FilterConfigurationLink';
-import { useFilters } from './state';
-import { Filter } from '../types';
+import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
+import { useFilters } from 'src/dashboard/components/nativeFilters/FilterBar/state';
+import { Filter } from 'src/dashboard/components/nativeFilters/types';
 
 const TitleArea = styled.h4`
   display: flex;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -29,9 +29,9 @@ import { updateDataMask } from 'src/dataMask/actions';
 import { DataMaskState, DataMaskUnit } from 'src/dataMask/types';
 import { useImmer } from 'use-immer';
 import { areObjectsEqual } from 'src/reduxUtils';
-import { Filter } from '../types';
+import { Filter } from 'src/dashboard/components/nativeFilters/types';
 import { mapParentFiltersToChildren, TabIds } from './utils';
-import FilterSets from './FilterSets/FilterSets';
+import FilterSets from './FilterSets';
 import {
   useDataMask,
   useFilters,
@@ -138,7 +138,7 @@ const StyledTabs = styled(Tabs)`
   }
 `;
 
-interface FiltersBarProps {
+export interface FiltersBarProps {
   filtersOpen: boolean;
   toggleFiltersBar: any;
   directPathToChild?: string[];