mirror of https://github.com/grafana/grafana
e2e: adds e2e for panel edit (#23849)
* Explore: Create basic E2E test * Feature: adds e2e tests for panel inspector * Refactor: adds ts-ignore because of type checking errors * Refactor: changes after PR comments and updates snapshot * Refactor: adds typings back for IScope * e2e: adds e2e for panel edit Co-authored-by: Andreas Opferkuch <andreas.opferkuch@gmail.com>pull/23859/head
parent
cf77c3a50b
commit
80ab18f43d
@ -0,0 +1,143 @@ |
||||
import { e2e } from '@grafana/e2e'; |
||||
|
||||
const PANEL_UNDER_TEST = 'Random walk series'; |
||||
|
||||
e2e.scenario({ |
||||
describeName: 'Panel edit tests', |
||||
itName: 'Testes various Panel edit scenarios', |
||||
addScenarioDataSource: false, |
||||
addScenarioDashBoard: false, |
||||
skipScenario: false, |
||||
scenario: () => { |
||||
e2e.flows.openDashboard('5SdHCadmz'); |
||||
|
||||
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'); |
||||
|
||||
// Queries tab is rendered and open by default
|
||||
e2e.components.PanelEditor.DataPane.content() |
||||
.should('be.visible') |
||||
.within(() => { |
||||
e2e.components.Tab.title('Query').should('be.visible'); |
||||
// data should be the active tab
|
||||
e2e.components.Tab.active().within((li: JQuery<HTMLLIElement>) => { |
||||
expect(li.text()).equals('Query1'); // there's already a query so therefore Query + 1
|
||||
}); |
||||
e2e.components.QueryTab.content().should('be.visible'); |
||||
e2e.components.TransformTab.content().should('not.be.visible'); |
||||
e2e.components.AlertTab.content().should('not.be.visible'); |
||||
|
||||
// Bottom pane tabs
|
||||
// Can change to Transform tab
|
||||
e2e.components.Tab.title('Transform') |
||||
.should('be.visible') |
||||
.click(); |
||||
e2e.components.Tab.active().within((li: JQuery<HTMLLIElement>) => { |
||||
expect(li.text()).equals('Transform0'); // there's no transform so therefore Transform + 0
|
||||
}); |
||||
e2e.components.TransformTab.content().should('be.visible'); |
||||
e2e.components.QueryTab.content().should('not.be.visible'); |
||||
e2e.components.AlertTab.content().should('not.be.visible'); |
||||
|
||||
// Can change to Alerts tab (graph panel is the default vis so the alerts tab should be rendered)
|
||||
e2e.components.Tab.title('Alert') |
||||
.should('be.visible') |
||||
.click(); |
||||
e2e.components.Tab.active().within((li: JQuery<HTMLLIElement>) => { |
||||
expect(li.text()).equals('Alert0'); // there's no alert so therefore Alert + 0
|
||||
}); |
||||
e2e.components.AlertTab.content().should('be.visible'); |
||||
e2e.components.QueryTab.content().should('not.be.visible'); |
||||
e2e.components.TransformTab.content().should('not.be.visible'); |
||||
|
||||
e2e.components.Tab.title('Query') |
||||
.should('be.visible') |
||||
.click(); |
||||
}); |
||||
|
||||
// Panel sidebar is rendered open by default
|
||||
e2e.components.PanelEditor.OptionsPane.content().should('be.visible'); |
||||
|
||||
// Can toggle on/off sidebar
|
||||
e2e.components.PanelEditor.OptionsPane.close().should('be.visible'); |
||||
e2e.components.PanelEditor.OptionsPane.open().should('not.be.visible'); |
||||
|
||||
// close options pane
|
||||
e2e.components.PanelEditor.OptionsPane.close().click(); |
||||
e2e.components.PanelEditor.OptionsPane.open().should('be.visible'); |
||||
e2e.components.PanelEditor.OptionsPane.close().should('not.be.visible'); |
||||
e2e.components.PanelEditor.OptionsPane.content().should('not.be.visible'); |
||||
|
||||
// open options pane
|
||||
e2e.components.PanelEditor.OptionsPane.open().click(); |
||||
e2e.components.PanelEditor.OptionsPane.close().should('be.visible'); |
||||
e2e.components.PanelEditor.OptionsPane.open().should('not.be.visible'); |
||||
e2e.components.PanelEditor.OptionsPane.content().should('be.visible'); |
||||
|
||||
// Can change visualisation type
|
||||
e2e.components.OptionsGroup.toggle('Panel type') |
||||
.should('be.visible') |
||||
.click(); |
||||
|
||||
// Check that Graph is chosen
|
||||
e2e.components.PluginVisualization.item('Graph').should('be.visible'); |
||||
e2e.components.PluginVisualization.current().within((div: JQuery<HTMLDivElement>) => { |
||||
expect(div.text()).equals('Graph'); |
||||
}); |
||||
|
||||
// Change to Text panel
|
||||
e2e.components.PluginVisualization.item('Text') |
||||
.scrollIntoView() |
||||
.should('be.visible') |
||||
.click(); |
||||
e2e.components.PluginVisualization.current().within((div: JQuery<HTMLDivElement>) => { |
||||
expect(div.text()).equals('Text'); |
||||
}); |
||||
|
||||
// Data pane should not be rendered
|
||||
e2e.components.PanelEditor.DataPane.content().should('not.be.visible'); |
||||
|
||||
// Change to Table panel
|
||||
e2e.components.PluginVisualization.item('Table') |
||||
.scrollIntoView() |
||||
.should('be.visible') |
||||
.click(); |
||||
e2e.components.PluginVisualization.current().within((div: JQuery<HTMLDivElement>) => { |
||||
expect(div.text()).equals('Table'); |
||||
}); |
||||
|
||||
// Data pane should be rendered
|
||||
e2e.components.PanelEditor.DataPane.content().should('be.visible'); |
||||
|
||||
// Field & Overrides tabs (need to switch to React based vis, i.e. Table)
|
||||
e2e.components.PanelEditor.OptionsPane.select() |
||||
.should('be.visible') |
||||
.click() |
||||
.within(() => { |
||||
// Can change to Fields tab
|
||||
e2e.components.Select.option() |
||||
.should('be.visible') |
||||
.eq(1) |
||||
.click(); |
||||
}); |
||||
|
||||
e2e.components.FieldConfigEditor.content().should('be.visible'); |
||||
e2e.components.OverridesConfigEditor.content().should('not.be.visible'); |
||||
|
||||
e2e.components.PanelEditor.OptionsPane.select() |
||||
.should('be.visible') |
||||
.click() |
||||
.within(() => { |
||||
// Can change to Overrides tab
|
||||
e2e.components.Select.option() |
||||
.should('be.visible') |
||||
.eq(2) |
||||
.click(); |
||||
}); |
||||
|
||||
e2e.components.OverridesConfigEditor.content().should('be.visible'); |
||||
e2e.components.FieldConfigEditor.content().should('not.be.visible'); |
||||
}, |
||||
}); |
@ -1,8 +0,0 @@ |
||||
import { pageFactory } from '../support'; |
||||
|
||||
export const EditPanel = pageFactory({ |
||||
url: '', |
||||
selectors: { |
||||
tabItems: (text: string) => `Edit panel tab item ${text}`, |
||||
}, |
||||
}); |
Loading…
Reference in new issue