测试变量查询

简介

变量查询允许用户查询数据源以加载类似指标名称的数据列表。然后您可以在查询中引用变量，使仪表板更具交互性和动态性。如果您的数据源插件实现了自定义变量支持 API，您可能希望使用 variableEditPage 验证您的插件变量实现是否按预期工作。

测试自定义变量编辑器是否加载

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

customVariableEditor.spec.ts

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

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

单独测试自定义变量编辑器

在以下示例中，我们测试当选择 ListByDimensions 查询类型时，自定义变量编辑器是否渲染特定字段

customVariableEditor.spec.ts

test('should display Dimensions field only if ListByDimensions is selected', async ({
  variableEditPage,
  page,
  readProvisionedDataSource,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
  await variableEditPage.setVariableType('Query');
  await variableEditPage.datasource.set(ds.name);
  const dimensionField = variableEditPage.getByGrafanaSelector('Dimensions');
  await expect(dimensionField).not.toBeVisible();
  await variableEditPage.getByLabel('Query type').fill('ListByDimensions');
  await page.keyboard.press('Enter');
  await expect(dimensionField).toBeVisible();
});

测试变量查询执行流程

在下一个示例中，我们执行一个集成测试，测试插件整个变量查询数据流。对于成功的变量查询，结果选项将显示在变量编辑页面的底部。您可以使用匹配器 toDisplayPreviews 来断言期望的预览已显示。

警告

虽然调用第三方API在端到端测试中可能很有用，但它也可能将安全问题和其他问题引入您的CI流水线。您应该始终仔细考虑，并考虑使用模拟。

customVariableEditor.spec.ts

test('custom variable query runner should return data when query is valid', async ({
  variableEditPage,
  page,
  readProvisionedDataSource,
  selectors,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
  await variableEditPage.setVariableType('Query');
  await variableEditPage.datasource.set(ds.name);
  const codeEditorSelector = selectors.components.CodeEditor.container;
  await variableEditPage.getByGrafanaSelector(codeEditorSelector).click();
  await page.keyboard.insertText('select distinct(environment) from dataset');
  const queryDataRequest = variableEditPage.waitForQueryDataRequest();
  await variableEditPage.runQuery();
  await queryDataRequest;
  await expect(variableEditPage).toDisplayPreviews(['test', /staging-.*/]);
});

注意

与panelEditPage.refreshPanel方法不同，variableEditPage.runQuery方法不会返回Playwright响应承诺。在上面的示例中，变量查询通过数据查询端点进行，但您也可以使用Playwright的waitForResponse方法并指定任何选择的端点。

如果您只想测试变量查询运行器而不测试自定义变量编辑器，您可以使用已配置仪表板中的现有变量查询。

customVariableEditor.spec.ts

test('should return data when valid query from provisioned dashboard is used', async ({
  readProvisionedDashboard,
  gotoVariableEditPage,
}) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
  const variableEditPage = await gotoVariableEditPage({ dashboard, id: '2' });
  await variableEditPage.runQuery();
  await expect(variableEditPage).toDisplayPreviews(['staging', 'test']);
});