测试配置

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

测试配置编辑器是否加载

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

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();
});