Add whatwg-fetch and fixes to alerting tests that break when polyfill is added

public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx

@@ -1,5 +1,7 @@
+import 'whatwg-fetch';
 import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import { setupServer } from 'msw/node';
 import React from 'react';
 import { renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
@@ -7,6 +9,7 @@ import { byRole } from 'testing-library-selector';
 
 import { setDataSourceSrv } from '@grafana/runtime';
 import { contextSrv } from 'app/core/services/context_srv';
+import { mockApi } from 'app/features/alerting/unified/mockApi';
 import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types';
 import { AccessControlAction } from 'app/types';
 import { GrafanaAlertStateDecision, PromApplication } from 'app/types/unified-alerting-dto';
@@ -61,9 +64,13 @@ const mocks = {
   },
 };
 
+const server = setupServer();
+
 const getLabelInput = (selector: HTMLElement) => within(selector).getByRole('combobox');
 describe('RuleEditor grafana managed rules', () => {
   beforeEach(() => {
+    mockApi(server).eval({ results: {} });
+    server.listen();
     jest.clearAllMocks();
     contextSrv.isEditor = true;
     contextSrv.hasEditPermissionInFolders = true;
@@ -82,6 +89,14 @@ describe('RuleEditor grafana managed rules', () => {
     ]);
   });
 
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
   it('can create new grafana managed alert', async () => {
     const dataSources = {
       default: mockDataSource(

public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx

@@ -1,5 +1,7 @@
+import 'whatwg-fetch';
 import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import { setupServer } from 'msw/node';
 import React from 'react';
 import { renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
@@ -7,6 +9,7 @@ import { byText } from 'testing-library-selector';
 
 import { setDataSourceSrv } from '@grafana/runtime';
 import { contextSrv } from 'app/core/services/context_srv';
+import { mockApi } from 'app/features/alerting/unified/mockApi';
 import { AccessControlAction } from 'app/types';
 import { PromApplication } from 'app/types/unified-alerting-dto';
 
@@ -93,8 +96,12 @@ const mocks = {
 
 const getLabelInput = (selector: HTMLElement) => within(selector).getByRole('combobox');
 
+const server = setupServer();
+
 describe('RuleEditor recording rules', () => {
   beforeEach(() => {
+    mockApi(server).eval({ results: {} });
+    server.listen();
     jest.clearAllMocks();
     contextSrv.isEditor = true;
     contextSrv.hasEditPermissionInFolders = true;
@@ -113,6 +120,14 @@ describe('RuleEditor recording rules', () => {
     ]);
   });
 
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
   it('can create a new cloud recording rule', async () => {
     setDataSourceSrv(new MockDataSourceSrv(dataSources));
     mocks.getAllDataSources.mockReturnValue(Object.values(dataSources));

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

@@ -1,5 +1,7 @@
+import 'whatwg-fetch';
 import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { setupServer } from 'msw/node';
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { TestProvider } from 'test/helpers/TestProvider';
@@ -19,6 +21,7 @@ import {
 } from 'app/features/alerting/unified/api/ruler';
 import * as useContactPoints from 'app/features/alerting/unified/components/contact-points/useContactPoints';
 import * as dsByPermission from 'app/features/alerting/unified/hooks/useAlertManagerSources';
+import { mockApi } from 'app/features/alerting/unified/mockApi';
 import { MockDataSourceSrv, grantUserPermissions, mockDataSource } from 'app/features/alerting/unified/mocks';
 import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
 import { fetchRulerRulesIfNotFetchedYet } from 'app/features/alerting/unified/state/actions';
@@ -102,8 +105,12 @@ const mocks = {
   },
 };
 
+const server = setupServer();
+
 describe('Can create a new grafana managed alert unsing simplified routing', () => {
   beforeEach(() => {
+    mockApi(server).eval({ results: {} });
+    server.listen();
     jest.clearAllMocks();
     contextSrv.isEditor = true;
     contextSrv.hasEditPermissionInFolders = true;
@@ -135,6 +142,14 @@ describe('Can create a new grafana managed alert unsing simplified routing', ()
     });
   });
 
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
   const dataSources = {
     default: mockDataSource(
       {

public/app/features/alerting/unified/components/rules/RulesFilter.test.tsx

@@ -1,16 +1,20 @@
+import 'whatwg-fetch';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { setupServer } from 'msw/node';
 import React from 'react';
 import { TestProvider } from 'test/helpers/TestProvider';
 import { byLabelText, byRole } from 'testing-library-selector';
 
 import { locationService, setDataSourceSrv } from '@grafana/runtime';
+import { mockSearchApi } from 'app/features/alerting/unified/mockApi';
 
 import * as analytics from '../../Analytics';
 import { MockDataSourceSrv } from '../../mocks';
 
 import RulesFilter from './RulesFilter';
 
+const server = setupServer();
 jest.spyOn(analytics, 'logInfo');
 
 jest.mock('./MultipleDataSourcePicker', () => {
@@ -39,6 +43,16 @@ const ui = {
 
 beforeEach(() => {
   locationService.replace({ search: '' });
+  mockSearchApi(server).search([]);
+  server.listen({ onUnhandledRequest: 'error' });
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
 });
 
 describe('RulesFilter', () => {

public/app/features/alerting/unified/hooks/useAbilities.test.tsx

@@ -1,13 +1,17 @@
+import 'whatwg-fetch';
 import { renderHook, waitFor } from '@testing-library/react';
 import { createBrowserHistory } from 'history';
+import { setupServer } from 'msw/node';
 import React, { PropsWithChildren } from 'react';
 import { Router } from 'react-router-dom';
 import { TestProvider } from 'test/helpers/TestProvider';
 
+import { mockFolderApi } from 'app/features/alerting/unified/mockApi';
 import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types';
 import { AccessControlAction } from 'app/types';
+import { RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
 
-import { getCloudRule, getGrafanaRule, grantUserPermissions, mockDataSource } from '../mocks';
+import { getCloudRule, getGrafanaRule, grantUserPermissions, mockDataSource, mockFolder } from '../mocks';
 import { AlertmanagerProvider } from '../state/AlertmanagerContext';
 import { setupDataSources } from '../testSetup/datasources';
 import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
@@ -140,6 +144,16 @@ describe('AlertRule abilities', () => {
   it('should report that all actions are supported for a Grafana Managed alert rule', async () => {
     const rule = getGrafanaRule();
 
+    // TODO: Remove server mocking within test once server is run before all tests
+    const server = setupServer();
+    mockFolderApi(server).folder(
+      (rule.rulerRule as RulerGrafanaRuleDTO).grafana_alert.namespace_uid,
+      mockFolder({
+        accessControl: { [AccessControlAction.AlertingRuleUpdate]: false },
+      })
+    );
+    server.listen();
+
     const abilities = renderHook(() => useAllAlertRuleAbilities(rule), { wrapper: TestProvider });
 
     await waitFor(() => {
@@ -151,6 +165,8 @@ describe('AlertRule abilities', () => {
     });
 
     expect(abilities.result.current).toMatchSnapshot();
+
+    server.close();
   });
 
   it('should report no permissions while we are loading data for cloud rule', async () => {