test: Adds tests for the FixedOrMetricControl component (#13705)

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

@@ -1,43 +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 { shallow } from 'enzyme';
-
-import TextControl from 'src/explore/components/controls/TextControl';
-import FixedOrMetricControl from 'src/explore/components/controls/FixedOrMetricControl';
-import MetricsControl from 'src/explore/components/controls/MetricControl/MetricsControl';
-
-const defaultProps = {
-  value: {},
-  datasource: {},
-};
-
-describe('FixedOrMetricControl', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<FixedOrMetricControl {...defaultProps} />);
-  });
-
-  it('renders a TextControl and a SelectControl', () => {
-    expect(wrapper.find(TextControl)).toExist();
-    expect(wrapper.find(MetricsControl)).toExist();
-  });
-});

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

@@ -0,0 +1,105 @@
+/**
+ * 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 FixedOrMetricControl from '.';
+
+const createProps = () => ({
+  datasource: {
+    columns: [{ column_name: 'Column A' }],
+    metrics: [{ metric_name: 'Metric A', expression: 'COUNT(*)' }],
+  },
+});
+
+test('renders with minimal props', () => {
+  render(<FixedOrMetricControl {...createProps()} />);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText('5')).toBeInTheDocument();
+});
+
+test('renders with default value', () => {
+  render(
+    <FixedOrMetricControl
+      {...createProps()}
+      default={{ type: 'fix', value: 10 }}
+    />,
+  );
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText('10')).toBeInTheDocument();
+});
+
+test('renders with value', () => {
+  render(
+    <FixedOrMetricControl
+      {...createProps()}
+      default={{ type: 'fix', value: 10 }}
+      value={{ type: 'fix', value: 20 }}
+    />,
+  );
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText('20')).toBeInTheDocument();
+});
+
+test('renders with metric type', () => {
+  render(
+    <FixedOrMetricControl
+      {...createProps()}
+      value={{
+        type: 'metric',
+        value: {
+          label: 'Metric A',
+          expressionType: 'SQL',
+          sqlExpression: 'COUNT(*)',
+        },
+      }}
+    />,
+  );
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText('Metric A')).toBeInTheDocument();
+});
+
+test('triggers onChange', () => {
+  const onChange = jest.fn();
+  render(
+    <FixedOrMetricControl
+      {...createProps()}
+      value={{ type: 'fix', value: 10 }}
+      onChange={onChange}
+    />,
+  );
+  userEvent.click(screen.getByText('10'));
+  expect(onChange).not.toHaveBeenCalled();
+  userEvent.type(screen.getByRole('textbox'), '20');
+  expect(onChange).toHaveBeenCalled();
+});
+
+test('switches control type', () => {
+  render(
+    <FixedOrMetricControl
+      {...createProps()}
+      value={{ type: 'fix', value: 10 }}
+    />,
+  );
+  userEvent.click(screen.getByText('10'));
+  userEvent.click(screen.getByText('Based on a metric'));
+  expect(screen.getByText('metric:')).toBeInTheDocument();
+  userEvent.click(screen.getByText('Fixed'));
+  expect(screen.getByText('10')).toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx

@@ -22,10 +22,10 @@ import { css } from '@emotion/core';
 import { t } from '@superset-ui/core';
 import Label from 'src/components/Label';
 import Collapse from 'src/common/components/Collapse';
-import TextControl from './TextControl';
-import MetricsControl from './MetricControl/MetricsControl';
-import ControlHeader from '../ControlHeader';
-import PopoverSection from '../../../components/PopoverSection';
+import TextControl from 'src/explore/components/controls/TextControl';
+import MetricsControl from 'src/explore/components/controls/MetricControl/MetricsControl';
+import ControlHeader from 'src/explore/components/ControlHeader';
+import PopoverSection from 'src/components/PopoverSection';
 
 const controlTypes = {
   fixed: 'fix',

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

@@ -294,7 +294,7 @@ class MetricsControl extends React.PureComponent {
           null,
         )}
         datasource={this.props.datasource}
-        savedMetric={{}}
+        savedMetric={{ metric_name: '', expression: '' }}
         datasourceType={this.props.datasourceType}
         createNew
       >