test(js): Convert ManageDashboards test to RTL (#41352)

getsentry · Nov 14, 2022 · 55b7853 · 55b7853
1 parent 57e39f1
commit 55b7853
Showing 1 changed file with 20 additions and 49 deletions.
diff --git a/static/app/views/dashboardsV2/manage/index.spec.jsx b/static/app/views/dashboardsV2/manage/index.spec.jsx
@@ -1,8 +1,7 @@
 import {browserHistory} from 'react-router';
+import selectEvent from 'react-select-event';
 
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {act} from 'sentry-test/reactTestingLibrary';
-import {triggerPress} from 'sentry-test/utils';
+import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import ManageDashboards from 'sentry/views/dashboardsV2/manage';
@@ -43,43 +42,39 @@ describe('Dashboards > Detail', function () {
   });
 
   it('denies access on missing feature', function () {
-    const wrapper = mountWithTheme(
+    render(
       <ManageDashboards
         organization={mockUnauthorizedOrg}
         location={{query: {}}}
         router={{}}
       />
     );
 
-    const content = wrapper.find('PageContent');
-    expect(content.text()).toContain("You don't have access to this feature");
+    expect(screen.getByText("You don't have access to this feature")).toBeInTheDocument();
   });
 
   it('denies access on no projects', function () {
     act(() => ProjectsStore.loadInitialData([]));
 
-    const wrapper = mountWithTheme(
+    render(
       <ManageDashboards
         organization={mockAuthorizedOrg}
         location={{query: {}}}
         router={{}}
       />
     );
 
-    const content = wrapper.find('HelpMessage');
-    expect(content.text()).toContain('You need at least one project to use this view');
+    expect(
+      screen.getByText('You need at least one project to use this view')
+    ).toBeInTheDocument();
   });
 
-  it('creates new dashboard', async function () {
+  it('creates new dashboard', function () {
     const org = TestStubs.Organization({features: FEATURES});
 
-    const wrapper = mountWithTheme(
-      <ManageDashboards organization={org} location={{query: {}}} router={{}} />
-    );
-    await tick();
+    render(<ManageDashboards organization={org} location={{query: {}}} router={{}} />);
 
-    wrapper.find('Button[data-test-id="dashboard-create"]').simulate('click');
-    await tick();
+    userEvent.click(screen.getByTestId('dashboard-create'));
 
     expect(browserHistory.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/dashboards/new/',
@@ -90,41 +85,17 @@ describe('Dashboards > Detail', function () {
   it('can sort', async function () {
     const org = TestStubs.Organization({features: FEATURES});
 
-    const wrapper = mountWithTheme(
-      <ManageDashboards organization={org} location={{query: {}}} router={{}} />
-    );
-    await tick();
-
-    // Open sort menu
-    await act(async () => {
-      triggerPress(wrapper.find('CompactSelect Button'));
-
-      await tick();
-      wrapper.update();
-    });
-
-    const dropdownItems = wrapper.find('MenuItemWrap');
-    expect(dropdownItems).toHaveLength(6);
+    render(<ManageDashboards organization={org} location={{query: {}}} router={{}} />);
 
-    const expectedSorts = [
-      'My Dashboards',
-      'Dashboard Name (A-Z)',
-      'Date Created (Newest)',
-      'Date Created (Oldest)',
-      'Most Popular',
-      'Recently Viewed',
-    ];
-
-    expect(dropdownItems.children().map(element => element.text())).toEqual(
-      expectedSorts
+    await selectEvent.select(
+      screen.getByRole('button', {name: /sort by/i}),
+      'Dashboard Name (A-Z)'
     );
 
-    dropdownItems.at(1).simulate('click');
-
-    await tick();
-
-    expect(browserHistory.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {sort: 'title'}})
-    );
+    await waitFor(() => {
+      expect(browserHistory.push).toHaveBeenCalledWith(
+        expect.objectContaining({query: {sort: 'title'}})
+      );
+    });
   });
 });