跳转到主要内容

配置必要的资源

简介​

在许多情况下，您需要在 Grafana 中配置某些资源才能运行端到端测试。例如，为了测试面板插件如何显示数据，您需要配置一个数据源以查询和返回该数据。本指南涵盖了如何通过 配置 来设置这些资源。

测试隔离​

测试隔离 是 Playwright 测试的一个核心部分。关于这一点，我们建议独立测试插件功能，而不是通过具有某些步骤依赖于前一步的复杂流程来运行它们。

一个具体例子​

假设您想测试数据源插件中的模板变量插值。为了在 DataSource 文件中进行任何插值，必须定义一个模板变量。由于目标是测试变量插值，我们不想在测试代码中创建模板变量。相反，我们将使用一个已配置了模板变量的仪表板进行测试。

在以下示例中，我们导航到一个已配置的仪表盘。该仪表盘包含一个多值模板变量 env，其值为 test 和 prod。我们添加一个新的面板并设置一个 SQL 查询，该查询引用了 env 变量。然后我们监视查询数据请求，断言它使用了与模板变量关联的展开值。

test('should expand multi-valued variable before calling backend', async ({
  gotoDashboardPage,
  readProvisionedDashboard,
}) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'variable.json' });
  const dashboardPage = await gotoDashboardPage(dashboard);
  const panelEditPage = await dashboardPage.addPanel();
  const queryDataSpy = panelEditPage.waitForQueryDataRequest((request) =>
    (request.postData() ?? '').includes(`select * from dataset where env in ('test', 'prod')"`)
  );
  await page.getByLabel('Query').fill('select * from dataset where env in (${env:singlequote})');
  await panelEditPage.refreshPanel();
  await expect(await queryDataSpy).toBeTruthy();
});

配置必要资源​

您可以使用 配置 来配置资源，例如仪表盘和数据源。

注意

如果在 CI 中运行端到端测试需要配置，您可能需要从您插件的 .gitignore 文件中删除 provisioning 文件夹。

危险

请小心不要将机密信息提交到公共存储库。使用 环境变量插值 处理敏感数据。

读取配置文件​

@grafana/plugin-e2e 工具提供了一些固定装置，允许您读取放置在 provisioning 文件夹中的文件。

readProvisionedDataSource 固定装置​

readProvisionedDataSource 固定装置允许您从您插件的 provisioning/datasources 文件夹中读取一个文件。这为您提供了类型定义，并且它还允许您将数据源配置保存在一个地方。

configEditor.spec.ts
const datasource = readProvisionedDataSource<JsonData, SecureJsonData>({ fileName: 'datasources.yml' });
await page.getByLabel('API Key').fill(datasource.secureJsonData.apiKey);
queryEditor.spec.ts
const datasource = readProvisionedDataSource({ fileName: 'datasources.yml' });
await panelEditPage.datasource.set(datasource.name);

readProvisionedDashboard 固定装置​

readProvisionedDashboard 固定装置允许您从您的 provisioning/dashboards 文件夹中读取仪表板 JSON 文件的内容。当您在导航到配置仪表盘且不想硬编码仪表板 UID 时，这可能很有用。

variableEditPage.spec.ts
const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
const variableEditPage = new VariableEditPage(
  { request, page, selectors, grafanaVersion, testInfo },
  { dashboard, id: '2' }
);
await variableEditPage.goto();

readProvisionedAlertRule 固定装置​

readProvisionedAlertRule 固定装置允许您从您插件的 provisioning/alerting 文件夹中读取一个文件。

alerting.spec.ts
test('should evaluate to true when loading a provisioned query that is valid', async ({
  gotoAlertRuleEditPage,
  readProvisionedAlertRule,
}) => {
  const alertRule = await readProvisionedAlertRule({ fileName: 'alerts.yml' });
  const alertRuleEditPage = await gotoAlertRuleEditPage(alertRule);
  await expect(alertRuleEditPage.evaluate()).toBeOK();
});