@neovici/cosmoz-treenode-navigator 5.6.0 → 6.0.0

package/cosmoz-treenode-navigator.js

@@ -5,7 +5,7 @@ import {
 	useMemo,
 	useCallback,
 	useRef,
-} from 'haunted';
+} from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 import { guard } from 'lit-html/directives/guard.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "5.6.0",
+	"version": "6.0.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",
@@ -22,7 +22,8 @@
 	},
 	"files": [
 		"cosmoz-*.js",
-		"helpers.js"
+		"helpers.js",
+		"test/data"
 	],
 	"scripts": {
 		"lint": "eslint --cache --ext .js .",
@@ -62,21 +63,21 @@
 		"@neovici/cfg": "^1.33.0",
 		"@neovici/cosmoz-dialog": "^3.0.0",
 		"@neovici/cosmoz-i18next": "^3.2.0",
-		"@neovici/cosmoz-input": "^3.0.0",
+		"@neovici/cosmoz-input": "^4.0.0",
 		"@neovici/cosmoz-tree": "^3.0.0",
-		"@neovici/cosmoz-utils": "^5.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",
 		"@polymer/polymer": "^3.4.0",
-		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0"
+		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^17.0.0",
-		"@commitlint/config-conventional": "^17.0.0",
-		"@open-wc/testing": "^3.0.0",
+		"@commitlint/cli": "^18.0.0",
+		"@commitlint/config-conventional": "^18.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@polymer/iron-ajax": "^3.0.0",
 		"@polymer/iron-component-page": "^4.0.0",
 		"@polymer/iron-demo-helpers": "^3.0.0",
@@ -86,6 +87,6 @@
 		"@semantic-release/git": "^10.0.0",
 		"@webcomponents/webcomponentsjs": "^2.0.0",
 		"husky": "^8.0.0",
-		"semantic-release": "^21.0.1"
+		"semantic-release": "^22.0.0"
 	}
 }

package/test/cosmoz-treenode-button-view.test.js

@@ -0,0 +1,52 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
+import rtlData from './data/rtlTest.js';
+import '../cosmoz-treenode-button-view';
+
+suite('rtl', () => {
+	let treeButton;
+
+	suiteSetup(async () => {
+		treeButton = await fixture(html`<cosmoz-treenode-button-view .tree=${ new DefaultTree(rtlData) }>`);
+	});
+
+	test('button renders selected path', done => {
+		treeButton.nodePath = '1.2.3';
+
+		// Button view label depends on a binding in a cosmoz-treenode-navigator
+		// stamped asynchronously, so we need to wait a bit.
+		setTimeout(() => {
+			const buttonLabel = treeButton.shadowRoot.querySelector('.pathToNode').textContent;
+			assert.isTrue(buttonLabel.endsWith('1 / 2 / 3'));
+			done();
+		}, 500);
+	});
+
+	/*
+			// commented out because test is unstable
+			function isIdActiveElement(id, element, idPreviouslyFound) {
+				let idFound = idPreviouslyFound || element && element.id === id;
+
+				if (element != null && element.shadowRoot != null) {
+					return isIdActiveElement(id, element.shadowRoot.activeElement, idFound);
+				}
+
+				// active element not null means that it has focus
+				return element != null && idFound;
+			}
+
+			test('search input has focus when dialog has opened', done => {
+				treeButton.$$('.pathToNode').click();
+				Polymer.Base.async(() => {
+					// real focus can only be tested here, not valid outside test()
+					if (window.document.hasFocus()) {
+						assert.equal(isIdActiveElement('searchInput', window.document.activeElement), true);
+					}
+					if (treeButton.$.dialogTree != null) {
+						treeButton.$.dialogTree.close();
+					}
+					done();
+				}, 50);
+			});
+		*/
+});

package/test/cosmoz-treenode-navigator.test.js

@@ -0,0 +1,102 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
+import basicTree from './data/basicTree.js';
+import '../cosmoz-treenode-navigator';
+import { computeDataPlane } from '../helpers';
+
+suite('cosmoz-treenode-navigator', () => {
+	let navigator;
+
+	setup(async () => {
+		navigator = await fixture(html` <cosmoz-treenode-navigator
+			.tree=${new DefaultTree(basicTree)}
+			.searchPlaceholder="${'Custom search placeholder'}"
+			.searchMinLength="${2}"
+		></cosmoz-treenode-navigator>`);
+	});
+
+	test('instantiating the element', () => {
+		assert.equal(navigator.tagName, 'COSMOZ-TREENODE-NAVIGATOR');
+	});
+
+	test('tree length and sort', () => {
+		// given a node navigator with some data
+
+		// when I enter the first node
+		navigator.openNodePath = '1000';
+
+		const dataPlane = computeDataPlane(
+			navigator.tree,
+			navigator.searchValue,
+			navigator.openNodePath
+		);
+		// then I can see the contents of the node
+		// and it is ordered folder-first, then alphabetically
+		assert.equal(dataPlane[0].name, 'Data');
+		assert.equal(dataPlane[1].name, 'Backup');
+		assert.equal(dataPlane.length, 2);
+	});
+
+	test('set proper search placeholder', () => {
+		assert.equal(
+			navigator.shadowRoot
+				.querySelector('cosmoz-input')
+				.shadowRoot.querySelector('input').placeholder,
+			'Custom search placeholder'
+		);
+	});
+
+	test('should check if node has children', () => {
+		const node = {
+			name: 'D:',
+			path: '1000',
+			children: {
+				1001: {
+					name: 'Data',
+					pathLocator: '1000.1001',
+					children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' } },
+				},
+			},
+			parentSectionName: 'D:',
+			pathLocator: '1000',
+		};
+		assert.equal(navigator.tree.hasChildren(node), true);
+		const node2 = {
+			name: 'Git',
+			path: '1.5.7',
+			parentSectionName: 'C:/Program Files',
+			pathLocator: '1.5.7',
+		};
+		assert.equal(navigator.tree.hasChildren(node2), false);
+	});
+
+	test('match search string', () => {
+		// given a node navigator with some data
+		// when I search for 'John'
+		navigator.searchValue = 'John';
+
+		const dataPlane = computeDataPlane(
+			navigator.tree,
+			navigator.searchValue,
+			'1000'
+		);
+
+		//then I can see only 1 item matching 'John'
+		assert.lengthOf(dataPlane, 1);
+		assert.equal(dataPlane[0].name, 'John');
+	});
+
+	test('not match search string', () => {
+		// given a node navigator with some data
+		// when I search for 'NONEXISTING'
+		navigator.searchValue = 'NONEXISTING';
+		const dataPlane = computeDataPlane(
+			navigator.tree,
+			navigator.searchValue,
+			'1000'
+		);
+
+		//then I can see that is no contents
+		assert.lengthOf(dataPlane, 0);
+	});
+});

package/test/data/basicTree.js

@@ -0,0 +1,118 @@
+export default {
+	1: {
+		name: 'C:',
+		pathLocator: '1',
+		children: {
+			2: {
+				name: 'Windows',
+				pathLocator: '1.2',
+				children: {
+					3: {
+						name: 'System',
+						pathLocator: '1.2.3',
+						children: {}
+					},
+					4: {
+						name: 'Microsoft.NET',
+						pathLocator: '1.2.4',
+						children: {}
+					}
+				}
+			},
+			5: {
+				name: 'Program Files',
+				pathLocator: '1.5',
+				children: {
+					6: {
+						name: 'Microsoft VS Code',
+						pathLocator: '1.5.6'
+					},
+					7: {
+						name: 'Git',
+						pathLocator: '1.5.7'
+					}
+				}
+			},
+			100: {
+				name: 'Users',
+				pathLocator: '1.100',
+				children: {
+					200: {
+						name: 'Default',
+						pathLocator: '1.100.200',
+						children: {
+							201: {
+								name: 'Documents',
+								pathLocator: '1.100.200.201'
+							},
+							202: {
+								name: 'Music',
+								pathLocator: '1.100.200.202'
+							},
+							203: {
+								name: 'Pictures',
+								pathLocator: '1.100.200.203'
+							}
+						}
+					},
+					300: {
+						name: 'John',
+						pathLocator: '1.100.300',
+						children: {
+							301: {
+								name: 'Documents',
+								pathLocator: '1.100.300.301'
+							},
+							302: {
+								name: 'Music',
+								pathLocator: '1.100.300.302'
+							},
+							303: {
+								name: 'Pictures',
+								pathLocator: '1.100.300.303'
+							}
+						}
+					},
+					400: {
+						name: 'Public',
+						pathLocator: '1.100.400',
+						children: {
+							401: {
+								name: 'Public Documents',
+								pathLocator: '1.100.400.401'
+							},
+							402: {
+								name: 'Public Music',
+								pathLocator: '1.100.400.402'
+							},
+							403: {
+								name: 'Public Pictures',
+								pathLocator: '1.100.400.403'
+							}
+						}
+					}
+				}
+			}
+		}
+	},
+	1000: {
+		name: 'D:',
+		pathLocator: '1000',
+		children: {
+			1001: {
+				name: 'Data',
+				pathLocator: '1000.1001',
+				children: {
+					1002: {
+						name: 'John',
+						pathLocator: '1000.1001.1002'
+					}
+				}
+			},
+			1002: {
+				name: 'Backup',
+				pathLocator: '1000.1002'
+			}
+		}
+	}
+};

package/test/data/rtlTest.js

@@ -0,0 +1,22 @@
+export default {
+	1: {
+		id: '11111111-1111-1111-1111-111111111111',
+		name: '1',
+		pathLocator: '1',
+		children: {
+			2: {
+				id: '167d1485-7d4f-4c7d-86cd-a4fb00f31245',
+				name: '2',
+				pathLocator: '1.2',
+				children: {
+					3: {
+						id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
+						name: '3',
+						pathLocator: '1.2.3'
+					}
+				}
+			}
+		}
+	}
+};
+