alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make tree items more actionable and add AppAction for expanding the object tree (#5997)

Browse Source 
* style: add `visibility` to tree expand triangles

- The purpose of this is so that Playwright can perform actionability checks on the tree items. This will make operations involving expanding tree items much easier to perform in e2e.

* feat(e2e): Add AppAction to expand the entire tree

* fix: wait for loading indicator

* test: add test for `expandEntireTree`

* test: update `expandEntireTree` and tree selectors

- Use dynamic aria-label for different tree implementations

- Get rid of CSS ids which are only for testing

- Update percy tree scope selector

* chore(lint): remove unused variable

* refactor(e2e): update tree locators

Co-authored-by: John Hill <john.c.hill@nasa.gov>
This commit is contained in:
Jesse Mazzella
2023-01-26 09:25:15 -08:00
committed by GitHub
parent 01f724959d
commit 8d1a2e6716
12 changed files with 132 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
e2e/tests/functional/moveAndLinkObjects.e2e.spec.js
View File

@@ -52,7 +52,9 @@ test.describe('Move & link item tests', () => {
// Attempt to move parent to its own grandparent
await page.locator('button[title="Show selected item in tree"]').click();
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
await treePane.getByRole('treeitem', {
name: 'Parent Folder'
}).click({
@@ -63,28 +65,30 @@ test.describe('Move & link item tests', () => {
name: /Move/
}).click();
const locatorTree = page.locator('#locator-tree');
const myItemsLocatorTreeItem = locatorTree.getByRole('treeitem', {
const createModalTree = page.getByRole('tree', {
name: "Create Modal Tree"
});
const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: myItemsFolderName
});
await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
await myItemsLocatorTreeItem.click();
const parentFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: parentFolder.name
});
await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
await parentFolderLocatorTreeItem.click();
await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
const childFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: new RegExp(childFolder.name)
});
await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
await childFolderLocatorTreeItem.click();
await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
const grandchildFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: grandchildFolder.name
});
await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
@@ -195,7 +199,9 @@ test.describe('Move & link item tests', () => {
// Attempt to move parent to its own grandparent
await page.locator('button[title="Show selected item in tree"]').click();
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
await treePane.getByRole('treeitem', {
name: 'Parent Folder'
}).click({
@@ -206,28 +212,30 @@ test.describe('Move & link item tests', () => {
name: /Move/
}).click();
const locatorTree = page.locator('#locator-tree');
const myItemsLocatorTreeItem = locatorTree.getByRole('treeitem', {
const createModalTree = page.getByRole('tree', {
name: "Create Modal Tree"
});
const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: myItemsFolderName
});
await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
await myItemsLocatorTreeItem.click();
const parentFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: parentFolder.name
});
await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
await parentFolderLocatorTreeItem.click();
await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
const childFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: new RegExp(childFolder.name)
});
await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
await childFolderLocatorTreeItem.click();
await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
const grandchildFolderLocatorTreeItem = locatorTree.getByRole('treeitem', {
const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
name: grandchildFolder.name
});
await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();