测试变量查询

简介

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

测试自定义变量编辑器

在以下示例中，我们测试自定义变量编辑器在选择 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 响应 Promise。在上面的示例中，变量查询会经过数据查询端点，但您也可以使用 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']);
});