test: Adds tests to the OptionControls component (#13729)

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

@@ -26,7 +26,7 @@ import AdhocFilter, {
   EXPRESSION_TYPES,
   CLAUSES,
 } from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import { LabelsContainer } from 'src/explore/components/OptionControls';
+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';

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

@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import { AGGREGATES } from 'src/explore/constants';
-import { LabelsContainer } from 'src/explore/components/OptionControls';
+import { LabelsContainer } from 'src/explore/components/controls/OptionControls';
 import { supersetTheme } from '@superset-ui/core';
 import MetricsControl from 'src/explore/components/controls/MetricControl/MetricsControl';
 import AdhocMetric, {

superset-frontend/spec/javascripts/explore/components/OptionControls_spec.tsx

@@ -1,69 +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 { ThemeProvider, supersetTheme } from '@superset-ui/core';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { render, screen } from 'spec/helpers/testing-library';
-import { OptionControlLabel } from 'src/explore/components/OptionControls';
-import { noOp } from 'src/utils/common';
-
-const setup = (overrides?: Record<string, any>) => {
-  const props = {
-    label: <span>Test label</span>,
-    onRemove: noOp,
-    onMoveLabel: noOp,
-    onDropLabel: noOp,
-    type: 'test',
-    index: 0,
-    ...overrides,
-  };
-  return render(
-    <ThemeProvider theme={supersetTheme}>
-      <DndProvider backend={HTML5Backend}>
-        <OptionControlLabel {...props} />
-      </DndProvider>
-    </ThemeProvider>,
-  );
-};
-
-describe('OptionControls', () => {
-  it('should render', () => {
-    const { container } = setup();
-    expect(container).toBeVisible();
-  });
-
-  it('should display a label', () => {
-    setup();
-    expect(screen.getByText('Test label')).toBeTruthy();
-  });
-
-  it('should display a certification icon if saved metric is certified', () => {
-    const { container } = setup({
-      savedMetric: {
-        metric_name: 'test_metric',
-        is_certified: true,
-      },
-    });
-    screen.getByText('test_metric');
-    expect(screen.queryByText('Test label')).toBeFalsy();
-
-    expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
-  });
-});

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx

@@ -24,7 +24,7 @@ import {
   AddControlLabel,
   DndLabelsContainer,
   HeaderContainer,
-} from 'src/explore/components/OptionControls';
+} from 'src/explore/components/controls/OptionControls';
 import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
 import Icon from 'src/components/Icon';
 import { DndColumnSelectProps } from './types';

superset-frontend/src/explore/components/controls/DndColumnSelectControl/components/Option.tsx

@@ -24,7 +24,7 @@ import {
   CloseContainer,
   OptionControlContainer,
   Label,
-} from 'src/explore/components/OptionControls';
+} from 'src/explore/components/controls/OptionControls';
 import { OptionProps } from '../types';
 
 export default function Option(props: OptionProps) {

superset-frontend/src/explore/components/controls/DndColumnSelectControl/components/OptionWrapper.tsx

@@ -23,10 +23,10 @@ import {
   DropTargetMonitor,
   DragSourceMonitor,
 } from 'react-dnd';
-import { DragContainer } from 'src/explore/components/OptionControls';
+import { DragContainer } from 'src/explore/components/controls/OptionControls';
+import { DndItemType } from 'src/explore/components/DndItemType';
 import Option from './Option';
 import { OptionProps, OptionItemInterface } from '../types';
-import { DndItemType } from '../../../DndItemType';
 
 export default function OptionWrapper(
   props: OptionProps & { type: DndItemType },

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

@@ -37,7 +37,7 @@ import {
   AddIconButton,
   HeaderContainer,
   LabelsContainer,
-} from 'src/explore/components/OptionControls';
+} from 'src/explore/components/controls/OptionControls';
 import Icon from 'src/components/Icon';
 import columnType from './columnType';
 import AdhocFilterPopoverTrigger from './AdhocFilterPopoverTrigger';

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

@@ -19,11 +19,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
-import { OptionControlLabel } from 'src/explore/components/OptionControls';
+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 { DndItemType } from '../../DndItemType';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx

@@ -18,12 +18,12 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { OptionControlLabel } from 'src/explore/components/OptionControls';
+import { OptionControlLabel } from 'src/explore/components/controls/OptionControls';
+import { DndItemType } from 'src/explore/components/DndItemType';
 import columnType from './columnType';
 import AdhocMetric from './AdhocMetric';
 import savedMetricType from './savedMetricType';
 import AdhocMetricPopoverTrigger from './AdhocMetricPopoverTrigger';
-import { DndItemType } from '../../DndItemType';
 
 const propTypes = {
   adhocMetric: PropTypes.instanceOf(AdhocMetric),

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx

@@ -32,7 +32,7 @@ import {
   AddControlLabel,
   HeaderContainer,
   LabelsContainer,
-} from 'src/explore/components/OptionControls';
+} from 'src/explore/components/controls/OptionControls';
 import columnType from './columnType';
 import MetricDefinitionOption from './MetricDefinitionOption';
 import MetricDefinitionValue from './MetricDefinitionValue';

superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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, fireEvent } from 'spec/helpers/testing-library';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import {
+  OptionControlLabel,
+  DragContainer,
+  OptionControlContainer,
+  Label,
+  CaretContainer,
+  CloseContainer,
+  HeaderContainer,
+  LabelsContainer,
+  DndLabelsContainer,
+  AddControlLabel,
+  AddIconButton,
+} from 'src/explore/components/controls/OptionControls';
+
+const defaultProps = {
+  label: <span>Test label</span>,
+  onRemove: jest.fn(),
+  onMoveLabel: jest.fn(),
+  onDropLabel: jest.fn(),
+  type: 'test',
+  index: 0,
+};
+
+const setup = (overrides?: Record<string, any>) =>
+  render(
+    <DndProvider backend={HTML5Backend}>
+      <OptionControlLabel {...defaultProps} {...overrides} />
+    </DndProvider>,
+  );
+
+test('should render', () => {
+  const { container } = setup();
+  expect(container).toBeVisible();
+});
+
+test('should display a label', () => {
+  setup();
+  expect(screen.getByText('Test label')).toBeTruthy();
+});
+
+test('should display a certification icon if saved metric is certified', () => {
+  const { container } = setup({
+    savedMetric: {
+      metric_name: 'test_metric',
+      is_certified: true,
+    },
+  });
+  screen.getByText('test_metric');
+  expect(screen.queryByText('Test label')).toBeFalsy();
+  expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
+});
+
+test('triggers onMoveLabel on drop', () => {
+  render(
+    <DndProvider backend={HTML5Backend}>
+      <OptionControlLabel
+        {...defaultProps}
+        index={1}
+        label={<span>Label 1</span>}
+      />
+      <OptionControlLabel
+        {...defaultProps}
+        index={2}
+        label={<span>Label 2</span>}
+      />
+    </DndProvider>,
+  );
+  fireEvent.dragStart(screen.getByText('Label 1'));
+  fireEvent.drop(screen.getByText('Label 2'));
+  expect(defaultProps.onMoveLabel).toHaveBeenCalled();
+});
+
+test('renders DragContainer', () => {
+  const { container } = render(<DragContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders OptionControlContainer', () => {
+  const { container } = render(<OptionControlContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders Label', () => {
+  const { container } = render(<Label />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders CaretContainer', () => {
+  const { container } = render(<CaretContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders CloseContainer', () => {
+  const { container } = render(<CloseContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders HeaderContainer', () => {
+  const { container } = render(<HeaderContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders LabelsContainer', () => {
+  const { container } = render(<LabelsContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders DndLabelsContainer', () => {
+  const { container } = render(<DndLabelsContainer />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders AddControlLabel', () => {
+  const { container } = render(<AddControlLabel />);
+  expect(container).toBeInTheDocument();
+});
+
+test('renders AddIconButton', () => {
+  const { container } = render(<AddIconButton />);
+  expect(container).toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

@@ -26,7 +26,7 @@ import {
 import { Tooltip } from 'src/common/components/Tooltip';
 import Icon from 'src/components/Icon';
 import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
-import AdhocMetric from './controls/MetricControl/AdhocMetric';
+import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
 
 export const DragContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.gridUnit}px;