Alerting: Improve simplified routing test (#107251)

Improve SimplifiedRuleEditor test performance

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/SimplifiedRuleEditor.test.tsx

@@ -2,7 +2,7 @@ import { UserEvent } from '@testing-library/user-event';
 import { ReactNode } from 'react';
 import { GrafanaRuleFormStep, renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
-import { screen, waitFor } from 'test/test-utils';
+import { screen, waitFor, within } from 'test/test-utils';
 import { byRole } from 'testing-library-selector';
 
 import { contextSrv } from 'app/core/services/context_srv';
@@ -25,7 +25,7 @@ jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
   AppChromeUpdate: ({ actions }: { actions: ReactNode }) => <div>{actions}</div>,
 }));
 
-jest.setTimeout(60 * 1000);
+jest.setTimeout(90 * 1000);
 
 const dataSources = {
   default: mockDataSource(
@@ -44,10 +44,16 @@ const dataSources = {
 };
 
 const selectFolderAndGroup = async (user: UserEvent) => {
-  await user.click(await screen.findByRole('button', { name: /select folder/i }));
-  await user.click(await screen.findByLabelText(FOLDER_TITLE_HAPPY_PATH));
+  const folderPicker = ui.inputs.folder.get();
+  const folderButton = await within(folderPicker).findByRole('button', { name: /select folder/i });
+  await user.click(folderButton);
+
+  const folderOption = await within(folderPicker).findByLabelText(FOLDER_TITLE_HAPPY_PATH);
+  await user.click(folderOption);
+
   const groupInput = await ui.inputs.group.find();
-  await user.click(await byRole('combobox').find(groupInput));
+  const groupCombobox = await byRole('combobox').find(groupInput);
+  await user.click(groupCombobox);
   await clickSelectOption(groupInput, grafanaRulerGroup.name);
 };
 
@@ -73,11 +79,11 @@ beforeEach(() => {
 });
 
 setupMswServer();
+setupDataSources(dataSources.default, dataSources.am);
 
 describe('Can create a new grafana managed alert using simplified routing', () => {
   beforeEach(() => {
     window.localStorage.clear();
-    setupDataSources(dataSources.default, dataSources.am);
     contextSrv.isEditor = true;
     contextSrv.hasEditPermissionInFolders = true;
     grantUserPermissions([
@@ -99,11 +105,9 @@ describe('Can create a new grafana managed alert using simplified routing', () =
 
   it('cannot create new grafana managed alert when using simplified routing and not selecting a contact point', async () => {
     const capture = captureRequests((r) => r.method === 'POST' && r.url.includes('/api/ruler/'));
-
     const { user } = renderRuleEditor();
 
     await user.type(await ui.inputs.name.find(), 'my great new rule');
-
     await selectFolderAndGroup(user);
 
     //select contact point routing
@@ -112,9 +116,9 @@ describe('Can create a new grafana managed alert using simplified routing', () =
     // do not select a contact point
     // save and check that call to backend was not made
     await user.click(ui.buttons.save.get());
+
     expect(await screen.findByText('Contact point is required.')).toBeInTheDocument();
     const capturedRequests = await capture;
-
     expect(capturedRequests).toHaveLength(0);
   });
 

public/test/helpers/alertingRuleEditor.tsx

@@ -8,12 +8,19 @@ import RuleEditor from 'app/features/alerting/unified/rule-editor/RuleEditor';
 
 export enum GrafanaRuleFormStep {
   Query = 2,
+  FolderLabels = 3,
+  Evaluation = 4,
   Notification = 5,
 }
 
 export const ui = {
   loadingIndicator: byText('Loading rule...'),
   manualRestoreBanner: byText(/restoring rule manually/i),
+  formSteps: {
+    folderLabels: byTestId(selectors.components.AlertRules.step(GrafanaRuleFormStep.FolderLabels.toString())),
+    evaluation: byTestId(selectors.components.AlertRules.step(GrafanaRuleFormStep.Evaluation.toString())),
+    notification: byTestId(selectors.components.AlertRules.step(GrafanaRuleFormStep.Notification.toString())),
+  },
   inputs: {
     name: byRole('textbox', { name: 'name' }),
     metric: byRole('textbox', { name: 'metric' }),