[Dashboard Navigation] Unskip links panel test (#178051)

Closes https://github.com/elastic/kibana/issues/177675
Closes https://github.com/elastic/kibana/issues/177676

## Summary

When I originally ran the FTR on this test, it [passed 100
times](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5389),
so I thought we could maybe just unskip the test without further effort.
However, when looking at the failure screenshot, it looks like the link
creation/editor flyout didn't open for some reason - so, I decided to
add some extra logging statements (to make debugging easier if this test
fails again) + add a few extra retry's to **ensure** that the flyout is
open before progressing to (hopefully) prevent this from happening in
the future.

Rerunning the FTR after these changes also [passed 100
times](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5391):


![image](32b0bb5d-d063-4095-8fd6-3bca3a191616)

Backporting these changes since the original failure was in 8.13.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Hannah Mudge 2024-03-06 11:08:17 -07:00 committed by GitHub
parent 16bcae8833
commit f72f278c6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 63 additions and 18 deletions

View file

@ -90,7 +90,7 @@ export const LinkEditor = ({
);
return (
<EuiFocusTrap className={'linkEditor in'} data-test-subj="links--linkEditor--flyout">
<EuiFocusTrap className={'linkEditor in'}>
<EuiFlyoutHeader hasBorder>
<EuiButtonEmpty
className="linkEditorBackButton"
@ -108,7 +108,7 @@ export const LinkEditor = ({
</EuiTitle>
</EuiButtonEmpty>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlyoutBody data-test-subj="links--linkEditor--flyout">
<EuiForm component="form" fullWidth>
<EuiFormRow label={LinksStrings.editor.linkEditor.getLinkTypePickerLabel()}>
<EuiRadioGroup

View file

@ -37,8 +37,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const DASHBOARD_NAME = 'Test Links panel';
const LINKS_PANEL_NAME = 'Some links';
// Failing: See https://github.com/elastic/kibana/issues/177675
describe.skip('links panel create and edit', () => {
describe('links panel create and edit', () => {
describe('creation', async () => {
before(async () => {
await dashboard.navigateToApp();
@ -116,7 +115,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await dashboardPanelActions.openContextMenu();
await dashboardPanelActions.clickEdit();
await dashboardLinks.expectFlyoutIsOpen();
await dashboardLinks.expectPanelEditorFlyoutIsOpen();
// Move the third link up one step
await dashboardLinks.reorderLinks('link003', 3, 1, true);
@ -136,7 +135,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await dashboardPanelActions.openContextMenu();
await dashboardPanelActions.clickEdit();
await dashboardLinks.expectFlyoutIsOpen();
await dashboardLinks.expectPanelEditorFlyoutIsOpen();
await dashboardLinks.editLinkByIndex(5);
await testSubjects.exists('links--linkEditor--flyout');
@ -155,7 +154,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await dashboardPanelActions.openContextMenu();
await dashboardPanelActions.clickEdit();
await dashboardLinks.expectFlyoutIsOpen();
await dashboardLinks.expectPanelEditorFlyoutIsOpen();
await dashboardLinks.deleteLinkByIndex(5);
await dashboardLinks.clickPanelEditorSaveButton();

View file

@ -11,6 +11,7 @@ import { LinksLayoutType } from '@kbn/links-plugin/common/content_management';
import { FtrService } from '../ftr_provider_context';
export class DashboardPageLinks extends FtrService {
private readonly log = this.ctx.getService('log');
private readonly retry = this.ctx.getService('retry');
private readonly browser = this.ctx.getService('browser');
private readonly testSubjects = this.ctx.getService('testSubjects');
@ -20,6 +21,7 @@ export class DashboardPageLinks extends FtrService {
private readonly settings = this.ctx.getPageObject('settings');
public async toggleLinksLab(value?: boolean) {
this.log.debug(`toggle the links lab setting to ${value}`);
await this.header.clickStackManagement();
await this.settings.clickKibanaSettings();
@ -31,11 +33,13 @@ export class DashboardPageLinks extends FtrService {
----------------------------------------------------------- */
public async getAllLinksInPanel() {
this.log.debug('get all link elements from the panel');
const listGroup = await this.testSubjects.find('links--component--listGroup');
return await listGroup.findAllByCssSelector('li');
}
public async getNumberOfLinksInPanel() {
this.log.debug('get the number of links in the panel');
const links = await this.getAllLinksInPanel();
return links.length;
}
@ -44,28 +48,45 @@ export class DashboardPageLinks extends FtrService {
Links flyout
----------------------------------------------------------- */
public async expectFlyoutIsOpen() {
await this.testSubjects.exists('links--panelEditor--flyout');
public async expectPanelEditorFlyoutIsOpen() {
await this.retry.waitFor(
'links panel editor flyout to exist',
async () => await this.testSubjects.exists('links--panelEditor--flyout')
);
}
public async expectLinkEditorFlyoutIsOpen() {
await this.retry.waitFor(
'link editor flyout to exist',
async () => await this.testSubjects.exists('links--linkEditor--flyout')
);
}
public async clickPanelEditorSaveButton() {
await this.expectFlyoutIsOpen();
this.log.debug('click links panel editor save button');
await this.expectPanelEditorFlyoutIsOpen();
await this.testSubjects.clickWhenNotDisabled('links--panelEditor--saveBtn');
}
public async clickLinkEditorCloseButton() {
this.log.debug('click link editor close button');
await this.testSubjects.click('links--linkEditor--closeBtn');
await this.testSubjects.waitForDeleted('links--linkEditor--flyout');
}
public async clickPanelEditorCloseButton() {
this.log.debug('click links panel editor close button');
await this.testSubjects.click('links--panelEditor--closeBtn');
}
public async clickLinksEditorSaveButton() {
this.log.debug('click link editor save button');
await this.testSubjects.clickWhenNotDisabled('links--linkEditor--saveBtn');
await this.testSubjects.waitForDeleted('links--linkEditor--flyout');
}
public async findDraggableLinkByIndex(index: number) {
this.log.debug(`find the draggable link element at index ${index}`);
await this.testSubjects.exists('links--panelEditor--flyout');
const linksFormRow = await this.testSubjects.find('links--panelEditor--linksAreaDroppable');
return await linksFormRow.findByCssSelector(
@ -80,9 +101,17 @@ export class DashboardPageLinks extends FtrService {
openInNewTab: boolean = false,
linkLabel?: string
) {
await this.expectFlyoutIsOpen();
await this.testSubjects.click('links--panelEditor--addLinkBtn');
await this.testSubjects.exists('links--linkEditor--flyout');
this.log.debug(
`add a dashboard link to "${destination}" ${
linkLabel ? `with custom label "${linkLabel}"` : ''
}`
);
await this.expectPanelEditorFlyoutIsOpen();
await this.retry.try(async () => {
await this.testSubjects.click('links--panelEditor--addLinkBtn');
await this.expectLinkEditorFlyoutIsOpen();
});
const radioOption = await this.testSubjects.find('links--linkEditor--dashboardLink--radioBtn');
const label = await radioOption.findByCssSelector('label[for="dashboardLink"]');
await label.click();
@ -114,6 +143,11 @@ export class DashboardPageLinks extends FtrService {
encodeUrl: boolean = true,
linkLabel?: string
) {
this.log.debug(
`add an external link to "${destination}" ${
linkLabel ? `with custom label "${linkLabel}"` : ''
}`
);
await this.setExternalUrlInput(destination);
if (linkLabel) {
await this.testSubjects.setValue('links--linkEditor--linkLabel--input', linkLabel);
@ -128,6 +162,7 @@ export class DashboardPageLinks extends FtrService {
}
public async deleteLinkByIndex(index: number) {
this.log.debug(`delete the link at ${index}`);
const linkToDelete = await this.findDraggableLinkByIndex(index);
await this.retry.try(async () => {
await linkToDelete.moveMouseTo();
@ -138,6 +173,7 @@ export class DashboardPageLinks extends FtrService {
}
public async editLinkByIndex(index: number) {
this.log.debug(`edit the link at ${index}`);
const linkToEdit = await this.findDraggableLinkByIndex(index);
await this.retry.try(async () => {
await linkToEdit.moveMouseTo();
@ -148,6 +184,11 @@ export class DashboardPageLinks extends FtrService {
}
public async reorderLinks(linkLabel: string, startIndex: number, steps: number, reverse = false) {
this.log.debug(
`move the ${linkLabel} link from ${startIndex} to ${
reverse ? startIndex - steps : startIndex + steps
}`
);
const linkToMove = await this.findDraggableLinkByIndex(startIndex);
const draggableButton = await linkToMove.findByTestSubject(`panelEditorLink--dragHandle`);
expect(await draggableButton.getAttribute('data-rfd-drag-handle-draggable-id')).to.equal(
@ -166,15 +207,19 @@ export class DashboardPageLinks extends FtrService {
}
public async setLayout(layout: LinksLayoutType) {
await this.expectFlyoutIsOpen();
this.log.debug(`set the link panel layout to ${layout}`);
await this.expectPanelEditorFlyoutIsOpen();
const testSubj = `links--panelEditor--${layout}LayoutBtn`;
await this.testSubjects.click(testSubj);
}
public async setExternalUrlInput(destination: string) {
await this.expectFlyoutIsOpen();
await this.testSubjects.click('links--panelEditor--addLinkBtn');
await this.testSubjects.exists('links--linkEditor--flyout');
this.log.debug(`set the external URL input to ${destination}`);
await this.expectPanelEditorFlyoutIsOpen();
await this.retry.try(async () => {
await this.testSubjects.click('links--panelEditor--addLinkBtn');
await this.expectLinkEditorFlyoutIsOpen();
});
const option = await this.testSubjects.find('links--linkEditor--externalLink--radioBtn');
const label = await option.findByCssSelector('label[for="externalLink"]');
await label.click();
@ -182,7 +227,8 @@ export class DashboardPageLinks extends FtrService {
}
public async toggleSaveByReference(checked: boolean) {
await this.expectFlyoutIsOpen();
this.log.debug(`toggle save by reference for link panel to ${checked}`);
await this.expectPanelEditorFlyoutIsOpen();
await this.testSubjects.setEuiSwitch(
'links--panelEditor--saveByReferenceSwitch',
checked ? 'check' : 'uncheck'