IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

E2E: Fixed so openPanelMenuItem flow works with new/old panel chrome without breaking changes (#66118)

Browse Source 
Fixed so the openPanelMenuItem works with both angular and react panels.
This commit is contained in:
Marcus Andersson
2023-04-14 09:11:15 +02:00
committed by GitHub
parent 46742f6d96
commit c3fee5881f
4 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/panels-suite/panelEdit_base.spec.ts
View File

@@ -17,7 +17,7 @@ e2e.scenario({
e2e.flows.openDashboard({ uid: 'TkZXxlNG3' });
e2e().wait('@query');
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
// New panel editor opens when navigating from Panel menu
e2e.components.PanelEditor.General.content().should('be.visible');

4
e2e/various-suite/inspect-drawer.spec.ts
View File

@@ -37,7 +37,7 @@ e2e.scenario({
e2e.flows.openDashboard({ uid: 'wfTJJL5Wz' });
// testing opening inspect drawer directly by clicking on Inspect in header menu
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST, true);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST);
expectDrawerTabsAndContent();
@@ -49,7 +49,7 @@ e2e.scenario({
expectSubMenuScenario('Query');
expectSubMenuScenario('Panel JSON', 'JSON');
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
e2e.components.QueryTab.queryInspectorButton().should('be.visible').click();

43
packages/grafana-e2e/src/flows/openPanelMenuItem.ts
View File

@@ -7,26 +7,51 @@ export enum PanelMenuItems {
Extensions = 'Extensions',
}
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title', isReactPanel = false) => {
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title') => {
// we changed the way we open the panel menu in react panels with the new panel header
if (isReactPanel) {
e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
} else {
// this is the old way of opening the panel menu from the title
detectPanelType(panelTitle, (isAngularPanel) => {
if (isAngularPanel) {
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
} else {
e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
}
});
};
export const openPanelMenuExtension = (extensionTitle: string, panelTitle = 'Panel Title') => {
const menuItem = PanelMenuItems.Extensions;
// we changed the way we open the panel menu in react panels with the new panel header
detectPanelType(panelTitle, (isAngularPanel) => {
if (isAngularPanel) {
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(PanelMenuItems.Extensions)
e2e.components.Panels.Panel.headerItems(menuItem)
.should('be.visible')
.parent()
.parent()
.invoke('addClass', 'open');
e2e.components.Panels.Panel.headerItems(extensionTitle).should('be.visible').click();
} else {
e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems(menuItem).trigger('mouseover', { force: true });
e2e.components.Panels.Panel.menuItems(extensionTitle).click({ force: true });
}
});
};
function detectPanelType(panelTitle: string, detected: (isAngularPanel: boolean) => void) {
e2e.components.Panels.Panel.title(panelTitle).then((el) => {
const isAngularPanel = el.find('plugin-component.ng-scope').length > 0;
if (isAngularPanel) {
Cypress.log({
name: 'detectPanelType',
displayName: 'detector',
message: 'Angular panel detected, will use legacy selectors.',
});
}
detected(isAngularPanel);
});
}

6
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
View File

@@ -197,7 +197,11 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
});
return (
<div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
<div
className={containerClassNames}
data-testid={selectors.components.Panels.Panel.title(panel.title)}
aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}
>
<PanelHeader
panel={panel}
dashboard={dashboard}