mirror of https://github.com/grafana/grafana.git
121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
import { test, expect } from '@grafana/plugin-e2e';
|
|
|
|
import {
|
|
getGroupByInput,
|
|
getGroupByOptions,
|
|
getGroupByRestoreButton,
|
|
getGroupByValues,
|
|
getMarkdownHTMLContent,
|
|
} from './cuj-selectors';
|
|
import { prepareAPIMocks } from './utils';
|
|
|
|
test.use({
|
|
featureToggles: {
|
|
scopeFilters: true,
|
|
groupByVariable: true,
|
|
reloadDashboardsOnParamsChange: true,
|
|
},
|
|
});
|
|
|
|
const DASHBOARD_UNDER_TEST = 'cuj-dashboard-1';
|
|
|
|
test.describe(
|
|
'GroupBy CUJs',
|
|
{
|
|
tag: ['@dashboard-cujs'],
|
|
},
|
|
() => {
|
|
test('Groupby data on a dashboard', async ({ page, selectors, gotoDashboardPage }) => {
|
|
prepareAPIMocks(page);
|
|
const groupByOptions = getGroupByOptions(page);
|
|
const groupByValues = getGroupByValues(page);
|
|
const groupByRestoreButton = getGroupByRestoreButton(page);
|
|
|
|
await test.step('1.Apply a groupBy across one or mulitple dimensions', async () => {
|
|
const dashboardPage = await gotoDashboardPage({ uid: DASHBOARD_UNDER_TEST });
|
|
|
|
const groupByVariable = getGroupByInput(dashboardPage, selectors);
|
|
await groupByVariable.click();
|
|
|
|
const groupByOption = groupByOptions.nth(1);
|
|
|
|
await groupByOption.click();
|
|
await page.keyboard.press('Escape');
|
|
|
|
const selectedValues = await groupByValues.allTextContents();
|
|
|
|
// assert the panel is visible and has the correct value
|
|
const markdownContent = await getMarkdownHTMLContent(dashboardPage, selectors);
|
|
await expect(markdownContent).toContainText(`GroupByVar: ${selectedValues.join(', ')}`);
|
|
});
|
|
|
|
await test.step('2.Autocomplete for the groupby values', async () => {
|
|
const dashboardPage = await gotoDashboardPage({ uid: DASHBOARD_UNDER_TEST });
|
|
|
|
const groupByVariable = getGroupByInput(dashboardPage, selectors);
|
|
await expect(groupByVariable).toBeVisible();
|
|
await groupByVariable.click();
|
|
|
|
const groupByOption = groupByOptions.nth(0);
|
|
const text = await groupByOption.textContent();
|
|
|
|
const optionsCount = await groupByOptions.count();
|
|
|
|
await groupByVariable.fill(text!);
|
|
|
|
const searchedOptionsCount = await groupByOptions.count();
|
|
|
|
expect(searchedOptionsCount).toBeLessThanOrEqual(optionsCount);
|
|
});
|
|
|
|
await test.step('3.Edit and restore default groupBy', async () => {
|
|
const dashboardPage = await gotoDashboardPage({ uid: DASHBOARD_UNDER_TEST });
|
|
|
|
// Wait for the page to load
|
|
const groupByVariable = getGroupByInput(dashboardPage, selectors);
|
|
await expect(groupByVariable).toBeVisible();
|
|
|
|
const initialSelectedOptionsCount = await groupByValues.count();
|
|
|
|
await groupByVariable.click();
|
|
|
|
const groupByOption = groupByOptions.nth(1);
|
|
await groupByOption.click();
|
|
await page.keyboard.press('Escape');
|
|
|
|
const afterEditOptionsCount = await groupByValues.count();
|
|
|
|
expect(afterEditOptionsCount).toBe(initialSelectedOptionsCount + 1);
|
|
|
|
await groupByRestoreButton.click();
|
|
|
|
await expect(groupByValues).not.toHaveCount(afterEditOptionsCount);
|
|
await expect(groupByValues).toHaveCount(initialSelectedOptionsCount);
|
|
});
|
|
|
|
await test.step('4.Enter multiple values using keyboard only', async () => {
|
|
const dashboardPage = await gotoDashboardPage({ uid: DASHBOARD_UNDER_TEST });
|
|
|
|
const groupByVariable = getGroupByInput(dashboardPage, selectors);
|
|
await groupByVariable.click();
|
|
|
|
const groupByOptionOne = groupByOptions.nth(0);
|
|
const groupByOptionTwo = groupByOptions.nth(1);
|
|
const textOne = await groupByOptionOne.textContent();
|
|
const textTwo = await groupByOptionTwo.textContent();
|
|
|
|
await groupByVariable.fill(textOne!);
|
|
await page.keyboard.press('Enter');
|
|
|
|
await groupByVariable.fill(textTwo!);
|
|
await page.keyboard.press('Enter');
|
|
|
|
await page.keyboard.press('Escape');
|
|
|
|
await expect(page.getByText(textOne!, { exact: false }).first()).toBeVisible();
|
|
await expect(page.getByText(textTwo!, { exact: false }).first()).toBeVisible();
|
|
});
|
|
});
|
|
}
|
|
);
|