Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: Fix component delete function in UE #165

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

test: Fix component delete function in UE #165

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6adde75
test: Fix component delete function in UE
Sep 10, 2024
38892d9
Merge branch 'main' into FORMS-16262
Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions test/e2e/main/page/universalEditorBasePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export class UniversalEditorBase {
deleteButton: 'button[aria-label="Delete"]',
deleteConfirmationButton: '[data-variant="negative"][class*="aaz5ma_spectrum-ButtonGroup-Button"]',
deletePopup: 'section[class*="spectrum-Dialog--destructive"]',
adaptiveFormPathInContentTree: 'li[data-resource$="content/root/section_0/form"][class="treenode selected"]',
selectedAdaptiveFormWithComponent: 'li[data-resource$="content/root/section_0/form"][class*="treenode selected expandable"] div[class="node-content selected-content"]',
};

// eslint-disable-next-line class-methods-use-this
Expand All @@ -52,6 +54,11 @@ export class UniversalEditorBase {
}
}

// eslint-disable-next-line class-methods-use-this
getExpandCollapseButton(action) {
return `li[data-resource$="content/root/section_0/form"][class*="treenode selected expandable"] div[class="node-content selected-content"] button[aria-label="${action} Node"]`;
}

// eslint-disable-next-line class-methods-use-this
async verifyComponentInsert(frame, componentName, component) {
await frame.locator(this.selectors.insertComponent).click();
Expand All @@ -68,11 +75,39 @@ export class UniversalEditorBase {
async verifyComponentDelete(page, frame, component) {
let adaptiveFormPath = frame.locator(this.componentLocatorForUe(component));
let count = await adaptiveFormPath.count();

while (count > 0) {
// eslint-disable-next-line no-await-in-loop
await expect(adaptiveFormPath.first()).toBeVisible();
// eslint-disable-next-line no-await-in-loop
await adaptiveFormPath.first().click();

// eslint-disable-next-line max-len,no-await-in-loop
const isComponentSelected = await frame.locator(this.componentSelectorValidation(component)).isVisible();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

componentSelectorValidation is coupled with text-input. this makes the code confusing to understand.
we should just have an API to get the selected component from the content tree and then decide whether it's a form or not.

// eslint-disable-next-line max-len,no-await-in-loop
const isAdaptiveFormSelected = await frame.locator(this.selectors.selectedAdaptiveFormWithComponent).isVisible();

// eslint-disable-next-line no-await-in-loop
if (!isComponentSelected && isAdaptiveFormSelected) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

avoid too many eslint disables. better to take out these lines as a separate func outside while

const expandButton = frame.locator(this.getExpandCollapseButton('Expand'));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets have a common method to expand the component in the tree

// eslint-disable-next-line no-await-in-loop
if (await expandButton.isVisible()) {
// eslint-disable-next-line no-await-in-loop
await expandButton.click();
// eslint-disable-next-line no-await-in-loop
await expect(frame.locator(this.getExpandCollapseButton('Collapse'))).toBeVisible();
}
// eslint-disable-next-line no-await-in-loop
await frame.locator(`li[data-resource*="/${component}"]`).click();
// eslint-disable-next-line no-await-in-loop,max-len
expect(await frame.locator(this.componentSelectorValidation(component)).isVisible()).toBe(true);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets have a isComponentSelected method.

}

// eslint-disable-next-line no-await-in-loop
await frame.locator(this.componentSelectorValidation(component)).isVisible();
if (await frame.locator(this.selectors.adaptiveFormPathInContentTree).isVisible()) {
break;
}

// eslint-disable-next-line no-await-in-loop
await frame.locator(this.selectors.deleteButton).click();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

common method to deleteComponent is required here.

// eslint-disable-next-line no-await-in-loop
Expand All @@ -81,11 +116,11 @@ export class UniversalEditorBase {
await frame.locator(this.selectors.deleteConfirmationButton).last().click();
// eslint-disable-next-line no-await-in-loop
await this.waitForCountToDecreaseByOne(adaptiveFormPath, count);
// eslint-disable-next-line no-await-in-loop
adaptiveFormPath = await frame.locator(this.componentLocatorForUe(component));
adaptiveFormPath = frame.locator(this.componentLocatorForUe(component));
// eslint-disable-next-line no-await-in-loop
count = await adaptiveFormPath.count();
}

await expect(adaptiveFormPath).toHaveCount(0);
}
}
Loading