跳至主要内容

测试注释查询

介绍​

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

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

测试注释编辑器​

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

测试整个注释查询执行流程​

在接下来的示例中，我们将执行集成测试，测试插件的整个注释查询数据流。

注意

请注意，从 Grafana 11.0.0 开始，注释查询结果将渲染在警报组件中，因此在早期版本中使用 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.*/ });
  }
});