From 819597faf6db198677320a8cc5ce9a52d4b0ba77 Mon Sep 17 00:00:00 2001
From: Ross Mabbett <92495987+rtexelm@users.noreply.github.com>
Date: Fri, 2 Aug 2024 19:54:06 -0400
Subject: [PATCH] refactor(controls): Migrate AdhocMetricOption.test to RTL
 (#29843)

---
 .../MetricControl/AdhocMetricOption.test.jsx  | 108 +++++++++++-------
 1 file changed, 65 insertions(+), 43 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
index 1ef070de8..b7b644980 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
@@ -16,13 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
+import { render, screen, fireEvent } from 'spec/helpers/testing-library';
 import { AGGREGATES } from 'src/explore/constants';
 import AdhocMetricOption from 'src/explore/components/controls/MetricControl/AdhocMetricOption';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
-import ControlPopover from '../ControlPopover/ControlPopover';
+import userEvent from '@testing-library/user-event';
 
 const columns = [
   { type: 'VARCHAR(255)', column_name: 'source' },
@@ -35,49 +33,73 @@ const sumValueAdhocMetric = new AdhocMetric({
   aggregate: AGGREGATES.SUM,
 });
 
+const datasource = {
+  type: 'table',
+  id: 1,
+  uid: '1__table',
+  columnFormats: {},
+  verboseMap: {},
+};
+
+const defaultProps = {
+  adhocMetric: sumValueAdhocMetric,
+  savedMetric: {},
+  savedMetricsOptions: [],
+  onMetricEdit: jest.fn(),
+  columns,
+  datasource,
+  onMoveLabel: jest.fn(),
+  onDropLabel: jest.fn(),
+  index: 0,
+};
+
 function setup(overrides) {
-  const onMetricEdit = sinon.spy();
   const props = {
-    adhocMetric: sumValueAdhocMetric,
-    savedMetric: {},
-    savedMetrics: [],
-    onMetricEdit,
-    columns,
-    onMoveLabel: () => {},
-    onDropLabel: () => {},
-    index: 0,
+    ...defaultProps,
     ...overrides,
   };
-  const wrapper = shallow(<AdhocMetricOption {...props} />)
-    .find('AdhocMetricPopoverTrigger')
-    .shallow();
-  return { wrapper, onMetricEdit };
+  return render(<AdhocMetricOption {...props} />, { useDnd: true });
 }
 
-describe('AdhocMetricOption', () => {
-  it('renders an overlay trigger wrapper for the label', () => {
-    const { wrapper } = setup();
-    expect(wrapper.find(ControlPopover)).toExist();
-    expect(wrapper.find('OptionControlLabel')).toExist();
-  });
-
-  it('overwrites the adhocMetric in state with onLabelChange', () => {
-    const { wrapper } = setup();
-    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
-    expect(wrapper.state('title').label).toBe('new label');
-    expect(wrapper.state('title').hasCustomLabel).toBe(true);
-  });
-
-  it('returns to default labels when the custom label is cleared', () => {
-    const { wrapper } = setup();
-    expect(wrapper.state('title').label).toBe('SUM(value)');
-
-    wrapper.instance().onLabelChange({ target: { value: 'new label' } });
-    expect(wrapper.state('title').label).toBe('new label');
-
-    wrapper.instance().onLabelChange({ target: { value: '' } });
-
-    expect(wrapper.state('title').label).toBe('SUM(value)');
-    expect(wrapper.state('title').hasCustomLabel).toBe(false);
-  });
+test('renders an overlay trigger wrapper for the label', () => {
+  setup();
+  expect(screen.getByText('SUM(value)')).toBeInTheDocument();
+});
+
+test('overwrites the adhocMetric in state with onLabelChange', async () => {
+  setup();
+  userEvent.click(screen.getByText('SUM(value)'));
+  userEvent.click(screen.getByTestId(/AdhocMetricEditTitle#trigger/i));
+  const labelInput = await screen.findByTestId(/AdhocMetricEditTitle#input/i);
+  userEvent.clear(labelInput);
+  userEvent.type(labelInput, 'new label');
+  expect(labelInput).toHaveValue('new label');
+  fireEvent.keyPress(labelInput, {
+    key: 'Enter',
+    charCode: 13,
+  });
+  expect(screen.getByText(/new label/i)).toBeInTheDocument();
+});
+
+test('returns to default labels when the custom label is cleared', async () => {
+  setup();
+  userEvent.click(screen.getByText('SUM(value)'));
+  userEvent.click(screen.getByTestId(/AdhocMetricEditTitle#trigger/i));
+  const labelInput = await screen.findByTestId(/AdhocMetricEditTitle#input/i);
+  userEvent.clear(labelInput);
+  userEvent.type(labelInput, 'new label');
+  fireEvent.keyPress(labelInput, {
+    key: 'Enter',
+    charCode: 13,
+  });
+  expect(labelInput).not.toBeInTheDocument();
+  expect(screen.getByText(/new label/i)).toBeInTheDocument();
+  userEvent.click(screen.getByTestId(/AdhocMetricEditTitle#trigger/i));
+  expect(screen.getByPlaceholderText(/new label/i)).toBeInTheDocument();
+  userEvent.clear(labelInput);
+  fireEvent.keyPress(labelInput, {
+    key: 'Enter',
+    charCode: 13,
+  });
+  expect(screen.getByPlaceholderText('SUM(value)')).toBeInTheDocument();
 });