test(alerts): Convert alert details test to RTL (#29935)

getsentry · Nov 11, 2021 · 34727e4 · 34727e4
1 parent 639724c
commit 34727e4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 45 deletions.
diff --git a/static/app/views/alerts/incidentRules/triggers/thresholdControl.tsx b/static/app/views/alerts/incidentRules/triggers/thresholdControl.tsx
@@ -145,6 +145,7 @@ class ThresholdControl extends React.Component<Props, State> {
               <StyledInput
                 disabled={disabled}
                 name={`${type}Threshold`}
+                data-test-id={`${type}-threshold`}
                 placeholder={placeholder}
                 value={currentValue ?? threshold ?? ''}
                 onChange={this.handleThresholdChange}

diff --git a/tests/js/spec/views/alerts/incidentRules/create.spec.jsx b/tests/js/spec/views/alerts/incidentRules/create.spec.jsx
@@ -1,5 +1,5 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
 
 import IncidentRulesCreate from 'app/views/alerts/incidentRules/create';
 
@@ -46,7 +46,7 @@ describe('Incident Rules Create', function () {
         project={project}
         userTeamIds={[]}
       />,
-      routerContext
+      {context: routerContext}
     );
 
     expect(eventStatsMock).toHaveBeenCalledWith(

diff --git a/tests/js/spec/views/alerts/incidentRules/details.spec.jsx b/tests/js/spec/views/alerts/incidentRules/details.spec.jsx
@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import GlobalModal from 'app/components/globalModal';
 import {metric} from 'app/utils/analytics';
@@ -72,7 +72,7 @@ describe('Incident Rules Details', function () {
       body: rule,
     });
 
-    const wrapper = mountWithTheme(
+    mountWithTheme(
       <Fragment>
         <GlobalModal />
         <IncidentRulesDetails
@@ -86,39 +86,26 @@ describe('Incident Rules Details', function () {
           project={project}
         />
       </Fragment>,
-      routerContext
+      {context: routerContext}
     );
 
-    await tick();
-    wrapper.update();
-
     // has existing trigger
-    expect(wrapper.find('input[name="criticalThreshold"]').first().prop('value')).toEqual(
-      70
-    );
-    expect(wrapper.find('input[name="resolveThreshold"]').first().prop('value')).toEqual(
-      36
-    );
+    expect(screen.getByTestId('critical-threshold')).toHaveValue('70');
+    expect(screen.getByTestId('resolve-threshold')).toHaveValue('36');
 
     expect(req).toHaveBeenCalled();
 
     // Check correct rule name is called
     expect(onChangeTitleMock).toHaveBeenCalledWith(rule.name);
 
-    wrapper
-      .find('input[name="warningThreshold"]')
-      .first(1)
-      .simulate('change', {target: {value: 13}});
-    wrapper
-      .find('input[name="resolveThreshold"]')
-      .first()
-      .simulate('change', {target: {value: 12}});
+    fireEvent.change(screen.getByTestId('warning-threshold'), {target: {value: 13}});
+    fireEvent.change(screen.getByTestId('resolve-threshold'), {target: {value: 12}});
 
     // Create a new action
-    wrapper.find('button[aria-label="Add Action"]').simulate('click');
+    fireEvent.click(screen.getByLabelText('Add Action'));
 
     // Save Trigger
-    wrapper.find('button[aria-label="Save Rule"]').simulate('submit');
+    fireEvent.submit(screen.getByLabelText('Save Rule'));
 
     expect(metric.startTransaction).toHaveBeenCalledWith({name: 'saveAlertRule'});
     expect(editRule).toHaveBeenCalledWith(
@@ -161,26 +148,18 @@ describe('Incident Rules Details', function () {
     );
 
     // New Trigger should be in list
-    await tick();
-    wrapper.update();
-
     // Has correct values
-    expect(wrapper.find('input[name="criticalThreshold"]').first().prop('value')).toBe(
-      70
-    );
-    expect(wrapper.find('input[name="warningThreshold"]').first().prop('value')).toBe(13);
-    expect(wrapper.find('input[name="resolveThreshold"]').first().prop('value')).toBe(12);
+    expect(screen.getByTestId('critical-threshold')).toHaveValue('70');
+    expect(screen.getByTestId('warning-threshold')).toHaveValue('13');
+    expect(screen.getByTestId('resolve-threshold')).toHaveValue('12');
 
     editRule.mockReset();
 
     // Clear warning Trigger
-    wrapper
-      .find('input[name="warningThreshold"]')
-      .first()
-      .simulate('change', {target: {value: ''}});
+    fireEvent.change(screen.getByTestId('warning-threshold'), {target: {value: ''}});
 
     // Save Trigger
-    wrapper.find('button[aria-label="Save Rule"]').simulate('submit');
+    fireEvent.submit(screen.getByLabelText('Save Rule'));
 
     expect(editRule).toHaveBeenCalledWith(
       expect.anything(),

diff --git a/tests/js/spec/views/alerts/incidentRules/triggersChart.spec.jsx b/tests/js/spec/views/alerts/incidentRules/triggersChart.spec.jsx
@@ -1,5 +1,5 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
 
 import {Client} from 'app/api';
 import AreaChart from 'app/components/charts/areaChart';
@@ -42,7 +42,7 @@ describe('Incident Rules Create', () => {
         aggregate="count()"
         triggers={[]}
       />,
-      routerContext
+      {context: routerContext}
     );
 
     await tick();
@@ -105,7 +105,7 @@ describe('Incident Rules Create', () => {
         aggregate="count()"
         triggers={[]}
       />,
-      routerContext
+      {context: routerContext}
     );
 
     await tick();

diff --git a/tests/js/spec/views/alerts/wizard/radioPanelGroup.spec.jsx b/tests/js/spec/views/alerts/wizard/radioPanelGroup.spec.jsx
@@ -1,12 +1,12 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import RadioGroupPanel from 'app/views/alerts/wizard/radioPanelGroup';
 
 describe('RadioGroupPanel', function () {
   it('calls onChange when clicked', function () {
     const mock = jest.fn();
 
-    const wrapper = mountWithTheme(
+    mountWithTheme(
       <RadioGroupPanel
         label="test"
         value="choice_one"
@@ -18,14 +18,16 @@ describe('RadioGroupPanel', function () {
         onChange={mock}
       />
     );
-    wrapper.find('[role="radio"] Radio').last().simulate('change');
+
+    fireEvent.click(screen.getByText('Choice Three'));
+
     expect(mock).toHaveBeenCalledWith(expect.any(String), expect.any(Object));
   });
 
   it('Renders extra content', function () {
     const mock = jest.fn();
 
-    const wrapper = mountWithTheme(
+    mountWithTheme(
       <RadioGroupPanel
         label="test"
         value="choice_one"
@@ -37,6 +39,6 @@ describe('RadioGroupPanel', function () {
         onChange={mock}
       />
     );
-    expect(wrapper.text().includes('extra content')).toEqual(true);
+    expect(screen.getByText('extra content')).toBeInTheDocument();
   });
 });