Add PoC for different MSW approach

public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.test.tsx

@@ -1,39 +1,20 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { setupServer } from 'msw/node';
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import { setBackendSrv } from '@grafana/runtime';
-import { backendSrv } from 'app/core/services/backend_srv';
+import { setupMswServer } from 'app/features/alerting/unified/mockApi';
+import { setAlertmanagerChoices } from 'app/features/alerting/unified/mocks/server/configure';
 import { configureStore } from 'app/store/configureStore';
 
 import { AlertmanagerChoice } from '../../../../plugins/datasource/alertmanager/types';
-import { mockAlertmanagerChoiceResponse } from '../mocks/alertmanagerApi';
 import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
 
 import { GrafanaAlertmanagerDeliveryWarning } from './GrafanaAlertmanagerDeliveryWarning';
+setupMswServer();
 
 describe('GrafanaAlertmanagerDeliveryWarning', () => {
-  const server = setupServer();
-
-  beforeAll(() => {
-    setBackendSrv(backendSrv);
-    server.listen({ onUnhandledRequest: 'error' });
-  });
-
-  afterAll(() => {
-    server.close();
-  });
-
-  beforeEach(() => {
-    server.resetHandlers();
-  });
-
   it('Should not render when the datasource is not Grafana', () => {
-    mockAlertmanagerChoiceResponse(server, {
-      alertmanagersChoice: AlertmanagerChoice.External,
-      numExternalAlertmanagers: 0,
-    });
+    setAlertmanagerChoices(AlertmanagerChoice.External, 0);
 
     const { container } = renderWithStore(
       <GrafanaAlertmanagerDeliveryWarning currentAlertmanager="custom-alertmanager" />
@@ -43,10 +24,7 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
   });
 
   it('Should render warning when the datasource is Grafana and using external AM', async () => {
-    mockAlertmanagerChoiceResponse(server, {
-      alertmanagersChoice: AlertmanagerChoice.External,
-      numExternalAlertmanagers: 1,
-    });
+    setAlertmanagerChoices(AlertmanagerChoice.External, 1);
 
     renderWithStore(<GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />);
 
@@ -54,10 +32,7 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
   });
 
   it('Should render warning when the datasource is Grafana and using All AM', async () => {
-    mockAlertmanagerChoiceResponse(server, {
-      alertmanagersChoice: AlertmanagerChoice.All,
-      numExternalAlertmanagers: 1,
-    });
+    setAlertmanagerChoices(AlertmanagerChoice.All, 1);
 
     renderWithStore(<GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />);
 
@@ -65,10 +40,7 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
   });
 
   it('Should render no warning when choice is Internal', async () => {
-    mockAlertmanagerChoiceResponse(server, {
-      alertmanagersChoice: AlertmanagerChoice.Internal,
-      numExternalAlertmanagers: 1,
-    });
+    setAlertmanagerChoices(AlertmanagerChoice.Internal, 1);
 
     const { container } = renderWithStore(
       <GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />
@@ -80,10 +52,7 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
   });
 
   it('Should render no warning when choice is All but no active AM instances', async () => {
-    mockAlertmanagerChoiceResponse(server, {
-      alertmanagersChoice: AlertmanagerChoice.All,
-      numExternalAlertmanagers: 0,
-    });
+    setAlertmanagerChoices(AlertmanagerChoice.All, 0);
 
     const { container } = renderWithStore(
       <GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />

public/app/features/alerting/unified/mockApi.ts

@@ -424,10 +424,10 @@ export function mockDashboardApi(server: SetupServer) {
   };
 }
 
+const server = setupServer();
+
 // Creates a MSW server and sets up beforeAll, afterAll and beforeEach handlers for it
 export function setupMswServer() {
-  const server = setupServer();
-
   beforeAll(() => {
     setBackendSrv(backendSrv);
     server.listen({ onUnhandledRequest: 'error' });
@@ -443,3 +443,5 @@ export function setupMswServer() {
 
   return server;
 }
+
+export default server;

public/app/features/alerting/unified/mocks/server/configure.ts

@@ -0,0 +1,15 @@
+import server from 'app/features/alerting/unified/mockApi';
+import { alertmanagerChoiceHandler } from 'app/features/alerting/unified/mocks/server/handlers';
+import { AlertmanagerChoice } from 'app/plugins/datasource/alertmanager/types';
+
+/**
+ * Makes the mock server respond in a way that matches the different behaviour associated with
+ * Alertmanager choices and the number of configured external alertmanagers
+ */
+export const setAlertmanagerChoices = (alertmanagersChoice: AlertmanagerChoice, numExternalAlertmanagers: number) => {
+  const response = {
+    alertmanagersChoice,
+    numExternalAlertmanagers,
+  };
+  server.use(alertmanagerChoiceHandler(response));
+};

public/app/features/alerting/unified/mocks/server/handlers.ts

@@ -0,0 +1,10 @@
+/**
+ * Contains definitions for all handlers that are required for test rendering of components within Alerting
+ */
+
+import { HttpResponse, http } from 'msw';
+
+import { defaultAlertmanagerChoiceResponse } from 'app/features/alerting/unified/mocks/alertmanagerApi';
+
+export const alertmanagerChoiceHandler = (response = defaultAlertmanagerChoiceResponse) =>
+  http.get('/api/v1/ngalert', () => HttpResponse.json(response));