Playwright tests for datasource plugins examples (#315)

* WIP

* datasource-logs e2e tests

* WIP http-datasource

* WIP: backend mock server

* Update integration tests action

* Fix action

* Update action

* Use github output

* Add e2e script

* Stop mockserver after canary tests

* e2e tests for streaming-backend-datasource

* e2e tests for streaming-websocket-datasource

* return datasource-http test back

* fix ci

* WIP test CI

* fix CI build

* WIP fix the build

* skip queryeditpr tests for datasource-streamiing-backend-websocket

* return datasource.go to iitial state

* change id to testid for datasource-logs tests

---------

Co-authored-by: Esteban Beltran <[email protected]>

examples/datasource-logs/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
+    "e2e": "playwright test",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
@@ -19,6 +20,8 @@
     "@babel/core": "^7.21.4",
     "@grafana/eslint-config": "^7.0.0",
     "@grafana/tsconfig": "1.3.0-rc1",
+    "@grafana/plugin-e2e": "1.3.1",
+    "@playwright/test": "^1.43.0",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",

examples/datasource-logs/playwright.config.ts

@@ -0,0 +1,52 @@
+import type { PluginOptions } from '@grafana/plugin-e2e';
+import { defineConfig, devices } from '@playwright/test';
+import { dirname } from 'node:path';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig<PluginOptions>({
+  testDir: './tests',
+  /* 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: [
+    // 1. Login to Grafana and store the cookie on disk for use in other tests.
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    // 2. Run tests in Google Chrome. Every test will start authenticated as admin user.
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/admin.json' },
+      dependencies: ['auth'],
+    },
+  ],
+});

examples/datasource-logs/provisioning/datasources/datasources.yml

@@ -0,0 +1,15 @@
+apiVersion: 1
+
+datasources:
+  - name: Datasource logs
+    type: example-logs-datasource
+    access: proxy
+    isDefault: true
+    orgId: 1
+    version: 1
+    editable: true
+    jsonData:
+      path: '/resources'
+      defaultTimeField: 
+    secureJsonData: 
+      apiKey: 'api-key'

examples/datasource-logs/src/components/QueryEditor.tsx

@@ -18,10 +18,21 @@ export function QueryEditor({ query, onChange }: Props) {
   return (
     <Stack gap={0}>
       <InlineField label="Query" labelWidth={20} tooltip="Query text">
-        <Input onChange={onQueryTextChange} value={query.queryText || ''} width={70} />
+        <Input
+          data-testid="query-editor-query-text"
+          onChange={onQueryTextChange}
+          value={query.queryText || ''}
+          width={70}
+        />
       </InlineField>
       <InlineField label="Log limit" labelWidth={20} tooltip="Log limit">
-        <Input onChange={onQueryLimitChange} value={query.limit || 100} width={20} type="number" />
+        <Input
+          data-testid="query-editor-log-limit"
+          onChange={onQueryLimitChange}
+          value={query.limit || 100}
+          width={20}
+          type="number"
+        />
       </InlineField>
     </Stack>
   );

examples/datasource-logs/src/plugin.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "datasource",
-  "name": "example-logs",
-  "id": "grafana-logs-datasource",
+  "name": "grafana-logs-datasource",
+  "id": "example-logs-datasource",
   "metrics": true,
   "logs": true,
   "streaming": true,

examples/datasource-logs/src/types.ts

@@ -1,4 +1,4 @@
-import { DataQuery } from '@grafana/schema'
+import { DataQuery } from '@grafana/schema';
 
 export interface MyQuery extends DataQuery {
   queryText: string;
@@ -7,6 +7,10 @@ export interface MyQuery extends DataQuery {
 
 export interface MyDataSourceOptions {}
 
+export interface DataSourceResponse {
+  datapoints: string[];
+}
+
 export const DEFAULT_QUERY: Partial<MyQuery> = {
   queryText: '',
   // default limit is 100

examples/datasource-logs/tests/configEditor.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@grafana/plugin-e2e';
+import { MyQuery } from '../src/types';
+
+test('"Save & test" should display success alert box when config is valid', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  page,
+  selectors,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+
+  await configPage.getByGrafanaSelector(selectors.pages.DataSource.saveAndTest).click();
+  await expect(configPage).toHaveAlert('success');
+});

examples/datasource-logs/tests/queryEditor.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('logs should show certain values', async ({ page, selectors, panelEditPage, readProvisionedDataSource }) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.setVisualization('Table');
+  await panelEditPage.getQueryEditorRow('A').getByTestId('query-editor-query-text', { exact: true }).fill('number');
+  await panelEditPage.getQueryEditorRow('A').getByTestId('query-editor-log-limit', { exact: true }).fill('10');
+  const refreshPanelButton = panelEditPage.getByGrafanaSelector(selectors.components.RefreshPicker.runButtonV2, {
+    root: panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.General.content),
+  });
+  await refreshPanelButton.click();
+  await expect(panelEditPage.panel.data).toContainText(['number=']);
+});

examples/datasource-streaming-backend-websocket/streaming-backend-websocket-plugin/docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3.0'
 
 services:
   grafana:
-    container_name: 'example-websocket-datasource'
+    container_name: 'example-websocket-backend-datasource'
     build:
       context: ./.config
       args:
@@ -13,8 +13,10 @@ services:
     volumes:
       - ./dist:/var/lib/grafana/plugins/example-websocket-datasource
       - ./provisioning:/etc/grafana/provisioning
-  websocket-server:
-    container_name: 'websocket-server-example'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+  mockserver:
+    container_name: 'mockserver-streamingbackend-datasource'
     build:
       context: ../websocket-server
     ports: