Add plugin e2e

.gitignore

@@ -6,4 +6,9 @@ coverage/**
 cypress/report.json
 cypress/screenshots/actual
 cypress/videos/
-dev/
+dev/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

e2e/frontend/configEditor.spec.ts

@@ -0,0 +1,41 @@
+import { expect, test } from '@grafana/plugin-e2e';
+
+const SENTRY_ORG_SLUG = 'mock-org-slug';
+const SENTRY_AUTH_TOKEN = 'mock-token';
+
+test.describe('Test config editor', () => {
+  test('empty configuration should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('invalid or empty organization slug');
+  });
+
+  test('empty auth token should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('empty or invalid auth token found');
+  });
+
+  test('invalid auth token should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+    await page.getByPlaceholder('Sentry Authentication Token').fill('invalid-auth-token');
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('Get \"https://sentry.io/api/0/organizations/mock-org-slug/projects/\": tls: failed to verify certificate: x509: OSStatus -26276');
+  });
+
+  test('valid configuration should return valid health check', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    configPage.mockHealthCheckResponse({ status: 200 });
+
+    await page.getByPlaceholder('https://sentry.io').fill('https://sentry.io');
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+    await page.getByPlaceholder('Sentry Authentication Token').fill(SENTRY_AUTH_TOKEN);
+
+    await expect(configPage.saveAndTest()).toBeOK();
+  });
+});

e2e/frontend/variableEditor.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@grafana/plugin-e2e';
+
+const SENTRY_LABELS = [];
+
+test.describe('Sentry variables', () => {
+    test('add and edit variables', async ({ variableEditPage, page }) => {
+        variableEditPage.mockResourceResponse('api/v1/labels?*', SENTRY_LABELS);
+        await variableEditPage.datasource.set('grafana-sentry-datasource');
+        await variableEditPage.getByTestIdOrAriaLabel('Select your sentry variable query type here').click();
+        await page.keyboard.press('Tab');
+        await variableEditPage.runQuery();
+    });
+});
+
+// sample test:
+
+//   variableEditPage.mockResourceResponse('api/v1/labels?*', prometheusLabels);
+//   await variableEditPage.datasource.set('gdev-prometheus');
+//   await variableEditPage.getByTestIdOrAriaLabel('Query type').fill('Label names');
+//   await page.keyboard.press('Tab');
+//   await variableEditPage.runQuery();
+//   await expect(
+//     variableEditPage,
+//     formatExpectError('Expected variable edit page to display certain label names after query execution')
+//   ).toDisplayPreviews(prometheusLabels.data);
+

package.json

@@ -30,6 +30,7 @@
     "@grafana/runtime": "10.4.1",
     "@grafana/schema": "10.4.1",
     "@grafana/ui": "10.4.1",
+    "@playwright/test": "^1.42.1",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -41,6 +42,7 @@
     "@grafana/e2e": "10.4.1",
     "@grafana/e2e-selectors": "10.4.1",
     "@grafana/eslint-config": "^7.0.0",
+    "@grafana/plugin-e2e": "^0.25.1",
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.7",

playwright.config.ts

@@ -0,0 +1,46 @@
+import { dirname } from 'path';
+import { defineConfig, devices } from '@playwright/test';
+import type { PluginOptions } from '@grafana/plugin-e2e';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+export default defineConfig<PluginOptions>({
+  testDir: './e2e/frontend',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'run-tests',
+      use: {
+        ...devices['Desktop Chrome'],
+        // @grafana/plugin-e2e writes the auth state to this file,
+        // the path should not be modified
+        storageState: 'playwright/.auth/admin.json',
+      },
+      dependencies: ['auth'],
+    }
+  ],
+});