add e2e test that we have unique integrations (#1579)

related to https://github.com/grafana/oncall-private/pull/1692

grafana-plugin/integration-tests/integrations/uniqueIntegrationNames.test.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+import { configureOnCallPlugin } from '../utils/configurePlugin';
+import { openCreateIntegrationModal } from '../utils/integrations';
+
+test.beforeEach(async ({ page }) => {
+  await configureOnCallPlugin(page);
+});
+
+test('integrations have unique names', async ({ page }) => {
+  await openCreateIntegrationModal(page);
+
+  const integrationNames = await page.getByTestId('integration-display-name').allInnerTexts();
+  const uniqueLowercasedIntegrationNames = new Set(integrationNames.map((elem) => elem.toLowerCase()));
+
+  expect(uniqueLowercasedIntegrationNames.size).toEqual(integrationNames.length);
+});

grafana-plugin/integration-tests/utils/integrations.ts

@@ -2,19 +2,28 @@ import { Page } from '@playwright/test';
 import { clickButton, fillInInput, selectDropdownValue } from './forms';
 import { goToOnCallPage } from './navigation';
 
-export const createIntegrationAndSendDemoAlert = async (
-  page: Page,
-  integrationName: string,
-  escalationChainName: string
-): Promise<void> => {
+const CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR = 'div[data-testid="create-integration-modal"]';
+
+export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
   // go to the integrations page
   await goToOnCallPage(page, 'integrations');
 
   // open the create integration modal
   (await page.waitForSelector('text=New integration to receive alerts')).click();
 
+  // wait for it to pop up
+  await page.waitForSelector(CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR);
+};
+
+export const createIntegrationAndSendDemoAlert = async (
+  page: Page,
+  integrationName: string,
+  escalationChainName: string
+): Promise<void> => {
+  await openCreateIntegrationModal(page);
+
   // create a webhook integration
-  (await page.waitForSelector('div[data-testid="create-integration-modal"] >> text=Webhook')).click();
+  (await page.waitForSelector(`${CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR} >> text=Webhook`)).click();
 
   // wait for the integrations settings modal to open up... and then close it
   await clickButton({ page, buttonText: 'Open Escalations Settings' });

grafana-plugin/src/components/Text/Text.tsx

@@ -52,6 +52,7 @@ const Text: TextInterface = (props) => {
     hidden = false,
     editModalTitle = 'New value',
     style,
+    ...rest
   } = props;
 
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
@@ -88,6 +89,7 @@ const Text: TextInterface = (props) => {
         keyboard,
       })}
       style={style}
+      {...rest}
     >
       {hidden ? PLACEHOLDER : children}
       {editable && (

grafana-plugin/src/containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer.tsx

@@ -79,7 +79,9 @@ const CreateAlertReceiveChannelContainer = observer((props: CreateAlertReceiveCh
                 </div>
                 <div className={cx('title')}>
                   <VerticalGroup spacing="none">
-                    <Text strong>{alertReceiveChannelChoice.display_name}</Text>
+                    <Text strong data-testid="integration-display-name">
+                      {alertReceiveChannelChoice.display_name}
+                    </Text>
                     <Text type="secondary" size="small">
                       {alertReceiveChannelChoice.short_description}
                     </Text>