测试面板插件

面板插件允许您以不同的方式可视化数据。本指南向您展示如何使用 @grafana/plugin-e2e 测试您的面板插件是否能在多个 Grafana 版本中正确渲染数据。

测试数据

要能够测试您的面板插件，您需要使用测试数据来馈送它。Grafana 附带 TestData 数据源，该数据源可用于模拟格式化为时间序列、日志、跟踪、注释等的 数据帧。

开始之前

要编写类似于本指南中的端到端测试，您需要使用配置来配置 TestData 数据源。如果您还没有阅读有关如何 设置资源 的指南，请先阅读。

测试面板选项

表格面板默认定义了一个名为 Show table header 的自定义面板选项。如果禁用该开关，则表格面板应从表格中删除标题。

以下测试验证字段名称（标题）默认情况下是否显示，以及在未选择 Show table header 选项时是否已删除。

test('should hide headers when "Show table header" is unchecked', async ({ panelEditPage, selectors }) => {
  await panelEditPage.datasource.set('gdev-testdata');
  await panelEditPage.setVisualization('Table');
  await expect(await panelEditPage.panel.fieldNames.count()).toBeGreaterThan(0);
  const showTableHeaderSwitch = panelEditPage
    .getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Table Show table header'))
    .getByLabel('Toggle switch');
  await panelEditPage.collapseSection('Table');
  await showTableHeaderSwitch.uncheck();
  await expect(panelEditPage.panel.fieldNames).not.toBeVisible();
});

测试面板如何处理不同数据类型

数据帧模型在设计上是灵活的。目的是允许数据源根据各种不同的 数据类型 返回查询响应。Grafana 框架中的数据类型定义或声明包括种类和格式。

面板不必支持每种数据类型。但是，如果您的面板应该支持某种数据类型，我们建议您编写端到端测试以验证它是否按预期工作。

“无数据”场景

如果数据源返回 No Data，则最好向用户指示这一点。在以下代码段中，我们测试表格面板如何处理 No Data 场景。

test('should display "No data" in case no data response was passed to the panel', async ({ panelEditPage, page }) => {
  await panelEditPage.datasource.set('gdev-testdata');
  await panelEditPage.setVisualization('Table');
  await page.getByLabel('Scenario').last().click();
  await page.getByText('No Data Points').click();
  await panelEditPage.refreshPanel();
  await expect(panelEditPage.panel.locator).toContainText('No data');
});

多个帧

表格面板一次只能显示一个帧。如果将多个帧传递到面板（源自同一查询或来自不同查询），则面板仅显示第一个帧。

此外，面板中还将有一个下拉菜单，允许用户在不同的帧之间切换。此行为特定于表格面板。

以下代码段测试如果将两个帧传递到面板，则插件是否显示具有两个值的下列菜单。

test('should display dropdown with two values when two frames are passed to the panel', async ({
  panelEditPage,
  page,
  selectors,
}) => {
  await panelEditPage.datasource.set('gdev-testdata');
  await panelEditPage.setVisualization('Table');
  await panelEditPage.getQueryEditorRow('A').getByLabel('Alias').fill('a');
  await page.getByText('Add query').click();
  await panelEditPage.getQueryEditorRow('B').getByLabel('Alias').fill('b');
  await panelEditPage.refreshPanel();
  await panelEditPage.panel.locator.getByRole('combobox').click();
  await expect(panelEditPage.getByTestIdOrAriaLabel(selectors.components.Select.option)).toHaveText(['a', 'b']);
});