跳到主要内容

测试变量查询

简介

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

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

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

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 响应 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']);
});