@neovici/cosmoz-treenode-navigator 5.5.0 → 5.6.0

package/demo/index.html

@@ -1,87 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-	<title>cosmoz-treenode-navigator demo</title>
-	<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-	<script type="module">
-		import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
-		import "@polymer/iron-demo-helpers/demo-snippet.js";
-		import "@polymer/iron-ajax/iron-ajax.js";
-		import "../cosmoz-treenode-navigator.js";
-		import "../cosmoz-treenode-button-view.js";
-
-		const $documentContainer = document.createElement('template');
-		$documentContainer.innerHTML = `
-			<custom-style>
-				<style is="custom-style" include="demo-pages-shared-styles"></style>
-			</custom-style>`;
-		document.head.appendChild($documentContainer.content);
-	</script>
-</head>
-
-<body>
-	<h1>Cosmoz-treenode-navigator</h1>
-
-	<div class="vertical-section-container">
-		<h3>Navigator with multiple root tree data structure</h3>
-		<p>
-			The tree data structure simulate a windows file system, with 2 drives C: and D:
-		</p>
-		<demo-snippet>
-			<template>
-				<dom-bind id="demo1">
-					<template is="dom-bind">
-						<iron-ajax url="data/adminFiles.json" handle-as="json" last-response="{{ treeData1 }}" auto="[[ doRequest ]]">
-					</iron-ajax>
-					<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node"
-						node-path="{{ path1 }}" selected-node="{{ selectedNode1 }}" tree="[[ getTree(treeData1) ]]"
-					></cosmoz-treenode-button-view>
-				</template>
-			</dom-bind>
-		</template>
-	</demo-snippet>
-	</div>
-
-	<div class="vertical-section-container">
-		<h3>Navigator with multiple root tree data structure and missing ancestor nodes</h3>
-		<p>
-			The tree data structure is based on the one in the demo above, but showing only files accessible to a specific user.
-		</p>
-		<demo-snippet>
-			<template>
-				<dom-bind id="demo2">
-					<template is="dom-bind">
-						<iron-ajax url="data/johnFiles.json" handle-as="json" last-response="{{ treeData2 }}" auto="[[ doRequest ]]">
-						</iron-ajax>
-						<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node" node-path="{{ path2 }}" selected-node="{{ selectedNode2 }}"
-								tree="[[ getTree(treeData2) ]]" multi-selection
-						></cosmoz-treenode-button-view>
-					</template>
-				</dom-bind>
-			</template>
-		</demo-snippet>
-	</div>
-
-	<script type="module">
-		import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-
-		const getTree = data => {
-				if (data) {
-					return new DefaultTree(data);
-				}
-			},
-			initTemplate = id => {
-				let tpl = document.getElementById(id);
-				tpl = !tpl.set ? tpl.firstElementChild : tpl;
-				tpl.getTree = getTree;
-				tpl.set('doRequest', true);
-			};
-
-		setTimeout(() => {
-			initTemplate('demo1');
-			initTemplate('demo2');
-		});
-	</script>
-</body></html>

package/demo/rtl.html

@@ -1,56 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-	<title>cosmoz-treenode-navigator demo</title>
-	<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-	<script type="module">
-		import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
-		import "@polymer/iron-demo-helpers/demo-snippet.js";
-		import "../cosmoz-treenode-navigator.js";
-		import "../cosmoz-treenode-button-view.js";
-
-		const $documentContainer = document.createElement('template');
-		$documentContainer.innerHTML = `
-			<custom-style>
-				<style is="custom-style" include="demo-pages-shared-styles"></style>
-			</custom-style>`;
-		document.head.appendChild($documentContainer.content);
-	</script>
-</head>
-
-<body>
-	<h1>Cosmoz-treenode-button-view rtl test</h1>
-
-	<div class="vertical-section-container">
-		<h3>Demonstrate issue caused by using direction: rtl to render the button label</h3>
-		<p>Select node 1/2/3, and watch the button	label</p>
-		<demo-snippet>
-			<template>
-				<dom-bind id="demo1">
-					<template is="dom-bind">
-						<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node" node-path="{{ path1 }}" selected-node="{{ selectedNode1 }}" tree="[[ getTree(treeData1) ]]">
-						</cosmoz-treenode-button-view>
-					</template>
-				</dom-bind>
-			</template>
-		</demo-snippet>
-	</div>
-	<script type="module">
-		import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-		import treeData1 from '../test/data/rtlTest';
-		const getTree = data => {
-				if (data) {
-					return new DefaultTree(data);
-				}
-			},
-			initTemplate = id => {
-				let tpl = document.getElementById(id);
-				tpl = !tpl.set ? tpl.firstElementChild : tpl;
-				tpl.getTree = getTree;
-				tpl.treeData1 = treeData1;
-			};
-		initTemplate('demo1');
-	</script>
-</body></html>

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

@@ -1,52 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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'
-					}
-				}
-			}
-		}
-	}
-};
-

package/web-dev-server.config.mjs

@@ -1,10 +0,0 @@
-/* eslint-env node */
-export default {
-	appIndex: 'demo/index.html',
-	open: true,
-	preserveSymlinks: true,
-	nodeResolve: {
-		mainFields: ['browser', 'jsnext', 'jsnext:main', 'module', 'main'],
-		dedupe: pkg => ['@neovici', '@polymer', 'lit', 'haunted'].find(prefix => pkg.startsWith(prefix))
-	}
-};

package/web-test-runner.config.mjs

@@ -1 +0,0 @@
-export { default } from '@neovici/cfg/web/test-runner.mjs';