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: adds inspect drawer tests (#23823)

Browse Source 
* 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

* Refactor: changes after PR comments

Co-authored-by: Andreas Opferkuch <andreas.opferkuch@gmail.com>
This commit is contained in:
Hugo Häggmark
2020-04-24 08:48:04 +02:00
committed by GitHub
parent db3f2b90e9
commit e4d492fd35
27 changed files with 471 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
e2e/suite1/specs/smoketests.spec.ts → e2e/suite1/specs/1-smoketests.spec.ts
View File

19
e2e/suite1/specs/explore.spec.ts Normal file
View File

@@ -0,0 +1,19 @@
import { e2e } from '@grafana/e2e';
e2e.scenario({
describeName: 'Explore',
itName: 'Basic path through Explore.',
addScenarioDataSource: true,
addScenarioDashBoard: false,
skipScenario: false,
scenario: () => {
e2e.pages.Explore.visit();
e2e.pages.Explore.General.container().should('have.length', 1);
e2e.pages.Explore.General.runButton().should('have.length', 1);
const canvases = e2e().get('canvas');
canvases.should('have.length', 2);
e2e.components.DataSource.TestData.QueryTab.noise().should('have.length', 1);
},
});

134
e2e/suite1/specs/inspect-drawer.spec.ts Normal file
View File

@@ -0,0 +1,134 @@
import { e2e } from '@grafana/e2e';
const PANEL_UNDER_TEST = '2 yaxis and axis labels';
e2e.scenario({
describeName: 'Inspect drawer tests',
itName: 'Testes various Inpect Drawer scenarios',
addScenarioDataSource: false,
addScenarioDashBoard: false,
skipScenario: false,
scenario: () => {
const viewPortWidth = e2e.config().viewportWidth;
e2e.flows.openDashboard('5SdHCadmz');
// testing opening inspect drawer directly by clicking on Inspect in header menu
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST);
expectDrawerTabsAndContent();
expectDrawerExpandAndContract(viewPortWidth);
expectDrawerClose();
expectSubMenuScenario('Data');
expectSubMenuScenario('Query');
expectSubMenuScenario('Panel JSON', 'JSON');
e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
e2e.components.QueryEditorToolbarItem.button('Query inspector')
.should('be.visible')
.click();
e2e.components.Drawer.General.title(PANEL_UNDER_TEST)
.should('be.visible')
.within(() => {
e2e.components.Tab.title('Query').should('be.visible');
// query should be the active tab
e2e.components.Tab.active().should('have.text', 'Query');
});
e2e.components.PanelInspector.Query.content().should('be.visible');
},
});
const expectDrawerTabsAndContent = () => {
e2e.components.Drawer.General.title(PANEL_UNDER_TEST)
.should('be.visible')
.within(() => {
e2e.components.Tab.title('Data').should('be.visible');
// data should be the active tab
e2e.components.Tab.active().within((li: JQuery<HTMLLIElement>) => {
expect(li.text()).equals('Data');
});
e2e.components.PanelInspector.Data.content().should('be.visible');
e2e.components.PanelInspector.Stats.content().should('not.be.visible');
e2e.components.PanelInspector.Json.content().should('not.be.visible');
e2e.components.PanelInspector.Query.content().should('not.be.visible');
// other tabs should also be visible, click on each to see if we get any console errors
e2e.components.Tab.title('Stats')
.should('be.visible')
.click();
e2e.components.PanelInspector.Stats.content().should('be.visible');
e2e.components.PanelInspector.Data.content().should('not.be.visible');
e2e.components.PanelInspector.Json.content().should('not.be.visible');
e2e.components.PanelInspector.Query.content().should('not.be.visible');
e2e.components.Tab.title('JSON')
.should('be.visible')
.click();
e2e.components.PanelInspector.Json.content().should('be.visible');
e2e.components.PanelInspector.Data.content().should('not.be.visible');
e2e.components.PanelInspector.Stats.content().should('not.be.visible');
e2e.components.PanelInspector.Query.content().should('not.be.visible');
e2e.components.Tab.title('Query')
.should('be.visible')
.click();
e2e.components.PanelInspector.Query.content().should('be.visible');
e2e.components.PanelInspector.Data.content().should('not.be.visible');
e2e.components.PanelInspector.Stats.content().should('not.be.visible');
e2e.components.PanelInspector.Json.content().should('not.be.visible');
});
};
const expectDrawerClose = () => {
// close using close button
e2e.components.Drawer.General.close().click();
e2e.components.Drawer.General.title(PANEL_UNDER_TEST).should('not.be.visible');
};
const expectDrawerExpandAndContract = (viewPortWidth: number) => {
// try expand button
// drawer should take up half the screen
e2e.components.Drawer.General.rcContentWrapper()
.should('be.visible')
.should('have.css', 'width', `${viewPortWidth / 2}px`);
e2e.components.Drawer.General.expand().click();
e2e.components.Drawer.General.contract().should('be.visible');
// drawer should take up the whole screen
e2e.components.Drawer.General.rcContentWrapper()
.should('be.visible')
.should('have.css', 'width', `${viewPortWidth}px`);
// try contract button
e2e.components.Drawer.General.contract().click();
e2e.components.Drawer.General.expand().should('be.visible');
e2e.components.Drawer.General.rcContentWrapper()
.should('be.visible')
.should('have.css', 'width', `${viewPortWidth / 2}px`);
};
const expectSubMenuScenario = (subMenu: string, tabTitle?: string) => {
tabTitle = tabTitle ?? subMenu;
// testing opening inspect drawer from sub menus under Inspect in header menu
e2e.components.Panels.Panel.title(PANEL_UNDER_TEST)
.scrollIntoView()
.should('be.visible')
.click();
// sub menus are in the DOM but not visible and because there is no hover support in Cypress force click
// https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__hover-hidden-elements/cypress/integration/hover-hidden-elements-spec.js
e2e.components.Panels.Panel.headerItems(subMenu).click({ force: true });
// data should be the default tab
e2e.components.Tab.title(tabTitle).should('be.visible');
e2e.components.Tab.active().should('have.text', tabTitle);
expectDrawerClose();
};

138
e2e/suite1/specs/queryVariableCrud.spec.ts
View File

@@ -1,5 +1,74 @@
import { e2e } from '@grafana/e2e';
// This test should really be broken into several smaller tests
e2e.scenario({
describeName: 'Variables',
itName: 'Query Variables CRUD',
addScenarioDataSource: true,
addScenarioDashBoard: true,
skipScenario: false,
scenario: () => {
// @todo remove `@ts-ignore` when possible
// @ts-ignore
e2e.getScenarioContext().then(({ lastAddedDashboardUid }) => {
e2e.flows.openDashboard(lastAddedDashboardUid);
});
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
assertDefaultsForNewVariable();
e2e.pages.Dashboard.Settings.General.sectionItems('General').click();
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
let queryVariables: QueryVariableData[] = [
{
name: 'query1',
query: '*',
label: 'query1-label',
options: ['All', 'A', 'B', 'C'],
selectedOption: 'A',
},
{
name: 'query2',
query: '$query1.*',
label: 'query2-label',
options: ['All', 'AA', 'AB', 'AC'],
selectedOption: 'AA',
},
{
name: 'query3',
query: '$query1.$query2.*',
label: 'query3-label',
options: ['All', 'AAA', 'AAB', 'AAC'],
selectedOption: 'AAA',
},
];
assertAdding3dependantQueryVariablesScenario(queryVariables);
// assert select updates
assertSelects(queryVariables);
// assert that duplicate works
queryVariables = assertDuplicateItem(queryVariables);
// assert that delete works
queryVariables = assertDeleteItem(queryVariables);
// assert that update works
queryVariables = assertUpdateItem(queryVariables);
// assert that move down works
queryVariables = assertMoveDownItem(queryVariables);
// assert that move up works
assertMoveUpItem(queryVariables);
},
});
const assertDefaultsForNewVariable = () => {
logSection('Asserting defaults for new variable');
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().within(input => {
@@ -550,72 +619,3 @@ const assertMoveUpItem = (data: QueryVariableData[]) => {
return queryVariables;
};
// This test should really be broken into several smaller tests
e2e.scenario({
describeName: 'Variables',
itName: 'Query Variables CRUD',
addScenarioDataSource: true,
addScenarioDashBoard: true,
skipScenario: false,
scenario: () => {
// @todo remove `@ts-ignore` when possible
// @ts-ignore
e2e.getScenarioContext().then(({ lastAddedDashboardUid }) => {
e2e.flows.openDashboard(lastAddedDashboardUid);
});
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
assertDefaultsForNewVariable();
e2e.pages.Dashboard.Settings.General.sectionItems('General').click();
e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
let queryVariables: QueryVariableData[] = [
{
name: 'query1',
query: '*',
label: 'query1-label',
options: ['All', 'A', 'B', 'C'],
selectedOption: 'A',
},
{
name: 'query2',
query: '$query1.*',
label: 'query2-label',
options: ['All', 'AA', 'AB', 'AC'],
selectedOption: 'AA',
},
{
name: 'query3',
query: '$query1.$query2.*',
label: 'query3-label',
options: ['All', 'AAA', 'AAB', 'AAC'],
selectedOption: 'AAA',
},
];
assertAdding3dependantQueryVariablesScenario(queryVariables);
// assert select updates
assertSelects(queryVariables);
// assert that duplicate works
queryVariables = assertDuplicateItem(queryVariables);
// assert that delete works
queryVariables = assertDeleteItem(queryVariables);
// assert that update works
queryVariables = assertUpdateItem(queryVariables);
// assert that move down works
queryVariables = assertMoveDownItem(queryVariables);
// assert that move up works
assertMoveUpItem(queryVariables);
},
});