public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboards/E2E: Add tests for grouping and ungrouping into rows and tabs (#105315)

Browse Source 
* add e2e for grouping into tabs and rows

* enable kubernetesDashboards feature toggle for e2e tests

* remove unnecessary kubernetesDashboard feature flag enablement
This commit is contained in:
Sergej-Vlasov
2025-05-13 13:58:09 +01:00
committed by GitHub
parent 7da1c9073e
commit 012bfa29be
7 changed files with 209 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts
+152
View File
@@ -0,0 +1,152 @@
import { e2e } from '../utils';
describe('Grouping panels', () => {
beforeEach(() => {
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
});
after(() => {
e2e.flows.revertAllChanges();
});
it('can group and ungroup new panels into row', () => {
e2e.flows.addDashboard({ title: 'Group new panels into row' });
cy.contains('Group new panels into row').should('be.visible');
// Toggle edit mode
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Add 3 panels
e2e.flows.scenes.addFirstPanel();
e2e.flows.scenes.addPanel();
e2e.flows.scenes.addPanel();
// Group into row
e2e.flows.scenes.groupIntoRow();
// Verify row and panel titles
e2e.components.DashboardRow.title('New row').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
// Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify row and panel titles after reload
e2e.components.DashboardRow.title('New row').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Ungroup
e2e.flows.scenes.ungroupPanels();
// Verify Row title is gone
e2e.components.DashboardRow.title('New row').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
//Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify Row title is gone
e2e.components.DashboardRow.title('New row').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
});
it('can group and ungroup new panels into tab', () => {
e2e.flows.addDashboard({ title: 'Group new panels into tab' });
cy.contains('Group new panels into tab').should('be.visible');
// Toggle edit mode
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Add 3 panels
e2e.flows.scenes.addFirstPanel();
e2e.flows.scenes.addPanel();
e2e.flows.scenes.addPanel();
// Group into tab
e2e.flows.scenes.groupIntoTab();
// Verify tab and panel titles
e2e.components.Tab.title('New tab').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
// Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify row and panel titles after reload
e2e.components.Tab.title('New tab').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Ungroup
e2e.flows.scenes.ungroupPanels();
// Verify Row title is gone
e2e.components.Tab.title('New tab').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
// Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify Row title is gone
e2e.components.Tab.title('New tab').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
});
it('can group and ungroup new panels into tab with row', () => {
e2e.flows.addDashboard({ title: 'Group new panels into tab with row' });
cy.contains('Group new panels into tab with row').should('be.visible');
// Toggle edit mode
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Add 3 panels
e2e.flows.scenes.addFirstPanel();
e2e.flows.scenes.addPanel();
e2e.flows.scenes.addPanel();
// Group into tab
e2e.flows.scenes.groupIntoTab();
e2e.flows.scenes.groupIntoRow();
// Verify tab and panel titles
e2e.components.Tab.title('New tab').should('be.visible');
e2e.components.DashboardRow.title('New row').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
// Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify tab, row and panel titles after reload
e2e.components.Tab.title('New tab').should('be.visible');
e2e.components.DashboardRow.title('New row').should('be.visible');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
// Ungroup
e2e.flows.scenes.ungroupPanels(); // ungroup rows
e2e.flows.scenes.ungroupPanels(); // ungroup tabs
// Verify tab and row titles is gone
e2e.components.Tab.title('New tab').should('not.exist');
e2e.components.DashboardRow.title('New row').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
// Save dashboards and reload
e2e.flows.scenes.saveDashboard();
cy.reload();
// Verify Row title is gone
e2e.components.Tab.title('New tab').should('not.exist');
e2e.components.DashboardRow.title('New row').should('not.exist');
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
});
});
e2e/utils/flows/scenes/addPanel.ts
+11 -1
View File
@@ -1,6 +1,16 @@
import { e2e } from '../..';
export const addPanel = () => {
e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom');
e2e.components.DashboardEditPaneSplitter.primaryBody().scrollTo('bottom', { ensureScrollable: false });
e2e.components.CanvasGridAddActions.addPanel().should('be.visible').click();
};
export const addFirstPanel = () => {
// add visualization
e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible').click();
// close the data source picker modal
cy.get('[aria-label="Close"]').click({ force: true });
e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
};
e2e/utils/flows/scenes/groupPanels.ts
+15
View File
@@ -0,0 +1,15 @@
import { e2e } from '../..';
export const groupIntoRow = () => {
e2e.components.CanvasGridAddActions.groupPanels().click({ scrollBehavior: 'nearest' });
cy.contains('Group into row').click();
};
export const groupIntoTab = () => {
e2e.components.CanvasGridAddActions.groupPanels().click({ scrollBehavior: 'nearest' });
cy.contains('Group into tab').click();
};
export const ungroupPanels = () => {
e2e.components.CanvasGridAddActions.ungroup().click({ scrollBehavior: 'nearest' });
};
e2e/utils/flows/scenes/index.ts
+2
View File
@@ -2,3 +2,5 @@ export * from './addPanel';
export * from './configurePanel';
export * from './removePanel';
export * from './toggleEditMode';
export * from './groupPanels';
export * from './saveDashboard';
e2e/utils/flows/scenes/saveDashboard.ts
+8
View File
@@ -0,0 +1,8 @@
import { e2e } from '../../index';
export const saveDashboard = () => {
e2e.components.NavToolbar.editDashboard.saveButton().click();
e2e.components.Drawer.DashboardSaveDrawer.saveButton().click();
e2e.flows.assertSuccessNotification();
};
packages/grafana-e2e-selectors/src/selectors/components.ts
+6
View File
@@ -27,6 +27,12 @@ export const versionedComponents = {
addPanel: {
'12.1.0': 'data-testid CanvasGridAddActions add-panel',
},
groupPanels: {
'12.1.0': 'data-testid CanvasGridAddActions group-panels',
},
ungroup: {
'12.1.0': 'data-testid CanvasGridAddActions ungroup',
},
},
DashboardEditPaneSplitter: {
primaryBody: {
public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx
+15 -3
View File
@@ -59,7 +59,7 @@ export function CanvasGridAddActions({ layoutManager }: Props) {
variant="primary"
fill="text"
icon="layers"
onClick={() => layoutManager.addPanel(getDefaultVizPanel())}
data-testid={selectors.components.CanvasGridAddActions.groupPanels}
>
<Trans i18nKey="dashboard.canvas-actions.group-panels">Group panels</Trans>
</Button>
@@ -118,7 +118,13 @@ function UngroupButtonTabs({ parentLayout, onClick }: UngroupButtonProps<TabsLay
}
return (
<Button variant="primary" fill="text" icon="layers-slash" onClick={onClick}>
<Button
variant="primary"
fill="text"
icon="layers-slash"
onClick={onClick}
data-testid={selectors.components.CanvasGridAddActions.ungroup}
>
<Trans i18nKey="dashboard.canvas-actions.un-group-panels">Ungroup</Trans>
</Button>
);
@@ -132,7 +138,13 @@ function UngroupButtonRows({ parentLayout, onClick }: UngroupButtonProps<RowsLay
}
return (
<Button variant="primary" fill="text" icon="layers-slash" onClick={onClick}>
<Button
variant="primary"
fill="text"
icon="layers-slash"
onClick={onClick}
data-testid={selectors.components.CanvasGridAddActions.ungroup}
>
<Trans i18nKey="dashboard.canvas-actions.un-group-panels">Ungroup</Trans>
</Button>
);