测试注解查询

简介

注解用于在可视化图表上标记事件点，例如“AB 测试开始”或“营销活动开始”。 支持注解的数据源插件可用于查询注解事件。 （可选）您可以为数据源插件实现自定义注解编辑器，以帮助用户编写注解查询。

在许多情况下，注解查询的执行需要与正常数据查询不同的处理方式，在这些情况下，我们建议您编写端到端测试，以验证数据源注解是否按预期工作。

测试注解编辑器

如果您的数据源插件实现了自定义注解编辑器，您可以编写测试来验证该编辑器是否按预期工作。 如果您没有实现自定义编辑器，则插件将使用内置编辑器。 在这种情况下，没有必要编写测试。

以下示例是一个简单的冒烟测试，用于验证自定义注解编辑器是否加载

annotations.spec.ts

import { expect, test } from '@grafana/plugin-e2e';

test('should render annotations editor', async ({ annotationEditPage, page, readProvisionedDataSource }) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  await annotationEditPage.datasource.set(ds.name);
  await expect(page.getByRole('textbox', { name: 'Query Text' })).toBeVisible();
});

测试整个注解查询执行流程

在以下示例中，集成测试涵盖了插件的整个注解查询数据流

注意

请注意，从 Grafana 11.0.0 开始，注解查询结果将在 Alert 组件中呈现，因此在早期版本中使用 toHaveAlert 匹配器将不起作用。

annotations.spec.ts

import * as semver from 'semver';
import { expect, test } from '@grafana/plugin-e2e';

test('should run successfully and display a success alert box when query is valid', async ({
  annotationEditPage,
  page,
  selectors,
  readProvisionedDataSource,
  grafanaVersion,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  await annotationEditPage.datasource.set(ds.name);
  await page.waitForFunction(() => window.monaco);
  await annotationEditPage.getByGrafanaSelector(selectors.components.CodeEditor.container).click();
  await page.keyboard.insertText(`select time as time, humidity as text
  from dataset
  where $__timeFilter(time) and humidity > 95`);
  await expect(annotationEditPage.runQuery()).toBeOK();
  if (semver.gte(grafanaVersion, '11.0.0')) {
    await expect(annotationEditPage).toHaveAlert('success');
  }
});

测试错误场景

如果插件中发生错误，或者上游 API 返回错误，您可能需要捕获该错误并向用户返回有意义的错误消息。

annotations.spec.ts

test('should fail and display an error alert box when time field is missing in the response', async ({
  annotationEditPage,
  page,
  selectors,
  readProvisionedDataSource,
  grafanaVersion,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  await annotationEditPage.datasource.set(ds.name);
  await page.waitForFunction(() => window.monaco);
  await annotationEditPage.getByGrafanaSelector(selectors.components.CodeEditor.container).click();
  await page.keyboard.insertText(`select humidity as text
  from dataset
  where humidity > 95`);
  await expect(annotationEditPage.runQuery()).not.toBeOK();
  if (semver.gte(grafanaVersion, '11.0.0')) {
    await expect(annotationEditPage).toHaveAlert('error', { hasText: 'Time field is missing' });
  }
});

在已配置的仪表板中测试注解

有时您可能想要打开现有仪表板的注解编辑页面，并运行注解查询以确保一切按预期工作。

test('annotation query in provisioned dashboard should return a 200 response', async ({
  readProvisionedDashboard,
  gotoAnnotationEditPage,
  grafanaVersion,
}) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
  const annotationEditPage = await gotoAnnotationEditPage({ dashboard, id: '1' });
  await expect(annotationEditPage.runQuery()).toBeOK();
  if (semver.gte(grafanaVersion, '11.0.0')) {
    await expect(annotationEditPage).toHaveAlert('success', { hasText: /2 events.*/ });
  }
});