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

DashboardsE2E: Add E2E tests for Auto grid (#106171)

Browse Source 
* add auto grid e2e tests

* remove unnecessary clean up in grouping tests

* refaactor repeated code

* Refactor some repeated blocks

---------

Co-authored-by: kay delaney <kay@grafana.com>
This commit is contained in:
Sergej-Vlasov
2025-06-11 13:36:12 +01:00
committed by GitHub
co-authored by kay delaney
parent 5c268c1734
commit bc076f27ff
7 changed files with 373 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/dashboard-new-layouts/dashboard-group-panels.spec.ts
-4
View File
@@ -5,10 +5,6 @@ describe('Grouping panels', () => {
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
});
after(() => {
e2e.flows.revertAllChanges();
});
/*
* Rows
*/
e2e/dashboard-new-layouts/dashboards-panel-layouts.spec.ts
+309
View File
@@ -0,0 +1,309 @@
import { e2e } from '../utils';
describe('Dashboard', () => {
beforeEach(() => {
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
});
it('can switch to auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Switch to auto grid' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
const checkInputs = () => {
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible');
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('be.visible');
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible');
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().should('exist');
};
checkInputs();
e2e.flows.scenes.saveDashboard();
cy.reload();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.NavToolbar.editDashboard.editButton().click();
checkInputs();
});
it('can change min column width in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set min column width' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
let firstStandardPanelTopOffset = 0;
// standard min column width will have 1 panel on a second row in edit mode
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
firstStandardPanelTopOffset = el.offset().top;
});
e2e.components.Panels.Panel.title('New panel')
.last()
.then((el) => {
expect(el.offset().top).to.be.greaterThan(firstStandardPanelTopOffset);
});
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
cy.get('[id=combobox-option-narrow]').click();
const checkOffset = () => {
// narrow min column width will have all panels on the same row
let narrowPanelTopOffset = 0;
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
narrowPanelTopOffset = el.offset().top;
});
e2e.components.Panels.Panel.title('New panel')
.last()
.then((el) => {
expect(el.offset().top).to.eq(narrowPanelTopOffset);
});
};
checkOffset();
e2e.flows.scenes.saveDashboard();
cy.reload();
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('have.value', 'Narrow');
checkOffset();
});
it('can change to custom min column width in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set custom min column width' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
cy.get('[id=combobox-option-custom]').click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customMinColumnWidth()
.should('be.visible')
.clear()
.type('900')
.blur();
cy.wait(100); // cy too fast and executes next command before resizing is done
// // changing to 900 custom width to have each panel span the whole row to verify offset
e2e.flows.scenes.verifyPanelsStackedVertically();
e2e.flows.scenes.saveDashboard();
cy.reload();
e2e.flows.scenes.verifyPanelsStackedVertically();
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customMinColumnWidth().should('have.value', '900');
e2e.flows.scenes.verifyPanelsStackedVertically();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomMinColumnWidth().should('be.visible').click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('have.value', 'Standard');
});
it('can change max columns in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set max columns' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('be.visible').click();
cy.get('[id=combobox-option-1]').click();
// changing to 1 max column to have each panel span the whole row to verify offset
e2e.flows.scenes.verifyPanelsStackedVertically();
e2e.flows.scenes.saveDashboard();
cy.reload();
e2e.flows.scenes.verifyPanelsStackedVertically();
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.maxColumns().should('have.value', '1');
e2e.flows.scenes.verifyPanelsStackedVertically();
});
it('can change row height in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set row height' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
let regularRowHeight = 0;
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
regularRowHeight = el.height();
});
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
cy.get('[id=combobox-option-short]').click();
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
expect(el.height()).to.be.lessThan(regularRowHeight);
});
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
cy.get('[id=combobox-option-tall]').click();
const checkHeight = () => {
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
expect(el.height()).to.be.greaterThan(regularRowHeight);
});
};
checkHeight();
e2e.flows.scenes.saveDashboard();
cy.reload();
checkHeight();
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('have.value', 'Tall');
checkHeight();
});
it('can change to custom row height in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set custom row height' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
let regularRowHeight = 0;
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
regularRowHeight = el.height();
});
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('be.visible').click();
cy.get('[id=combobox-option-custom]').click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight().clear().type('800').blur();
cy.wait(100); // cy too fast and executes next command before resizing is done
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
const elHeight = el.height();
expect(elHeight).be.closeTo(800, 5); // some flakyness and get 798 sometimes
expect(elHeight).to.be.greaterThan(regularRowHeight);
});
e2e.flows.scenes.saveDashboard();
cy.reload();
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
expect(el.height()).be.closeTo(800, 5); // some flakyness and get 798 sometimes
});
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight().should('have.value', '800');
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.clearCustomRowHeight().should('be.visible').click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight().should('have.value', 'Standard');
});
it('can change fill screen in auto grid layout', () => {
e2e.flows.scenes.importV2Dashboard({ title: 'Set fill screen' });
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.Panels.Panel.title('New panel').should('have.length', 3);
e2e.components.OptionsGroup.toggle('grid-layout-category').click();
e2e.flows.scenes.selectAutoGridLayout();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.minColumnWidth().should('be.visible').click();
cy.get('[id=combobox-option-narrow]').click();
let initialHeight = 0;
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
initialHeight = el.height();
});
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().click({ force: true });
const checkHeight = () => {
e2e.components.Panels.Panel.title('New panel')
.first()
.then((el) => {
expect(el.height()).to.be.greaterThan(initialHeight);
});
};
checkHeight();
e2e.flows.scenes.saveDashboard();
cy.reload();
checkHeight();
e2e.components.NavToolbar.editDashboard.editButton().click();
e2e.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen().should('be.checked');
checkHeight();
});
});
e2e/utils/flows/scenes/editPaneActions.ts
+8
View File
@@ -12,6 +12,14 @@ export const selectRowsLayout = () => {
clickGroupLayoutButton('Rows');
};
export const selectCustomGridLayout = () => {
clickGroupLayoutButton('Custom');
};
export const selectAutoGridLayout = () => {
clickGroupLayoutButton('Auto grid');
};
const editPaneCopyOrDuplicate = (buttonLabel: string) => {
e2e.components.EditPaneHeader.copyDropdown().click();
cy.get('[role="menu"]').within(() => {
e2e/utils/flows/scenes/index.ts
+1
View File
@@ -8,3 +8,4 @@ export * from './saveDashboard';
export * from './importDashboard';
export * from './editPaneActions';
export * from './selectPanel';
export * from './panelPosition';
e2e/utils/flows/scenes/panelPosition.ts
+14
View File
@@ -0,0 +1,14 @@
import { e2e } from '../..';
export const verifyPanelsStackedVertically = () => {
let initialOffset = 0;
e2e.components.Panels.Panel.title('New panel').each((el) => {
if (!initialOffset) {
initialOffset = el.offset().top;
} else {
const elOffset = el.offset().top;
expect(elOffset).to.be.greaterThan(initialOffset);
initialOffset = elOffset;
}
});
};