@grafana/e2e: screenshots and panel flow (#25203)

* Cleanup

* addPanel now supports (optional) custom dashboardUid

* addPanel now supports (optional) visualization name

* Added CLI option for updating screenshot fixtures

* Added support for console.* functions within tests

* Refactored screenshot command for greater simplicity

* addPanel now sets a unique title

* Updated lockfile
This commit is contained in:
Steven Vachon
2020-06-01 08:48:23 -04:00
committed by GitHub
parent 01ecbae2ee
commit 78febbbeef
10 changed files with 145 additions and 79 deletions
+43 -13
View File
@@ -2,27 +2,57 @@ import { e2e } from '../index';
import { getScenarioContext } from '../support/scenarioContext';
export interface AddPanelConfig {
dashboardUid?: string;
dataSourceName: string;
queriesForm: Function;
visualizationName: string;
}
const DEFAULT_ADD_PANEL_CONFIG: AddPanelConfig = {
dataSourceName: 'TestData DB',
queriesForm: () => {},
visualizationName: 'Graph',
};
export const addPanel = (config?: Partial<AddPanelConfig>) => {
const { dataSourceName, queriesForm } = { ...DEFAULT_ADD_PANEL_CONFIG, ...config };
// @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()}`;
getScenarioContext().then(({ lastAddedDashboardUid }: any) => {
e2e.flows.openDashboard(lastAddedDashboardUid);
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.addNewPanel().click();
e2e()
.get('.ds-picker')
.click()
.contains('[id^="react-select-"][id*="-option-"]', dataSourceName)
.click();
queriesForm();
});
return getScenarioContext()
.then(({ lastAddedDashboardUid }: any) => {
e2e.flows.openDashboard(dashboardUid ?? lastAddedDashboardUid);
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.addNewPanel().click();
e2e()
.get('.ds-picker')
.click()
.contains('[id^="react-select-"][id*="-option-"]', dataSourceName)
.click();
getOptionsGroup('settings')
.find('[value="Panel Title"]')
.clear()
.type(panelTitle);
toggleOptionsGroup('settings');
toggleOptionsGroup('type');
e2e()
.get(`[aria-label="Plugin visualization item ${visualizationName}"]`)
.scrollIntoView()
.click();
toggleOptionsGroup('type');
queriesForm();
})
.then(() => panelTitle);
};
const getOptionsGroup = (name: string) => e2e().get(`.options-group:has([aria-label="Options group Panel ${name}"])`);
const toggleOptionsGroup = (name: string) =>
getOptionsGroup(name)
.find('.editor-options-group-toggle')
.scrollIntoView()
.click();