Extensions: e2e test usePluginComponent hook (#91750)

* add simple test apps that use usePluginComponent hook and exposeComponent api * add e2e test * update readme * Update README.md * fix lint issue * pr feedback
2024-08-12 15:43:42 +02:00
parent b9cece8f9e
commit 2ed6ca360f
13 changed files with 162 additions and 13 deletions
@@ -0,0 +1,35 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+const testIds = {
+  container: 'main-app-body',
+  actions: {
+    button: 'action-button',
+  },
+  modal: {
+    container: 'container',
+    open: 'open-link',
+  },
+  appA: {
+    container: 'a-app-body',
+  },
+  appB: {
+    modal: 'b-app-modal',
+  },
+};
+
+const pluginId = 'myorg-extensionpoint-app';
+
+test('should extend the actions menu with a link to a-app plugin', async ({ page }) => {
+  await page.goto(`/a/${pluginId}/one`);
+  await page.getByTestId(testIds.actions.button).click();
+  await page.getByTestId(testIds.container).getByText('Go to A').click();
+  await page.getByTestId(testIds.modal.open).click();
+  await expect(page.getByTestId(testIds.appA.container)).toBeVisible();
+});
+
+test('should extend the actions menu with a command triggered from b-app plugin', async ({ page }) => {
+  await page.goto(`/a/${pluginId}/one`);
+  await page.getByTestId(testIds.actions.button).click();
+  await page.getByTestId(testIds.container).getByText('Open from B').click();
+  await expect(page.getByTestId(testIds.appB.modal)).toBeVisible();
+});
@@ -0,0 +1,38 @@
+import { expect, test } from '@grafana/plugin-e2e';
+
+const panelTitle = 'Link with defaults';
+const extensionTitle = 'Open from time series...';
+const testIds = {
+  modal: {
+    container: 'ape-modal-body',
+  },
+  mainPage: {
+    container: 'ape-main-page-container',
+  },
+};
+
+const linkOnClickDashboardUid = 'dbfb47c5-e5e5-4d28-8ac7-35f349b95946';
+const linkPathDashboardUid = 'd1fbb077-cd44-4738-8c8a-d4e66748b719';
+
+test('should add link extension (path) with defaults to time series panel', async ({ gotoDashboardPage, page }) => {
+  const dashboardPage = await gotoDashboardPage({ uid: linkPathDashboardUid });
+  const panel = await dashboardPage.getPanelByTitle(panelTitle);
+  await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
+  await expect(page.getByTestId(testIds.mainPage.container)).toBeVisible();
+});
+
+test('should add link extension (onclick) with defaults to time series panel', async ({ gotoDashboardPage, page }) => {
+  const dashboardPage = await gotoDashboardPage({ uid: linkOnClickDashboardUid });
+  const panel = await dashboardPage.getPanelByTitle(panelTitle);
+  await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
+  await expect(page.getByRole('dialog')).toContainText('Select query from "Link with defaults"');
+});
+
+test('should add link extension (onclick) with new title to pie chart panel', async ({ gotoDashboardPage, page }) => {
+  const panelTitle = 'Link with new name';
+  const extensionTitle = 'Open from piechart';
+  const dashboardPage = await gotoDashboardPage({ uid: linkOnClickDashboardUid });
+  const panel = await dashboardPage.getPanelByTitle(panelTitle);
+  await panel.clickOnMenuItem(extensionTitle, { parentItem: 'Extensions' });
+  await expect(page.getByRole('dialog')).toContainText('Select query from "Link with new name"');
+});
@@ -0,0 +1,9 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+const pluginId = 'myorg-componentconsumer-app';
+const exposedComponentTestId = 'exposed-component';
+
+test('should display component exposed by another app', async ({ page }) => {
+  await page.goto(`/a/${pluginId}`);
+  await expect(await page.getByTestId(exposedComponentTestId)).toHaveText('Hello World!');
+});