apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Navigation: Update e2e tests to work with topnav (#60910)

Browse Source 
* turn on topnav toggle in e2e tests

* fix variable e2e tests

* fix remaining tests + remove some hardcoded waits

* speculative fixes

* wait for error to disappear

* use new selector, turn toggle back off
pull/60975/head^2
Ashley Harrison 2 years ago committed by GitHub
parent 4d989860fb
commit 7005b7bf8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 144 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      e2e/dashboards-suite/new-constant-variable.spec.ts
  2. 22
      e2e/dashboards-suite/new-custom-variable.spec.ts
  3. 12
      e2e/dashboards-suite/new-datasource-variable.spec.ts
  4. 12
      e2e/dashboards-suite/new-interval-variable.spec.ts
  5. 28
      e2e/dashboards-suite/new-query-variable.spec.ts
  6. 12
      e2e/dashboards-suite/new-text-box-variable.spec.ts
  7. 38
      e2e/dashboards-suite/set-options-from-ui.spec.ts
  8. 15
      e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts
  9. 1
      e2e/panels-suite/panelEdit_queries.spec.ts
  10. 1
      e2e/various-suite/query-editor.spec.ts
  11. 6
      packages/grafana-e2e-selectors/src/selectors/components.ts
  12. 3
      public/app/core/components/AppChrome/NavToolbar.tsx
  13. 17
      public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

12
e2e/dashboards-suite/new-constant-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
const DASHBOARD_NAME = 'Test variable output';
describe('Variables - Constant', () => {
it('can add a new constant variable', () => {
@ -21,7 +23,15 @@ describe('Variables - Constant', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.components.RefreshPicker.runButtonV2().click();
// Assert it was rendered

22
e2e/dashboards-suite/new-custom-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
const DASHBOARD_NAME = 'Test variable output';
function fillInCustomVariable(name: string, label: string, value: string) {
e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().within(() => {
@ -30,7 +32,15 @@ describe('Variables - Custom', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('one').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('two').click();
@ -54,7 +64,15 @@ describe('Variables - Custom', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb('Test variable output').click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('One').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('Two').click();

12
e2e/dashboards-suite/new-datasource-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
const DASHBOARD_NAME = 'Test variable output';
describe('Variables - Datasource', () => {
it('can add a new datasource variable', () => {
@ -29,7 +31,15 @@ describe('Variables - Datasource', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.components.RefreshPicker.runButtonV2().click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('gdev-prometheus').click();

12
e2e/dashboards-suite/new-interval-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
const DASHBOARD_NAME = 'Test variable output';
function assertPreviewValues(expectedValues: string[]) {
for (const expected of expectedValues) {
@ -31,7 +33,15 @@ describe('Variables - Interval', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.components.RefreshPicker.runButtonV2().click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('10s').click();

28
e2e/dashboards-suite/new-query-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
const DASHBOARD_NAME = 'Templating - Nested Template Variables';
describe('Variables - Query - Add variable', () => {
it('query variable should be default and default fields should be correct', () => {
@ -102,9 +104,15 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().scrollIntoView().should('be.visible').click();
e2e().wait(1500);
e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
e2e.pages.Dashboard.SubMenu.submenuItem()
@ -112,7 +120,6 @@ describe('Variables - Query - Add variable', () => {
.eq(3)
.within(() => {
e2e().get('.variable-link-wrapper').should('be.visible').click();
e2e().wait(500);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
.should('be.visible')
.within(() => {
@ -169,9 +176,15 @@ describe('Variables - Query - Add variable', () => {
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().scrollIntoView().should('be.visible').click();
e2e().wait(500);
e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
e2e.pages.Dashboard.SubMenu.submenuItem()
@ -179,7 +192,6 @@ describe('Variables - Query - Add variable', () => {
.eq(3)
.within(() => {
e2e().get('.variable-link-wrapper').should('be.visible').click();
e2e().wait(500);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
.should('be.visible')
.within(() => {

12
e2e/dashboards-suite/new-text-box-variable.spec.ts
Unescape View File

@ -1,6 +1,8 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
const DASHBOARD_NAME = 'Test variable output';
describe('Variables - Text box', () => {
it('can add a new text box variable', () => {
@ -21,7 +23,15 @@ describe('Variables - Text box', () => {
// Navigate back to the homepage and change the selected variable value
e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
e2e.components.BackButton.backArrow().click({ force: true });
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
} else {
e2e.components.BackButton.backArrow().click({ force: true });
}
});
e2e().get('#var-VariableUnderTest').clear().type('dog-cat').blur();
// Assert it was rendered

38
e2e/dashboards-suite/set-options-from-ui.spec.ts
Unescape View File

@ -1,7 +1,7 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
const flakyTimeout = 5000;
describe('Variables - Set options from ui', () => {
it('clicking a value that is not part of dependents options should change these to All', () => {
@ -12,12 +12,18 @@ describe('Variables - Set options from ui', () => {
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible').click();
e2e.components.PageToolbar.container().click();
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.NavToolbar.container().click();
} else {
e2e.components.PageToolbar.container().click();
}
});
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B').scrollIntoView().should('be.visible');
e2e().wait(flakyTimeout);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
.should('have.length', 2)
.eq(0)
@ -35,8 +41,6 @@ describe('Variables - Set options from ui', () => {
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible');
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible');
e2e().wait(flakyTimeout);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('be.visible').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
@ -64,10 +68,17 @@ describe('Variables - Set options from ui', () => {
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').should('be.visible').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible').click();
e2e.components.PageToolbar.container().click();
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.NavToolbar.container().click();
} else {
e2e.components.PageToolbar.container().click();
}
});
e2e().wait('@query');
e2e().wait(500);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B').scrollIntoView().should('be.visible');
@ -115,10 +126,17 @@ describe('Variables - Set options from ui', () => {
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B').should('be.visible').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible').click();
e2e.components.PageToolbar.container().click();
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.NavToolbar.container().click();
} else {
e2e.components.PageToolbar.container().click();
}
});
e2e().wait('@query');
e2e().wait(500);
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B').scrollIntoView().should('be.visible');

15
e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts
Unescape View File

@ -1,4 +1,5 @@
import { e2e } from '@grafana/e2e';
import { GrafanaBootConfig } from '@grafana/runtime';
e2e.scenario({
describeName: 'Templating',
@ -24,13 +25,11 @@ e2e.scenario({
// waiting for network requests first
e2e().wait(['@tagsTemplatingSearch', '@tagsDemoSearch']);
// and then waiting for links to render
e2e().wait(1000);
const verifyLinks = (variableValue: string) => {
e2e.components.DashboardLinks.link()
.should('be.visible')
.and((links) => {
.should((links) => {
expect(links).to.have.length.greaterThan(13);
for (let index = 0; index < links.length; index++) {
@ -48,7 +47,15 @@ e2e.scenario({
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('p2').should('be.visible').click();
e2e.components.PageToolbar.container().click();
e2e()
.window()
.then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
if (win.grafanaBootData.settings.featureToggles.topnav) {
e2e.components.NavToolbar.container().click();
} else {
e2e.components.PageToolbar.container().click();
}
});
e2e.components.DashboardLinks.dropDown()
.scrollIntoView()
.should('be.visible')

1
e2e/panels-suite/panelEdit_queries.spec.ts
Unescape View File

@ -29,6 +29,7 @@ e2e.scenario({
e2e.components.QueryEditorRows.rows({ timeout: flakyTimeout }).should('have.length', 2);
// Remove refId A
e2e.components.QueryEditorRow.actionButton('Remove query').eq(0).scrollIntoView();
e2e.components.QueryEditorRow.actionButton('Remove query').eq(0).should('be.visible').click();
// We expect row with refId B to exist and be visible

1
e2e/various-suite/query-editor.spec.ts
Unescape View File

@ -31,6 +31,7 @@ e2e.scenario({
cy.contains(queryText).should('be.visible');
cy.get('body').click();
e2e.components.Alert.alertV2('error').should('not.be.visible');
cy.contains('label', 'Builder').click();

6
packages/grafana-e2e-selectors/src/selectors/components.ts
Unescape View File

@ -10,6 +10,9 @@
* @alpha
*/
export const Components = {
Breadcrumbs: {
breadcrumb: (title: string) => `data-testid ${title} breadcrumb`,
},
TimePicker: {
openButton: 'data-testid TimePicker Open Button',
fromField: 'Time Range from field',
@ -225,6 +228,9 @@ export const Components = {
},
searchInput: 'search transformations',
},
NavToolbar: {
container: 'data-testid Nav toolbar',
},
PageToolbar: {
container: () => '.page-toolbar',
item: (tooltip: string) => `${tooltip}`,

3
public/app/core/components/AppChrome/NavToolbar.tsx
Unescape View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { Components } from '@grafana/e2e-selectors';
import { Icon, IconButton, ToolbarButton, useStyles2 } from '@grafana/ui';
import { HOME_NAV_ID } from 'app/core/reducers/navModel';
import { useSelector } from 'app/types';
@ -36,7 +37,7 @@ export function NavToolbar({
const breadcrumbs = buildBreadcrumbs(sectionNav, pageNav, homeNav);
return (
<div className={styles.pageToolbar}>
<div data-testid={Components.NavToolbar.container} className={styles.pageToolbar}>
<div className={styles.menuButton}>
<IconButton name="bars" tooltip="Toggle menu" tooltipPlacement="bottom" size="xl" onClick={onToggleMegaMenu} />
</div>

17
public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
Unescape View File

@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Components } from '@grafana/e2e-selectors';
import { Icon, useStyles2 } from '@grafana/ui';
import { Breadcrumb } from './types';
@ -10,18 +11,22 @@ type Props = Breadcrumb & {
isCurrent: boolean;
};
export function BreadcrumbItem(props: Props) {
export function BreadcrumbItem({ href, isCurrent, text }: Props) {
const styles = useStyles2(getStyles);
return (
<li className={styles.breadcrumbWrapper}>
{props.isCurrent ? (
<span className={styles.breadcrumb} aria-current="page">
{props.text}
{isCurrent ? (
<span data-testid={Components.Breadcrumbs.breadcrumb(text)} className={styles.breadcrumb} aria-current="page">
{text}
</span>
) : (
<>
<a className={cx(styles.breadcrumb, styles.breadcrumbLink)} href={props.href}>
{props.text}
<a
data-testid={Components.Breadcrumbs.breadcrumb(text)}
className={cx(styles.breadcrumb, styles.breadcrumbLink)}
href={href}
>
{text}
</a>
<div className={styles.separator} aria-hidden={true}>
<Icon name="angle-right" />

Write Preview
Loading…
Cancel
Save