test(js): Convert cellAction to RTL (#41453)

static/app/views/eventsV2/table/cellAction.spec.jsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import EventView from 'sentry/utils/discover/eventView';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -21,8 +21,13 @@ const defaultData = {
   ],
 };
 
-function makeWrapper(eventView, handleCellAction, columnIndex = 0, data = defaultData) {
-  return mountWithTheme(
+function renderComponent(
+  eventView,
+  handleCellAction,
+  columnIndex = 0,
+  data = defaultData
+) {
+  return render(
     <CellAction
       dataRow={data}
       eventView={eventView}
@@ -63,55 +68,63 @@ describe('Discover -> CellAction', function () {
   };
   const view = EventView.fromLocation(location);
 
-  describe('hover menu button', function () {
-    const wrapper = makeWrapper(view);
+  function hoverContainer() {
+    userEvent.hover(screen.getByText('some content'));
+  }
+
+  function unhoverContainer() {
+    userEvent.unhover(screen.getByText('some content'));
+  }
+
+  function openMenu() {
+    hoverContainer();
+    userEvent.click(screen.getByRole('button'));
+  }
 
+  describe('hover menu button', function () {
     it('shows no menu by default', function () {
-      expect(wrapper.find('MenuButton')).toHaveLength(0);
+      renderComponent(view);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
 
     it('shows a menu on hover, and hides again', function () {
-      wrapper.find('Container').simulate('mouseEnter');
-      expect(wrapper.find('MenuButton')).toHaveLength(1);
+      renderComponent(view);
+
+      hoverContainer();
+      expect(screen.getByRole('button')).toBeInTheDocument();
 
-      wrapper.find('Container').simulate('mouseLeave');
-      expect(wrapper.find('MenuButton')).toHaveLength(0);
+      unhoverContainer();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
   });
 
   describe('opening the menu', function () {
-    const wrapper = makeWrapper(view);
-    wrapper.find('Container').simulate('mouseEnter');
-
     it('toggles the menu on click', function () {
-      // Button should be rendered.
-      expect(wrapper.find('MenuButton')).toHaveLength(1);
-      wrapper.find('MenuButton').simulate('click');
-
-      // Menu should show now.
-      expect(wrapper.find('Menu')).toHaveLength(1);
+      renderComponent(view);
+      openMenu();
+      expect(screen.getByRole('button', {name: 'Add to filter'})).toBeInTheDocument();
     });
   });
 
   describe('per cell actions', function () {
-    let wrapper;
     let handleCellAction;
+
     beforeEach(function () {
       handleCellAction = jest.fn();
-      wrapper = makeWrapper(view, handleCellAction);
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
     });
 
     it('add button appends condition', function () {
-      wrapper.find('button[data-test-id="add-to-filter"]').simulate('click');
+      renderComponent(view, handleCellAction);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Add to filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('add', 'best-transaction');
     });
 
     it('exclude button adds condition', function () {
-      wrapper.find('button[data-test-id="exclude-from-filter"]').simulate('click');
+      renderComponent(view, handleCellAction);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Exclude from filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('exclude', 'best-transaction');
     });
@@ -120,28 +133,25 @@ describe('Discover -> CellAction', function () {
       const excludeView = EventView.fromLocation({
         query: {...location.query, query: '!transaction:nope'},
       });
-      wrapper = makeWrapper(excludeView, handleCellAction);
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      wrapper.find('button[data-test-id="exclude-from-filter"]').simulate('click');
+      renderComponent(excludeView, handleCellAction);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Exclude from filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('exclude', 'best-transaction');
     });
 
     it('go to summary button goes to transaction summary page', function () {
-      wrapper.find('button[data-test-id="transaction-summary"]').simulate('click');
+      renderComponent(view, handleCellAction);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Go to summary'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('transaction', 'best-transaction');
     });
 
     it('go to release button goes to release health page', function () {
-      wrapper = makeWrapper(view, handleCellAction, 3);
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="release"]').simulate('click');
+      renderComponent(view, handleCellAction, 3);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Go to release'}));
 
       expect(handleCellAction).toHaveBeenCalledWith(
         'release',
@@ -150,12 +160,9 @@ describe('Discover -> CellAction', function () {
     });
 
     it('greater than button adds condition', function () {
-      wrapper = makeWrapper(view, handleCellAction, 2);
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="show-values-greater-than"]').simulate('click');
+      renderComponent(view, handleCellAction, 2);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Show values greater than'}));
 
       expect(handleCellAction).toHaveBeenCalledWith(
         'show_greater_than',
@@ -164,12 +171,9 @@ describe('Discover -> CellAction', function () {
     });
 
     it('less than button adds condition', function () {
-      wrapper = makeWrapper(view, handleCellAction, 2);
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="show-values-less-than"]').simulate('click');
+      renderComponent(view, handleCellAction, 2);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Show values less than'}));
 
       expect(handleCellAction).toHaveBeenCalledWith(
         'show_less_than',
@@ -178,25 +182,17 @@ describe('Discover -> CellAction', function () {
     });
 
     it('error.handled with null adds condition', function () {
-      wrapper = makeWrapper(view, handleCellAction, 7, defaultData);
-
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="add-to-filter"]').simulate('click');
+      renderComponent(view, handleCellAction, 7, defaultData);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Add to filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('add', 1);
     });
 
     it('error.type with array values adds condition', function () {
-      wrapper = makeWrapper(view, handleCellAction, 8, defaultData);
-
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="add-to-filter"]').simulate('click');
+      renderComponent(view, handleCellAction, 8, defaultData);
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Add to filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('add', [
         'ServerException',
@@ -207,143 +203,148 @@ describe('Discover -> CellAction', function () {
     });
 
     it('error.handled with 0 adds condition', function () {
-      wrapper = makeWrapper(view, handleCellAction, 7, {
+      renderComponent(view, handleCellAction, 7, {
         ...defaultData,
         'error.handled': [0],
       });
-
-      // Show button and menu.
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-
-      wrapper.find('button[data-test-id="add-to-filter"]').simulate('click');
+      openMenu();
+      userEvent.click(screen.getByRole('button', {name: 'Add to filter'}));
 
       expect(handleCellAction).toHaveBeenCalledWith('add', [0]);
     });
 
     it('show appropriate actions for string cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 0);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeTruthy();
+      renderComponent(view, handleCellAction, 0);
+      openMenu();
+
+      expect(screen.getByRole('button', {name: 'Add to filter'})).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Exclude from filter'})
+      ).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeFalsy();
+        screen.queryByRole('button', {name: 'Show values greater than'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeFalsy();
+        screen.queryByRole('button', {name: 'Show values less than'})
+      ).not.toBeInTheDocument();
     });
 
     it('show appropriate actions for string cells with null values', function () {
-      wrapper = makeWrapper(view, handleCellAction, 4);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeTruthy();
+      renderComponent(view, handleCellAction, 4);
+      openMenu();
+
+      expect(screen.getByRole('button', {name: 'Add to filter'})).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Exclude from filter'})
+      ).toBeInTheDocument();
     });
 
     it('show appropriate actions for number cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 1);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeFalsy();
+      renderComponent(view, handleCellAction, 1);
+      openMenu();
+
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeFalsy();
+        screen.queryByRole('button', {name: 'Add to filter'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeTruthy();
+        screen.queryByRole('button', {name: 'Exclude from filter'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Show values greater than'})
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Show values less than'})
+      ).toBeInTheDocument();
     });
 
     it('show appropriate actions for date cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 2);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeTruthy();
+      renderComponent(view, handleCellAction, 2);
+      openMenu();
+
+      expect(screen.getByRole('button', {name: 'Add to filter'})).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeFalsy();
+        screen.queryByRole('button', {name: 'Exclude from filter'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Show values greater than'})
+      ).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Show values less than'})
+      ).toBeInTheDocument();
     });
 
     it('show appropriate actions for release cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 3);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="release"]').exists()).toBeTruthy();
+      renderComponent(view, handleCellAction, 3);
+      openMenu();
 
-      wrapper = makeWrapper(view, handleCellAction, 3, {
-        ...defaultData,
-        release: null,
-      });
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
-      expect(wrapper.find('button[data-test-id="release"]').exists()).toBeFalsy();
+      expect(screen.getByRole('button', {name: 'Go to release'})).toBeInTheDocument();
+    });
+
+    it('show appropriate actions for empty release cells', function () {
+      renderComponent(view, handleCellAction, 3, {...defaultData, release: null});
+      openMenu();
+
+      expect(
+        screen.queryByRole('button', {name: 'Go to release'})
+      ).not.toBeInTheDocument();
     });
 
     it('show appropriate actions for measurement cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 5);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
+      renderComponent(view, handleCellAction, 5);
+      openMenu();
+
+      expect(
+        screen.queryByRole('button', {name: 'Add to filter'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeTruthy();
+        screen.queryByRole('button', {name: 'Exclude from filter'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeTruthy();
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeFalsy();
+        screen.getByRole('button', {name: 'Show values greater than'})
+      ).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeFalsy();
+        screen.getByRole('button', {name: 'Show values less than'})
+      ).toBeInTheDocument();
+    });
 
-      wrapper = makeWrapper(view, handleCellAction, 5, {
+    it('show appropriate actions for empty measurement cells', function () {
+      renderComponent(view, handleCellAction, 5, {
         ...defaultData,
         'measurements.fcp': null,
       });
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
+      openMenu();
+
+      expect(screen.getByRole('button', {name: 'Add to filter'})).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeFalsy();
+        screen.getByRole('button', {name: 'Exclude from filter'})
+      ).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeFalsy();
-      expect(wrapper.find('button[data-test-id="add-to-filter"]').exists()).toBeTruthy();
+        screen.queryByRole('button', {name: 'Show values greater than'})
+      ).not.toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="exclude-from-filter"]').exists()
-      ).toBeTruthy();
+        screen.queryByRole('button', {name: 'Show values less than'})
+      ).not.toBeInTheDocument();
     });
 
     it('show appropriate actions for numeric function cells', function () {
-      wrapper = makeWrapper(view, handleCellAction, 6);
-      wrapper.find('Container').simulate('mouseEnter');
-      wrapper.find('MenuButton').simulate('click');
+      renderComponent(view, handleCellAction, 6);
+      openMenu();
+
       expect(
-        wrapper.find('button[data-test-id="show-values-greater-than"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Show values greater than'})
+      ).toBeInTheDocument();
       expect(
-        wrapper.find('button[data-test-id="show-values-less-than"]').exists()
-      ).toBeTruthy();
+        screen.getByRole('button', {name: 'Show values less than'})
+      ).toBeInTheDocument();
+    });
 
-      wrapper = makeWrapper(view, handleCellAction, 6, {
+    it('show appropriate actions for empty numeric function cells', function () {
+      renderComponent(view, handleCellAction, 6, {
         ...defaultData,
         'percentile(measurements.fcp, 0.5)': null,
       });
-      wrapper.find('Container').simulate('mouseEnter');
-      expect(wrapper.find('MenuButton').exists()).toBeFalsy();
+      hoverContainer();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
   });
 });