测试注释查询

简介

注释用于在可视化中标记事件点，如“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.*/ });
  }
});