diff --git a/grafana-plugin/e2e-tests/outgoingWebhooks/createAdvancedWebhook.test.ts b/grafana-plugin/e2e-tests/outgoingWebhooks/createAdvancedWebhook.test.ts new file mode 100644 index 00000000..ac7e6e39 --- /dev/null +++ b/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' }); +}); diff --git a/grafana-plugin/e2e-tests/outgoingWebhooks/createSimpleWebhook.test.ts b/grafana-plugin/e2e-tests/outgoingWebhooks/createSimpleWebhook.test.ts new file mode 100644 index 00000000..9ecaf8f5 --- /dev/null +++ b/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' }); +}); diff --git a/grafana-plugin/e2e-tests/utils/navigation.ts b/grafana-plugin/e2e-tests/utils/navigation.ts index 008951c1..b0423a48 100644 --- a/grafana-plugin/e2e-tests/utils/navigation.ts +++ b/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}`); diff --git a/grafana-plugin/e2e-tests/utils/outgoingWebhooks.ts b/grafana-plugin/e2e-tests/utils/outgoingWebhooks.ts new file mode 100644 index 00000000..081b22cc --- /dev/null +++ b/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(); +}; diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 3a6a79c3..bf7cef69 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -191,7 +191,7 @@ class OutgoingWebhooks extends React.Component )} -
+
{this.renderOutgoingWebhooksFilters()}