测试注释查询

简介

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

在许多情况下，注释查询的执行方式与普通数据查询不同，在这些情况下，我们建议你编写端到端测试来验证数据源注释是否按预期工作。

测试注释编辑器

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

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

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.*/ });
  }
});