test(js): Convert IssueListOverview (polling) to RTL (#39825)

static/app/views/issueList/header.tsx

@@ -73,6 +73,10 @@ function IssueListHeader({
     selectedProjectIds.includes(Number(id))
   );
 
+  const realtimeTitle = realtimeActive
+    ? t('Pause real-time updates')
+    : t('Enable real-time updates');
+
   return (
     <Layout.Header noActionWrap>
       <Layout.HeaderContent>
@@ -82,12 +86,10 @@ function IssueListHeader({
         <Button
           size="sm"
           data-test-id="real-time"
-          title={
-            realtimeActive ? t('Pause real-time updates') : t('Enable real-time updates')
-          }
+          title={realtimeTitle}
+          aria-label={realtimeTitle}
           icon={realtimeActive ? <IconPause size="xs" /> : <IconPlay size="xs" />}
           onClick={() => onRealtimeChange(!realtimeActive)}
-          aria-label={t('Toggle real-time updates')}
         />
       </Layout.HeaderActions>
       <StyledGlobalEventProcessingAlert projects={selectedProjects} />

static/app/views/issueList/overview.polling.spec.jsx

@@ -1,6 +1,5 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {act} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import StreamGroup from 'sentry/components/stream/group';
 import TagStore from 'sentry/stores/tagStore';
@@ -26,8 +25,6 @@ const DEFAULT_LINKS_HEADER =
 jest.useFakeTimers();
 
 describe('IssueList -> Polling', function () {
-  let wrapper;
-
   let issuesRequest;
   let pollRequest;
 
@@ -52,7 +49,7 @@ describe('IssueList -> Polling', function () {
   };
 
   /* helpers */
-  const createWrapper = async ({params, location, ...p} = {}) => {
+  const renderComponent = async ({params, location, ...p} = {}) => {
     const newRouter = {
       ...router,
       params: {
@@ -65,21 +62,17 @@ describe('IssueList -> Polling', function () {
       },
     };
 
-    wrapper = mountWithTheme(
+    render(
       <OrganizationContext.Provider value={TestStubs.Organization()}>
         <IssueList {...newRouter} {...defaultProps} {...p} />
       </OrganizationContext.Provider>,
-      routerContext
+      {context: routerContext}
     );
 
     await act(async () => {
       await Promise.resolve();
       jest.runAllTimers();
     });
-
-    wrapper.update();
-
-    return wrapper;
   };
 
   beforeEach(function () {
@@ -142,10 +135,9 @@ describe('IssueList -> Polling', function () {
         Link: DEFAULT_LINKS_HEADER,
       },
     });
-    const groupStats = TestStubs.GroupStats();
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/issues-stats/',
-      body: [groupStats],
+      body: [TestStubs.GroupStats()],
     });
     pollRequest = MockApiClient.addMockResponse({
       url: `/api/0/organizations/org-slug/issues/?cursor=${PREVIOUS_PAGE_CURSOR}:0:1`,
@@ -161,14 +153,10 @@ describe('IssueList -> Polling', function () {
 
   afterEach(function () {
     MockApiClient.clearMockResponses();
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    wrapper = null;
   });
 
   it('toggles polling for new issues', async function () {
-    await createWrapper();
+    await renderComponent();
 
     expect(issuesRequest).toHaveBeenCalledWith(
       expect.anything(),
@@ -178,11 +166,8 @@ describe('IssueList -> Polling', function () {
       })
     );
 
-    // Enable real time control
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(1);
-    wrapper.find('button[data-test-id="real-time"]').simulate('click');
-
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(0);
+    // Enable realtime updates
+    userEvent.click(screen.getByRole('button', {name: 'Enable real-time updates'}));
 
     // Each poll request gets delayed by additional 3s, up to max of 60s
     jest.advanceTimersByTime(3001);
@@ -191,8 +176,7 @@ describe('IssueList -> Polling', function () {
     expect(pollRequest).toHaveBeenCalledTimes(2);
 
     // Pauses
-    wrapper.find('button[data-test-id="real-time"]').simulate('click');
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(1);
+    userEvent.click(screen.getByRole('button', {name: 'Pause real-time updates'}));
 
     jest.advanceTimersByTime(12001);
     expect(pollRequest).toHaveBeenCalledTimes(2);
@@ -205,11 +189,10 @@ describe('IssueList -> Polling', function () {
       statusCode: 401,
     });
 
-    await createWrapper();
+    await renderComponent();
 
     // Enable real time control
-    wrapper.find('button[data-test-id="real-time"]').simulate('click');
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(0);
+    userEvent.click(screen.getByRole('button', {name: 'Enable real-time updates'}));
 
     // Each poll request gets delayed by additional 3s, up to max of 60s
     jest.advanceTimersByTime(3001);
@@ -225,12 +208,10 @@ describe('IssueList -> Polling', function () {
       statusCode: 403,
     });
 
-    await createWrapper();
+    await renderComponent();
 
     // Enable real time control
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(1);
-    wrapper.find('button[data-test-id="real-time"]').simulate('click');
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(0);
+    userEvent.click(screen.getByRole('button', {name: 'Enable real-time updates'}));
 
     // Each poll request gets delayed by additional 3s, up to max of 60s
     jest.advanceTimersByTime(3001);
@@ -246,11 +227,10 @@ describe('IssueList -> Polling', function () {
       statusCode: 404,
     });
 
-    await createWrapper();
+    await renderComponent();
 
     // Enable real time control
-    wrapper.find('button[data-test-id="real-time"]').simulate('click');
-    expect(wrapper.find('button[data-test-id="real-time"] IconPlay')).toHaveLength(0);
+    userEvent.click(screen.getByRole('button', {name: 'Enable real-time updates'}));
 
     // Each poll request gets delayed by additional 3s, up to max of 60s
     jest.advanceTimersByTime(3001);