测试面板插件

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

测试数据

为了测试您的面板插件，您需要向其提供测试数据。Grafana 内置了 TestData 数据源，它可以用来模拟时间序列、日志、跟踪、注释等格式化的数据帧。

开始之前

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

测试面板选项

默认情况下，表格面板定义了一个名为 显示表头 的自定义面板选项。如果开关未启用，表格面板应从表格中删除表头。

以下测试验证了字段名（表头）默认情况下是可见的，并且在未选择 显示表头 选项时会被删除。

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框架中的数据类型定义或声明包括一个类型和一个格式。

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

"无数据"场景

如果数据源返回无数据，则向用户表明这一点是一种良好的做法。在以下代码片段中，我们测试了表格面板如何处理无数据场景。

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']);
});