跳转到主要内容

测试配置

大多数数据源插件需要身份验证才能与第三方服务通信。配置连接细节的适当位置是在数据源配置页面上，并且该页面的详细信息必须是有效的，以便用于测试配置的健康检查端点按预期工作。

测试配置编辑器是否加载​

以下示例是一个简单的烟雾测试，用于验证数据源配置编辑器是否加载

configurationEditor.spec.ts
import { test, expect } from '@grafana/plugin-e2e';

test('should render config editor', async ({ createDataSourceConfigPage, readProvisionedDataSource, page }) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  await createDataSourceConfigPage({ type: ds.type });
  await expect(page.getByLabel('Path')).toBeVisible();
});

在后端数据源插件中测试配置​

后端数据源实现了一个 健康检查 端点，用于测试配置是否有效。在以下示例中，配置编辑器表单被填充了有效值，然后点击了“保存 & 测试”按钮。点击“保存 & 测试”会调用 Grafana 后端以保存配置，然后将配置传递到插件后端健康检查端点。只有当这两个调用都返回成功状态码时，测试才会成功。

configurationEditor.spec.ts
import { test, expect } from '@grafana/plugin-e2e';
import { MyDataSourceOptions, MySecureJsonData } from './src/types';

test('"Save & test" should be successful when configuration is valid', async ({
  createDataSourceConfigPage,
  readProvisionedDataSource,
  page,
}) => {
  const ds = await readProvisionedDataSource<MyDataSourceOptions, MySecureJsonData>({ fileName: 'datasources.yml' });
  const configPage = await createDataSourceConfigPage({ type: ds.type });
  await page.getByLabel('Path').fill(ds.jsonData.path);
  await page.getByLabel('API Key').fill(ds.secureJsonData.apiKey);
  await expect(configPage.saveAndTest()).toBeOK();
});

测试错误场景​

在某些情况下，当提供的配置无效时，您可能想捕获上游 API 的错误并返回一个有意义的错误消息给用户。

configurationEditor.spec.ts
test('"Save & test" should fail when configuration is invalid', async ({
  createDataSourceConfigPage,
  readProvisionedDataSource,
  page,
}) => {
  const ds = await readProvisionedDataSource<MyDataSourceOptions, MySecureJsonData>({ fileName: 'datasources.yml' });
  const configPage = await createDataSourceConfigPage({ type: ds.type });
  await page.getByLabel('Path').fill(ds.jsonData.path);
  await expect(configPage.saveAndTest()).not.toBeOK();
  await expect(configPage).toHaveAlert('error', { hasText: 'API key is missing' });
});

在前端数据源插件中测试配置​

与始终调用其自身后端进行健康检查的后端数据源插件不同，前端数据源插件可能需要调用第三方API来测试提供的配置是否有效。《DataSourceConfigPage.saveAndTest》方法允许您为测试数据源配置所使用的端点提供自定义路径。

configurationEditor.spec.ts
test('"Save & test" should be successful when configuration is valid', async ({
  createDataSourceConfigPage,
  readProvisionedDataSource,
  selectors,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  const configPage = await createDataSourceConfigPage({ type: ds.type });
  const healthCheckPath = `${selectors.apis.DataSource.proxy(configPage.datasource.uid)}/test`;
  await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' })
  // construct a custom health check url using the Grafana data source proxy
  const healthCheckPath = `${selectors.apis.DataSource.proxy(
    configPage.datasource.uid,
    configPage.datasource.id.toString()
  )}/third-party-service-path`;
  await expect(configPage.saveAndTest({ path: healthCheckPath })).toBeOK();
});

此外，您还可以断言页面显示成功提示框。

configurationEditor.spec.ts
test('"Save & test" should display success alert box when config is valid', async ({
  createDataSourceConfigPage,
  readProvisionedDataSource,
  page,
}) => {
  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  const configPage = await createDataSourceConfigPage({ type: ds.type });
  // construct a custom health check url using the Grafana data source proxy
  const healthCheckPath = `${selectors.apis.DataSource.proxy(
    configPage.datasource.uid,
    configPage.datasource.id.toString()
  )}/third-party-service-path`;
  await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' }));
  await expect(configPage.saveAndTest({ path: healthCheckPath })).toBeOK();
  await expect(configPage).toHaveAlert('success');
});

测试已配置的数据源​

有时您可能想打开现有数据源实例的配置编辑器以验证配置是否按预期工作。

test('provisioned data source with valid credentials should return a 200 status code', async ({
  readProvisionedDataSource,
  gotoDataSourceConfigPage,
}) => {
  const datasource = await readProvisionedDataSource({ fileName: 'datasources.yml' });
  const configPage = await gotoDataSourceConfigPage(datasource.uid);
  await expect(configPage.saveAndTest()).toBeOK();
});