Brojd/add e2e test for webhooks creation (#3709)

# What this PR does

## Which issue(s) this PR fixes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

grafana-plugin/e2e-tests/outgoingWebhooks/createAdvancedWebhook.test.ts

@@ -0,0 +1,46 @@
+import { test } from '../fixtures';
+import { clickButton, generateRandomValue } from '../utils/forms';
+import { createIntegration } from '../utils/integrations';
+import { goToOnCallPage } from '../utils/navigation';
+import { checkWebhookPresenceInTable } from '../utils/outgoingWebhooks';
+
+test('create advanced webhook and check it is displayed on the list correctly', async ({ adminRolePage: { page } }) => {
+  const WEBHOOK_NAME = generateRandomValue();
+  const WEBHOOK_INTEGRATION_NAME = generateRandomValue();
+  const WEBHOOK_URL = 'https://example.com';
+
+  await createIntegration({ page, integrationSearchText: 'Webhook', integrationName: WEBHOOK_INTEGRATION_NAME });
+
+  await goToOnCallPage(page, 'outgoing_webhooks');
+
+  await clickButton({ page, buttonText: 'New Outgoing Webhook' });
+  await page.getByText('Advanced').first().click();
+  await page.waitForTimeout(2000);
+
+  const webhooksFormDivs = page.locator('#OutgoingWebhook div');
+
+  // Enter webhook name
+  await webhooksFormDivs.locator('[name=name]').fill(WEBHOOK_NAME);
+
+  // Select team
+  await page.getByLabel('New Outgoing Webhook').getByRole('img').nth(1).click(); // Open team dropdown
+  await page.getByLabel('Select options menu').getByText('No team').click(); // Select "No team"
+
+  // Select trigger type
+  await webhooksFormDivs.filter({ hasText: 'Trigger Type' }).getByRole('img').click();
+  await page.getByLabel('Select options menu').getByText('Resolved', { exact: true }).click();
+
+  // Select integration
+  await webhooksFormDivs.filter({ hasText: 'Integrations' }).getByText('Choose').click();
+  await page.keyboard.insertText(WEBHOOK_INTEGRATION_NAME.slice(0, -1));
+  await page.waitForTimeout(1000);
+  await page.getByText(WEBHOOK_INTEGRATION_NAME).click();
+
+  // Enter webhook URL
+  await webhooksFormDivs.locator('.monaco-editor').first().click();
+  await page.keyboard.insertText(WEBHOOK_URL);
+
+  await clickButton({ page, buttonText: 'Create Webhook' });
+
+  await checkWebhookPresenceInTable({ page, webhookName: WEBHOOK_NAME, expectedTriggerType: 'Resolved' });
+});

grafana-plugin/e2e-tests/outgoingWebhooks/createSimpleWebhook.test.ts

@@ -0,0 +1,24 @@
+import { test } from '../fixtures';
+import { clickButton, generateRandomValue } from '../utils/forms';
+import { goToOnCallPage } from '../utils/navigation';
+import { checkWebhookPresenceInTable } from '../utils/outgoingWebhooks';
+
+test('create simple webhook and check it is displayed on the list correctly', async ({ adminRolePage: { page } }) => {
+  const WEBHOOK_NAME = generateRandomValue();
+  const WEBHOOK_URL = 'https://example.com';
+  await goToOnCallPage(page, 'outgoing_webhooks');
+
+  await clickButton({ page, buttonText: 'New Outgoing Webhook' });
+
+  await page.getByText('Simple').first().click();
+
+  await page.waitForTimeout(2000);
+
+  await page.keyboard.insertText(WEBHOOK_URL);
+  await page.locator('[name=name]').fill(WEBHOOK_NAME);
+  await page.getByLabel('New Outgoing Webhook').getByRole('img').nth(1).click(); // Open team dropdown
+  await page.getByLabel('Select options menu').getByText('No team').click();
+  await clickButton({ page, buttonText: 'Create Webhook' });
+
+  await checkWebhookPresenceInTable({ page, webhookName: WEBHOOK_NAME, expectedTriggerType: 'Escalation step' });
+});

grafana-plugin/e2e-tests/utils/navigation.ts

@@ -2,7 +2,14 @@ import type { Page } from '@playwright/test';
 
 import { BASE_URL } from './constants';
 
-type OnCallPage = 'alert-groups' | 'integrations' | 'escalations' | 'schedules' | 'users' | 'insights';
+type OnCallPage =
+  | 'alert-groups'
+  | 'integrations'
+  | 'escalations'
+  | 'schedules'
+  | 'outgoing_webhooks'
+  | 'users'
+  | 'insights';
 
 const _goToPage = async (page: Page, url = '') => page.goto(`${BASE_URL}${url}`);
 

grafana-plugin/e2e-tests/utils/outgoingWebhooks.ts

@@ -0,0 +1,28 @@
+import { Page, expect } from '@playwright/test';
+
+export const checkWebhookPresenceInTable = async ({
+  page,
+  webhookName,
+  expectedTriggerType,
+}: {
+  page: Page;
+  webhookName: string;
+  expectedTriggerType: string;
+}) => {
+  // filter table to show only created schedule
+  await page
+    .locator('div')
+    .filter({ hasText: /^Search or filter results\.\.\.$/ })
+    .nth(1)
+    .click();
+  await page.keyboard.insertText(webhookName);
+  await page.keyboard.press('Enter');
+  await page.waitForTimeout(2000);
+
+  // webhooks table displays details created webhook
+  const webhooksTable = page.getByTestId('outgoing-webhooks-table');
+  await expect(webhooksTable.getByRole('cell', { name: webhookName })).toBeVisible();
+  await expect(webhooksTable.getByRole('cell', { name: expectedTriggerType })).toBeVisible();
+  await expect(webhooksTable.getByRole('cell', { name: webhookName })).toBeVisible();
+  await expect(webhooksTable.getByRole('cell', { name: 'No team' })).toBeVisible();
+};

grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx

@@ -191,7 +191,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
               />
             )}
 
-            <div className={cx('root')}>
+            <div className={cx('root')} data-testid="outgoing-webhooks-table">
               {this.renderOutgoingWebhooksFilters()}
               <GTable
                 emptyText={webhooks ? 'No outgoing webhooks found' : 'Loading...'}