test: Enhance tests and directory structure for FilterControl components (#13745)

* Enhance directory structure

* Enhance paths

* Move AdhocFilter

* Add AdhocFilterPopoverTrigger tests

* Move import

* Enhance AdhocFilterOption tests

* Linting

* Fix linting

* Update superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Enhance

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx

@@ -1,61 +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.
- */
-/* eslint-disable no-unused-expressions */
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-import Popover from 'src/components/Popover';
-
-import AdhocFilter, {
-  EXPRESSION_TYPES,
-  CLAUSES,
-} from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import AdhocFilterOption from 'src/explore/components/controls/FilterControl/AdhocFilterOption';
-
-const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
-  subject: 'value',
-  operator: '>',
-  comparator: '10',
-  clause: CLAUSES.WHERE,
-});
-
-function setup(overrides) {
-  const onFilterEdit = sinon.spy();
-  const props = {
-    adhocFilter: simpleAdhocFilter,
-    onFilterEdit,
-    options: [],
-    datasource: {},
-    ...overrides,
-  };
-  const wrapper = shallow(<AdhocFilterOption {...props} />);
-  return { wrapper };
-}
-
-describe('AdhocFilterOption', () => {
-  it('renders an overlay trigger wrapper for the label', () => {
-    const { wrapper } = setup();
-    const overlay = wrapper.find('AdhocFilterPopoverTrigger').shallow();
-    const popover = overlay.find(Popover);
-    expect(popover).toHaveLength(1);
-    expect(popover.props().defaultVisible).toBe(false);
-    expect(overlay.find('OptionControlLabel')).toExist();
-  });
-});

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx

@@ -28,8 +28,8 @@ import AdhocFilter, {
 } from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { LabelsContainer } from 'src/explore/components/controls/OptionControls';
 import { AGGREGATES, OPERATORS } from 'src/explore/constants';
-import AdhocFilterControl from 'src/explore/components/controls/FilterControl/AdhocFilterControl';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import AdhocFilterControl from '.';
 
 const simpleAdhocFilter = new AdhocFilter({
   expressionType: EXPRESSION_TYPES.SIMPLE,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx

@@ -39,11 +39,14 @@ import {
   LabelsContainer,
 } from 'src/explore/components/controls/OptionControls';
 import Icon from 'src/components/Icon';
-import columnType from './columnType';
-import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';
-import AdhocFilterOption from './AdhocFilterOption';
-import AdhocFilter, { CLAUSES, EXPRESSION_TYPES } from './AdhocFilter';
-import adhocFilterType from './adhocFilterType';
+import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
+import AdhocFilterOption from 'src/explore/components/controls/FilterControl/AdhocFilterOption';
+import AdhocFilter, {
+  CLAUSES,
+  EXPRESSION_TYPES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import adhocFilterType from 'src/explore/components/controls/FilterControl/adhocFilterType';
+import columnType from 'src/explore/components/controls/FilterControl/columnType';
 
 const selectedMetricType = PropTypes.oneOfType([
   PropTypes.string,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx

@@ -29,10 +29,10 @@ import AdhocFilter, {
   CLAUSES,
 } from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { AGGREGATES } from 'src/explore/constants';
-import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
 import AdhocFilterEditPopoverSimpleTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent';
 import AdhocFilterEditPopoverSqlTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import AdhocFilterEditPopover from '.';
 
 const simpleAdhocFilter = new AdhocFilter({
   expressionType: EXPRESSION_TYPES.SIMPLE,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx

@@ -24,10 +24,12 @@ import { styled, t } from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import Tabs from 'src/common/components/Tabs';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
-import columnType from './columnType';
-import AdhocFilter, { EXPRESSION_TYPES } from './AdhocFilter';
-import AdhocFilterEditPopoverSimpleTabContent from './AdhocFilterEditPopoverSimpleTabContent';
-import AdhocFilterEditPopoverSqlTabContent from './AdhocFilterEditPopoverSqlTabContent';
+import AdhocFilter, {
+  EXPRESSION_TYPES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import AdhocFilterEditPopoverSimpleTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent';
+import AdhocFilterEditPopoverSqlTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent';
+import columnType from 'src/explore/components/controls/FilterControl/columnType';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/AdhocFilterEditPopoverSimpleTabContent.test.jsx

@@ -27,8 +27,8 @@ import AdhocFilter, {
   CLAUSES,
 } from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { AGGREGATES } from 'src/explore/constants';
-import AdhocFilterEditPopoverSimpleTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import AdhocFilterEditPopoverSimpleTabContent from '.';
 
 const simpleAdhocFilter = new AdhocFilter({
   expressionType: EXPRESSION_TYPES.SIMPLE,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx

@@ -35,8 +35,11 @@ import {
   DISABLE_INPUT_OPERATORS,
 } from 'src/explore/constants';
 import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption';
-import columnType from './columnType';
-import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from './AdhocFilter';
+import AdhocFilter, {
+  EXPRESSION_TYPES,
+  CLAUSES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import columnType from 'src/explore/components/controls/FilterControl/columnType';
 
 const SelectWithLabel = styled(Select)`
   .ant-select-selector::after {

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx

@@ -26,7 +26,7 @@ import AdhocFilter, {
   EXPRESSION_TYPES,
   CLAUSES,
 } from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import AdhocFilterEditPopoverSqlTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent';
+import AdhocFilterEditPopoverSqlTabContent from '.';
 
 const sqlAdhocFilter = new AdhocFilter({
   expressionType: EXPRESSION_TYPES.SQL,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx

@@ -25,8 +25,11 @@ import { SQLEditor } from 'src/components/AsyncAceEditor';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
-import columnType from './columnType';
-import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from './AdhocFilter';
+import columnType from 'src/explore/components/controls/FilterControl/columnType';
+import AdhocFilter, {
+  EXPRESSION_TYPES,
+  CLAUSES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import AdhocFilter, {
+  EXPRESSION_TYPES,
+  CLAUSES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import AdhocFilterOption from '.';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+const options = [
+  { type: 'VARCHAR(255)', column_name: 'source', id: 1 },
+  { type: 'VARCHAR(255)', column_name: 'target', id: 2 },
+  { type: 'DOUBLE', column_name: 'value', id: 3 },
+];
+
+const mockedProps = {
+  adhocFilter: simpleAdhocFilter,
+  onFilterEdit: jest.fn(),
+  options,
+};
+
+const setup = (props: {
+  adhocFilter: typeof simpleAdhocFilter;
+  onFilterEdit: () => void;
+  options: {
+    type: string;
+    column_name: string;
+    id: number;
+  }[];
+}) => (
+  <DndProvider backend={HTML5Backend}>
+    <AdhocFilterOption {...props} />
+  </DndProvider>
+);
+
+test('should render', () => {
+  const { container } = render(setup(mockedProps));
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the control label', () => {
+  render(setup(mockedProps));
+  expect(screen.getByText('value > 10')).toBeInTheDocument();
+});
+
+test('should render the remove button', () => {
+  render(setup(mockedProps));
+  const removeBtn = screen.getByRole('button');
+  expect(removeBtn).toBeInTheDocument();
+});
+
+test('should render the right caret', () => {
+  render(setup(mockedProps));
+  expect(screen.getByTestId('caret-right')).toBeInTheDocument();
+});
+
+test('should render the Popover on clicking the right caret', () => {
+  render(setup(mockedProps));
+  const rightCaret = screen.getByRole('img', { name: 'caret-right' });
+  userEvent.click(rightCaret);
+  expect(screen.getByRole('tooltip')).toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx

@@ -21,9 +21,9 @@ import PropTypes from 'prop-types';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
 import { OptionControlLabel } from 'src/explore/components/controls/OptionControls';
 import { DndItemType } from 'src/explore/components/DndItemType';
-import columnType from './columnType';
-import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';
-import AdhocFilter from './AdhocFilter';
+import columnType from 'src/explore/components/controls/FilterControl/columnType';
+import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
+import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 AdhocFilter, {
+  EXPRESSION_TYPES,
+  CLAUSES,
+} from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import AdhocFilterPopoverTrigger from '.';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+const mockedProps = {
+  adhocFilter: simpleAdhocFilter,
+  options: [],
+  datasource: {},
+  onFilterEdit: jest.fn(),
+};
+
+test('should render', () => {
+  const { container } = render(
+    <AdhocFilterPopoverTrigger {...mockedProps}>
+      Click
+    </AdhocFilterPopoverTrigger>,
+  );
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the Popover on click when uncontrolled', () => {
+  render(
+    <AdhocFilterPopoverTrigger {...mockedProps}>
+      Click
+    </AdhocFilterPopoverTrigger>,
+  );
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  userEvent.click(screen.getByText('Click'));
+  expect(screen.getByRole('tooltip')).toBeInTheDocument();
+});
+
+test('should be visible when controlled', async () => {
+  const controlledProps = {
+    ...mockedProps,
+    isControlledComponent: true,
+    visible: true,
+    togglePopover: jest.fn(),
+    closePopover: jest.fn(),
+  };
+  render(
+    <AdhocFilterPopoverTrigger {...controlledProps}>
+      Click
+    </AdhocFilterPopoverTrigger>,
+  );
+  expect(screen.getByRole('tooltip')).toBeInTheDocument();
+});
+
+test('should NOT be visible when controlled', () => {
+  const controlledProps = {
+    ...mockedProps,
+    isControlledComponent: true,
+    visible: false,
+    togglePopover: jest.fn(),
+    closePopover: jest.fn(),
+  };
+  render(
+    <AdhocFilterPopoverTrigger {...controlledProps}>
+      Click
+    </AdhocFilterPopoverTrigger>,
+  );
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx

@@ -19,8 +19,8 @@
 import React from 'react';
 import Popover from 'src/components/Popover';
 import { OptionSortType } from 'src/explore/types';
-import AdhocFilterEditPopover from './AdhocFilterEditPopover';
-import AdhocFilter from './AdhocFilter';
+import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
+import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 
 interface AdhocFilterPopoverTriggerProps {
   adhocFilter: AdhocFilter;