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

Jump to bottom

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

Merged
merged 9 commits into from Jan 26, 2023
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dda4b3f
style: add `visibility` to tree expand triangles
ozyx Nov 17, 2022
b37a021
feat(e2e): Add AppAction to expand the entire tree
ozyx Nov 17, 2022
a175d3a
fix: wait for loading indicator
ozyx Dec 28, 2022
f00024a
test: add test for `expandEntireTree`
ozyx Dec 28, 2022
ed68c56
test: update `expandEntireTree` and tree selectors
ozyx Jan 25, 2023
4972d8e
chore(lint): remove unused variable
ozyx Jan 25, 2023
b2b2276
Merge branch 'master' into mct5994
unlikelyzero Jan 26, 2023
003b306
refactor(e2e): update tree locators
ozyx Jan 26, 2023
3b7a41c
Merge branch 'master' into mct5994
ozyx Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 22 additions & 1 deletion e2e/appActions.js
View file
Open in desktop
Expand Up @@ -144,7 +144,9 @@ async function createNotification(page, createNotificationOptions) {
* @param {string} name
*/
async function expandTreePaneItemByName(page, name) {
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
const expandTriangle = treeItem.locator('.c-disclosure-triangle');
await expandTriangle.click();
Expand Down Expand Up @@ -218,6 +220,24 @@ async function openObjectTreeContextMenu(page, url) {
});
}

/**
* Expands the entire object tree (every expandable tree item).
* @param {import('@playwright/test').Page} page
* @param {"Main Tree" | "Create Modal Tree"} [treeName="Main Tree"]
*/
async function expandEntireTree(page, treeName = "Main Tree") {
const treeLocator = page.getByRole('tree', {
name: treeName
});
const collapsedTreeItems = treeLocator.getByRole('treeitem', {
expanded: false
}).locator('span.c-disclosure-triangle.is-enabled');

while (await collapsedTreeItems.count() > 0) {
await collapsedTreeItems.nth(0).click();
}
}

/**
* Gets the UUID of the currently focused object by parsing the current URL
* and returning the last UUID in the path.
Expand Down Expand Up @@ -362,6 +382,7 @@ module.exports = {
createDomainObjectWithDefaults,
createNotification,
expandTreePaneItemByName,
expandEntireTree,
createPlanFromJSON,
openObjectTreeContextMenu,
getHashUrlToDomainObject,
Expand Down
55 changes: 54 additions & 1 deletion e2e/tests/framework/appActions.e2e.spec.js
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@
*****************************************************************************/

const { test, expect } = require('../../pluginFixtures.js');
const { createDomainObjectWithDefaults, createNotification } = require('../../appActions.js');
const { createDomainObjectWithDefaults, createNotification, expandEntireTree } = require('../../appActions.js');

test.describe('AppActions', () => {
test('createDomainObjectsWithDefaults', async ({ page }) => {
Expand Down Expand Up @@ -109,4 +109,57 @@ test.describe('AppActions', () => {
await expect(page.locator('.c-message-banner')).toHaveClass(/error/);
await page.locator('[aria-label="Dismiss"]').click();
});
test('expandEntireTree', async ({ page }) => {
await page.goto('./', { waitUntil: 'networkidle' });

const rootFolder = await createDomainObjectWithDefaults(page, {
type: 'Folder'
});
const folder1 = await createDomainObjectWithDefaults(page, {
type: 'Folder',
parent: rootFolder.uuid
});

await createDomainObjectWithDefaults(page, {
type: 'Clock',
parent: folder1.uuid
});
const folder2 = await createDomainObjectWithDefaults(page, {
type: 'Folder',
parent: folder1.uuid
});
const folder3 = await createDomainObjectWithDefaults(page, {
Fixed Show fixed Hide fixed
type: 'Folder',
parent: folder1.uuid
});
await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
parent: folder2.uuid
});
await createDomainObjectWithDefaults(page, {
type: 'Folder',
parent: folder2.uuid
});

await page.goto('./#/browse/mine');
await expandEntireTree(page);
const treePane = page.getByRole('tree', {
name: "Main Tree"
});
const treePaneCollapsedItems = treePane.getByRole('treeitem', { expanded: false });
expect(await treePaneCollapsedItems.count()).toBe(0);

await page.goto('./#/browse/mine');
//Click the Create button
await page.click('button:has-text("Create")');

// Click the object specified by 'type'
await page.click(`li[role='menuitem']:text("Clock")`);
await expandEntireTree(page, "Create Modal Tree");
const locatorTree = page.getByRole("tree", {
name: "Create Modal Tree"
});
const locatorTreeCollapsedItems = locatorTree.locator('role=treeitem[expanded=false]');
expect(await locatorTreeCollapsedItems.count()).toBe(0);
});
});
32 changes: 20 additions & 12 deletions e2e/tests/functional/moveAndLinkObjects.e2e.spec.js
View file
Open in desktop
Expand Up @@ -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({
Expand All @@ -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();
Expand Down Expand Up @@ -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({
Expand All @@ -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();
Expand Down
16 changes: 12 additions & 4 deletions e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
View file
Open in desktop
Expand Up @@ -48,7 +48,9 @@ test.describe('Display Layout', () => {
// Expand the 'My Items' folder in the left tree
await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
// Add the Sine Wave Generator to the Display Layout and save changes
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
name: new RegExp(sineWaveObject.name)
});
Expand Down Expand Up @@ -80,7 +82,9 @@ test.describe('Display Layout', () => {
// Expand the 'My Items' folder in the left tree
await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
// Add the Sine Wave Generator to the Display Layout and save changes
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
name: new RegExp(sineWaveObject.name)
});
Expand Down Expand Up @@ -116,7 +120,9 @@ test.describe('Display Layout', () => {
// Expand the 'My Items' folder in the left tree
await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
// Add the Sine Wave Generator to the Display Layout and save changes
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
name: new RegExp(sineWaveObject.name)
});
Expand Down Expand Up @@ -155,7 +161,9 @@ test.describe('Display Layout', () => {
// Expand the 'My Items' folder in the left tree
await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
// Add the Sine Wave Generator to the Display Layout and save changes
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
name: new RegExp(sineWaveObject.name)
});
Expand Down
4 changes: 3 additions & 1 deletion e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
View file
Open in desktop
Expand Up @@ -198,7 +198,9 @@ test.describe('Tagging in Notebooks @addInit', () => {
page.click('.c-disclosure-triangle')
]);

const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
// Click Clock
await treePane.getByRole('treeitem', {
name: clock.name
Expand Down
4 changes: 3 additions & 1 deletion e2e/tests/functional/tree.e2e.spec.js
View file
Open in desktop
Expand Up @@ -116,7 +116,9 @@ async function getAndAssertTreeItems(page, expected) {
* @param {string} name
*/
async function expandTreePaneItemByName(page, name) {
const treePane = page.locator('#tree-pane');
const treePane = page.getByRole('tree', {
name: 'Main Tree'
});
const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
const expandTriangle = treeItem.locator('.c-disclosure-triangle');
await expandTriangle.click();
Expand Down
4 changes: 2 additions & 2 deletions e2e/tests/visual/components/tree.visual.spec.js
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@ test.describe('Visual - Tree Pane', () => {
name: 'Z Clock'
});

const treePane = "#tree-pane";
const treePane = "[role=tree][aria-label='Main Tree']";

await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
scope: treePane
Expand Down Expand Up @@ -94,7 +94,7 @@ test.describe('Visual - Tree Pane', () => {
* @param {string} name
*/
async function expandTreePaneItemByName(page, name) {
const treePane = page.locator('#tree-pane');
const treePane = page.getByTestId('tree-pane');
const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
const expandTriangle = treeItem.locator('.c-disclosure-triangle');
await expandTriangle.click();
Expand Down
1 change: 0 additions & 1 deletion src/api/forms/components/controls/Locator.vue
View file
Open in desktop
Expand Up @@ -22,7 +22,6 @@

<template>
<mct-tree
id="locator-tree"
:is-selector-tree="true"
:initial-selection="model.parent"
@tree-item-selection="handleItemSelection"
Expand Down
2 changes: 2 additions & 0 deletions src/styles/_controls.scss
View file
Open in desktop
Expand Up @@ -270,9 +270,11 @@ button {
flex: 0 0 auto;
width: $d;
position: relative;
visibility: hidden;

&.is-enabled {
cursor: pointer;
visibility: visible;

&:hover {
color: $colorDisclosureCtrlHov;
Expand Down
4 changes: 1 addition & 3 deletions src/ui/layout/Layout.vue
View file
Open in desktop
Expand Up @@ -79,9 +79,7 @@
<multipane
type="vertical"
>
<pane
id="tree-pane"
>
<pane>
<mct-tree
ref="mctTree"
:sync-tree-navigation="triggerSync"
Expand Down
4 changes: 4 additions & 0 deletions src/ui/layout/mct-tree.vue
View file
Open in desktop
Expand Up @@ -41,6 +41,7 @@
ref="mainTree"
class="c-tree-and-search__tree c-tree"
role="tree"
:aria-label="getAriaLabel"
aria-expanded="true"
>

Expand Down Expand Up @@ -192,6 +193,9 @@ export default {
focusedItems() {
return this.activeSearch ? this.searchResultItems : this.treeItems;
},
getAriaLabel() {
return this.isSelectorTree ? "Create Modal Tree" : "Main Tree";
},
pageThreshold() {
return Math.ceil(this.mainTreeHeight / this.itemHeight) + ITEM_BUFFER;
},
Expand Down