convert AlertRuleList test to RTL (#55045)

.betterer.results

@@ -59,9 +59,6 @@ exports[`no enzyme tests`] = {
     "public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/alerting/AlertRuleList.test.tsx:2998938420": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:145048794": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
@@ -3189,9 +3186,6 @@ exports[`better eslint`] = {
     "public/app/features/admin/ldap/LdapPage.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/alerting/AlertRuleList.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/features/alerting/AlertRuleList.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]

public/app/features/alerting/AlertRuleList.test.tsx

@@ -1,13 +1,13 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { openMenu } from 'react-select-event';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
-import { NavModel } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 
 import appEvents from '../../core/app_events';
-import { AlertRule } from '../../types';
 import { ShowModalReactEvent } from '../../types/events';
 
 import { AlertHowToModal } from './AlertHowToModal';
@@ -18,92 +18,101 @@ jest.mock('../../core/app_events', () => ({
   publish: jest.fn(),
 }));
 
+const defaultProps: Props = {
+  ...getRouteComponentProps({}),
+  navModel: {
+    main: {
+      text: 'foo',
+    },
+    node: {
+      text: 'foo',
+    },
+  },
+  search: '',
+  isLoading: false,
+  alertRules: [],
+  getAlertRulesAsync: jest.fn().mockResolvedValue([]),
+  setSearchQuery: mockToolkitActionCreator(setSearchQuery),
+  togglePauseAlertRule: jest.fn(),
+};
+
 const setup = (propOverrides?: object) => {
   const props: Props = {
-    ...getRouteComponentProps({}),
-    navModel: {} as NavModel,
-    alertRules: [] as AlertRule[],
-    getAlertRulesAsync: jest.fn(),
-    setSearchQuery: mockToolkitActionCreator(setSearchQuery),
-    togglePauseAlertRule: jest.fn(),
-    search: '',
-    isLoading: false,
+    ...defaultProps,
+    ...propOverrides,
   };
 
-  Object.assign(props, propOverrides);
-
-  const wrapper = shallow(<AlertRuleListUnconnected {...props} />);
+  const { rerender } = render(<AlertRuleListUnconnected {...props} />);
 
   return {
-    wrapper,
-    instance: wrapper.instance() as AlertRuleListUnconnected,
+    rerender,
   };
 };
 
-describe('Life cycle', () => {
-  describe('component did mount', () => {
-    it('should call fetchrules', () => {
-      const { instance } = setup();
-      instance.fetchRules = jest.fn();
-      instance.componentDidMount();
-      expect(instance.fetchRules).toHaveBeenCalled();
-    });
-  });
+afterEach(() => {
+  jest.clearAllMocks();
+});
 
-  describe('component did update', () => {
-    it('should call fetchrules if props differ', () => {
-      const { instance } = setup();
-      instance.fetchRules = jest.fn();
+describe('AlertRuleList', () => {
+  it('should call fetchrules when mounting', () => {
+    jest.spyOn(AlertRuleListUnconnected.prototype, 'fetchRules');
 
-      instance.componentDidUpdate({ queryParams: { state: 'ok' } } as any);
+    expect(AlertRuleListUnconnected.prototype.fetchRules).not.toHaveBeenCalled();
+    setup();
+    expect(AlertRuleListUnconnected.prototype.fetchRules).toHaveBeenCalled();
+  });
 
-      expect(instance.fetchRules).toHaveBeenCalled();
-    });
+  it('should call fetchrules when props change', () => {
+    const fetchRulesSpy = jest.spyOn(AlertRuleListUnconnected.prototype, 'fetchRules');
+    expect(AlertRuleListUnconnected.prototype.fetchRules).not.toHaveBeenCalled();
+    const { rerender } = setup();
+    expect(AlertRuleListUnconnected.prototype.fetchRules).toHaveBeenCalled();
+
+    fetchRulesSpy.mockReset();
+    rerender(<AlertRuleListUnconnected {...defaultProps} queryParams={{ state: 'ok' }} />);
+    expect(AlertRuleListUnconnected.prototype.fetchRules).toHaveBeenCalled();
   });
-});
 
-describe('Functions', () => {
   describe('Get state filter', () => {
-    it('should get all if prop is not set', () => {
-      const { instance } = setup();
-      const stateFilter = instance.getStateFilter();
-      expect(stateFilter).toEqual('all');
+    it('should be all if prop is not set', () => {
+      setup();
+      expect(screen.getByText('All')).toBeInTheDocument();
     });
 
     it('should return state filter if set', () => {
-      const { instance } = setup({
-        queryParams: { state: 'ok' },
+      setup({
+        queryParams: { state: 'not_ok' },
       });
-
-      const stateFilter = instance.getStateFilter();
-      expect(stateFilter).toEqual('ok');
+      expect(screen.getByText('Not OK')).toBeInTheDocument();
     });
   });
 
   describe('State filter changed', () => {
-    it('should update location', () => {
-      const { instance } = setup();
-      const mockEvent = { value: 'alerting' };
-      instance.onStateFilterChanged(mockEvent);
-      expect(locationService.getSearchObject().state).toBe('alerting');
+    it('should update location', async () => {
+      setup();
+      const stateFilterSelect = screen.getByLabelText('States');
+      openMenu(stateFilterSelect);
+      await userEvent.click(screen.getByText('Not OK'));
+      expect(locationService.getSearchObject().state).toBe('not_ok');
     });
   });
 
   describe('Open how to', () => {
-    it('should emit show-modal event', () => {
-      const { instance } = setup();
-
-      instance.onOpenHowTo();
+    it('should emit show-modal event', async () => {
+      setup();
 
+      await userEvent.click(screen.getByRole('button', { name: 'How to add an alert' }));
       expect(appEvents.publish).toHaveBeenCalledWith(new ShowModalReactEvent({ component: AlertHowToModal }));
     });
   });
 
   describe('Search query change', () => {
-    it('should set search query', () => {
-      const { instance } = setup();
-      instance.onSearchQueryChange('dashboard');
-      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('dashboard');
+    it('should set search query', async () => {
+      setup();
+
+      await userEvent.click(screen.getByPlaceholderText('Search alerts'));
+      await userEvent.paste('dashboard');
+      expect(defaultProps.setSearchQuery).toHaveBeenCalledWith('dashboard');
     });
   });
 });