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/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.tsx → 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;