@grafana/e2e: improvements (#25307)

* Added more interaction to addPanel

* Use latest Cypress 4.x

* Updated lockfile
This commit is contained in:
Steven Vachon
2020-06-02 21:08:09 -04:00
committed by GitHub
parent 1e543d5ac1
commit 104c99f1b0
3 changed files with 58 additions and 120 deletions
+50 -36
View File
@@ -2,52 +2,66 @@ import { e2e } from '../index';
import { getScenarioContext } from '../support/scenarioContext';
export interface AddPanelConfig {
dashboardUid?: string;
dashboardUid: string;
dataSourceName: string;
queriesForm: Function;
queriesForm: (config: AddPanelConfig) => void;
panelTitle: string;
visualizationName: string;
}
const DEFAULT_ADD_PANEL_CONFIG: AddPanelConfig = {
dataSourceName: 'TestData DB',
queriesForm: () => {},
visualizationName: 'Graph',
};
// @todo this actually returns type `Cypress.Chainable`
export const addPanel = (config?: Partial<AddPanelConfig>): any => {
const { dashboardUid, dataSourceName, queriesForm, visualizationName } = { ...DEFAULT_ADD_PANEL_CONFIG, ...config };
const panelTitle = `e2e-${Date.now()}`;
export const addPanel = (config?: Partial<AddPanelConfig>): any =>
getScenarioContext().then(({ lastAddedDashboardUid, lastAddedDataSource }: any) => {
const fullConfig = {
dashboardUid: lastAddedDashboardUid,
dataSourceName: lastAddedDataSource,
panelTitle: `e2e-${Date.now()}`,
queriesForm: () => {},
visualizationName: 'Table',
...config,
} as AddPanelConfig;
return getScenarioContext()
.then(({ lastAddedDashboardUid }: any) => {
e2e.flows.openDashboard(dashboardUid ?? lastAddedDashboardUid);
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.addNewPanel().click();
const { dashboardUid, dataSourceName, panelTitle, queriesForm, visualizationName } = fullConfig;
e2e()
.get('.ds-picker')
.click()
.contains('[id^="react-select-"][id*="-option-"]', dataSourceName)
.click();
e2e.flows.openDashboard(dashboardUid);
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.addNewPanel().click();
getOptionsGroup('settings')
.find('[value="Panel Title"]')
.clear()
.type(panelTitle);
toggleOptionsGroup('settings');
e2e()
.get('.ds-picker')
.click()
.contains('[id^="react-select-"][id*="-option-"]', dataSourceName)
.click();
toggleOptionsGroup('type');
e2e()
.get(`[aria-label="Plugin visualization item ${visualizationName}"]`)
.scrollIntoView()
.click();
toggleOptionsGroup('type');
getOptionsGroup('settings')
.find('[value="Panel Title"]')
.clear()
.type(panelTitle);
toggleOptionsGroup('settings');
queriesForm();
})
.then(() => panelTitle);
};
toggleOptionsGroup('type');
e2e()
.get(`[aria-label="Plugin visualization item ${visualizationName}"]`)
.scrollIntoView()
.click();
toggleOptionsGroup('type');
queriesForm(fullConfig);
// @todo enable when plugins have this implemented
//e2e.components.QueryEditorRow.actionButton('Disable/enable query').click();
//e2e.components.Panels.Panel.containerByTitle(panelTitle).find('.panel-content').contains('No data');
//e2e.components.QueryEditorRow.actionButton('Disable/enable query').click();
e2e.components.PanelEditor.OptionsPane.close().click();
e2e()
.get('button[title="Apply changes and go back to dashboard"]')
.click();
// @todo remove `wrap` when possible
return e2e().wrap(fullConfig);
});
const getOptionsGroup = (name: string) => e2e().get(`.options-group:has([aria-label="Options group Panel ${name}"])`);