测试应用程序的配置编辑器

如果您的应用程序需要某种配置才能运行，应用程序配置页面会管理这些配置。本指南解释了如何创建应用程序特定的夹具（fixture），以便更轻松地编写测试并在不同测试之间共享逻辑。

测试应用程序配置页面

应用程序有一个用于测试配置有效性的健康检查端点。在以下示例中，当点击 保存并测试 按钮时，配置编辑器表单会填充有效值。

点击 保存并测试 按钮会调用 Grafana 后端保存配置，然后将配置传递给健康检查端点。只有当这两个调用都返回成功的状态码时，测试才算成功。

具有基本 UI 的配置页面

通过使用返回在 @grafana/plugin-e2e 中定义的默认 AppConfigPage 的导航函数来添加 appConfigPage 值。

例如

fixtures.ts

import { AppConfigPage, test as base } from '@grafana/plugin-e2e';
import pluginJson from '../src/plugin.json';

type AppTestFixture = {
  appConfigPage: AppConfigPage;
};

export const test = base.extend<AppTestFixture>({
  appConfigPage: async ({ gotoAppConfigPage }, use) => {
    const configPage = await gotoAppConfigPage({
      pluginId: pluginJson.id,
    });
    await use(configPage);
  },
});

export { expect } from '@grafana/plugin-e2e';

要使用该值，请从您的夹具（fixture）而不是 @grafana/plugin-e2e 中导入 test 和 expect。当您在测试函数中解构 appConfigPage 时，其余部分会自动导航到配置页面。

例如

configurationEditor.spec.ts

import { test, expect } from './fixtures.ts';

test('"Save & test" should be successful when configuration is valid', async ({ appConfigPage, page }) => {
  const saveButton = page.getByRole('button', { name: /Save & test/i });

  await page.getByRole('textbox', { name: 'API Key' }).fill('secret-api-key');
  await page.getByRole('textbox', { name: 'API Url' }).clear();
  await page.getByRole('textbox', { name: 'API Url' }).fill('http://www.my-awsome-grafana-app.com/api');

  const saveResponse = appConfigPage.waitForSettingsResponse();

  await saveButton.click();
  await expect(saveResponse).toBeOK();
});

具有复杂 UI 的配置页面

通过使用返回在 @grafana/plugin-e2e 中定义的默认 AppConfigPage 的导航函数来添加 appConfigPage。

例如

fixtures.ts

import { AppConfigPage, test as base } from '@grafana/plugin-e2e';
import pluginJson from '../src/plugin.json';

class MyAppConfigPage extends AppConfigPage {
  async fillApiKey(key: string): Promise<void> {
    await page.getByRole('textbox', { name: 'API Key' }).fill(key);
  }

  async fillApiUrl(url: string): Promise<void> {
    await page.getByRole('textbox', { name: 'API Url' }).clear();
    await page.getByRole('textbox', { name: 'API Url' }).fill(url);
  }

  async save(): Promise<void> {
    await page.getByRole('button', { name: /Save & test/i }).click();
  }
}

type AppTestFixture = {
  appConfigPage: MyAppConfigPage;
};

export const test = base.extend<AppTestFixture>({
  appConfigPage: async ({ page, selectors, grafanaVersion, request }, use, testInfo) => {
    const configPage = new MyAppConfigPage(
      { page, selectors, grafanaVersion, request, testInfo },
      {
        pluginId: pluginJson.id,
      }
    );
    await configPage.goto();
    await use(configPage);
  },
});

export { expect } from '@grafana/plugin-e2e';

要使用该值，请从您的夹具（fixture）而不是 @grafana/plugin-e2e 中导入 test 和 expect。当您在测试函数中解构 appConfigPage 时，测试会自动导航到配置页面。

例如

configurationEditor.spec.ts

import { test, expect } from './fixtures.ts';

test('"Save & test" should be successful when configuration is valid', async ({ appConfigPage, page }) => {
  await appConfigPage.fillApiKey('secret-api-key');
  await appConfigPage.fillApiUrl('http://www.my-awsome-grafana-app.com/api');

  const saveResponse = appConfigPage.waitForSettingsResponse();

  await appConfigPage.save();
  await expect(saveResponse).toBeOK();
});

测试错误场景

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

例如

configurationEditor.spec.ts

import { test, expect } from './fixtures.ts';

test('"Save & test" should fail when configuration is invalid', async ({ appConfigPage, page }) => {
  const saveButton = page.getByRole('button', { name: /Save & test/i });

  await page.getByRole('textbox', { name: 'API Url' }).clear();
  await page.getByRole('textbox', { name: 'API Url' }).fill('not a url');

  const saveResponse = appConfigPage.waitForSettingsResponse();

  await saveButton.click();

  await expect(appConfigPage).toHaveAlert('error');
  await expect(saveResponse).not.toBeOK();
});