@neovici/cosmoz-treenode-navigator 3.0.4 → 3.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/karma-problem-matcher.json +30 -0
- package/.github/workflows/workflow.yml +20 -7
- package/.husky/commit-msg +4 -0
- package/CHANGELOG.md +9 -0
- package/cc-test-reporter +0 -0
- package/cosmoz-treenode-button-view.js +64 -83
- package/cosmoz-treenode-navigator.js +18 -15
- package/demo/index.html +19 -17
- package/demo/rtl.html +15 -16
- package/package.json +25 -36
- package/test/cosmoz-treenode-button-view.test.js +52 -0
- package/test/cosmoz-treenode-navigator.test.js +66 -0
- package/test/data/basicTree.js +61 -0
- package/test/data/rtlTest.js +22 -0
- package/web-dev-server.config.mjs +10 -0
- package/web-test-runner.config.mjs +28 -0
- package/index.html +0 -12
- package/polymer.json +0 -6
- package/test/cosmoz-treenode-button-view_test.html +0 -99
- package/test/cosmoz-treenode-navigator_test.html +0 -69
- package/test/data/basicTree.json +0 -38
- package/test/data/rtlTest.json +0 -22
- package/test/index.html +0 -17
- package/wct.conf.json +0 -48
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"problemMatcher": [{
|
|
3
|
+
"owner": "karma-eval",
|
|
4
|
+
"pattern": [{
|
|
5
|
+
"regexp": "^\\w+\\s\\d+\\.\\d+\\.\\d+\\s\\(\\w+\\s\\d+\\.\\d+\\.\\d+\\)\\sERROR$"
|
|
6
|
+
}, {
|
|
7
|
+
"regexp": "^\\s{2}(.*)$",
|
|
8
|
+
"message": 1
|
|
9
|
+
}, {
|
|
10
|
+
"regexp": "^\\s{2}at\\s([^:]*):(\\d+):(\\d+)$",
|
|
11
|
+
"file": 1,
|
|
12
|
+
"line": 2,
|
|
13
|
+
"column": 3
|
|
14
|
+
}]
|
|
15
|
+
}, {
|
|
16
|
+
"owner": "karma-test-error",
|
|
17
|
+
"pattern": [{
|
|
18
|
+
"regexp": "^\\w+\\s\\d+\\.\\d+\\.\\d+\\s\\(\\w+\\s\\d+\\.\\d+\\.\\d+\\)\\s(.*)FAILED$",
|
|
19
|
+
"code": 1
|
|
20
|
+
}, {
|
|
21
|
+
"regexp": "^\\t(.*)$",
|
|
22
|
+
"message": 1
|
|
23
|
+
}, {
|
|
24
|
+
"regexp": "^\\t {4}at\\s[^\\s]*\\s\\(([^:]*):(\\d+):(\\d+)\\)$",
|
|
25
|
+
"file": 1,
|
|
26
|
+
"line": 2,
|
|
27
|
+
"column": 3
|
|
28
|
+
}]
|
|
29
|
+
}]
|
|
30
|
+
}
|
|
@@ -14,21 +14,27 @@ jobs:
|
|
|
14
14
|
- name: Checkout
|
|
15
15
|
uses: actions/checkout@v1
|
|
16
16
|
|
|
17
|
-
- name: Use Node.js
|
|
17
|
+
- name: Use Node.js 14.x
|
|
18
18
|
uses: actions/setup-node@v1
|
|
19
19
|
with:
|
|
20
|
-
node-version:
|
|
20
|
+
node-version: 14.x
|
|
21
|
+
|
|
22
|
+
- name: Restore npm cache
|
|
23
|
+
id: node-cache
|
|
24
|
+
uses: actions/cache@v2
|
|
25
|
+
with:
|
|
26
|
+
path: node_modules
|
|
27
|
+
key: ${{ runner.os }}-node-0-${{ hashFiles('**/package-lock.json') }}
|
|
21
28
|
|
|
22
29
|
- name: Install
|
|
30
|
+
if: steps.node-cache.outputs.cache-hit != 'true'
|
|
23
31
|
run: npm ci
|
|
24
32
|
|
|
25
33
|
- name: Lint commit messages
|
|
26
|
-
|
|
34
|
+
uses: wagoid/commitlint-github-action@v3
|
|
27
35
|
|
|
28
36
|
- name: ESLint
|
|
29
|
-
run:
|
|
30
|
-
env:
|
|
31
|
-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
37
|
+
run: npm run lint
|
|
32
38
|
|
|
33
39
|
- name: Test and report
|
|
34
40
|
env:
|
|
@@ -42,12 +48,19 @@ jobs:
|
|
|
42
48
|
run: |
|
|
43
49
|
([[ -e $NEO_CC ]] || curl -L $NEO_CC_URL > $NEO_CC) && chmod +x $NEO_CC
|
|
44
50
|
$NEO_CC before-build
|
|
45
|
-
|
|
51
|
+
echo "::add-matcher::.github/karma-problem-matcher.json"
|
|
52
|
+
npm test
|
|
46
53
|
$NEO_CC after-build --exit-code $?
|
|
47
54
|
|
|
55
|
+
- name: Upload coverage to Codecov
|
|
56
|
+
uses: codecov/codecov-action@v1
|
|
57
|
+
with:
|
|
58
|
+
token: ${{ secrets.CODECOV_TOKEN }}
|
|
59
|
+
|
|
48
60
|
- name: Semantic release
|
|
49
61
|
run: npx semantic-release
|
|
50
62
|
if: success()
|
|
51
63
|
env:
|
|
64
|
+
HUSKY: 0
|
|
52
65
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
53
66
|
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [3.0.5](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.0.4...v3.0.5) (2021-10-16)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **cosmoz-treenode-button-view:** mobile tweaks ([d9444c4](https://github.com/neovici/cosmoz-treenode-navigator/commit/d9444c47f1bf587579fade958efab47dd9687e3c))
|
|
7
|
+
* **cosmoz-treenode-navigator:** remove iron-flex-layout ([6cc69b6](https://github.com/neovici/cosmoz-treenode-navigator/commit/6cc69b67e75e92f2c0953f95061b0199e41fa5e3))
|
|
8
|
+
* replace tap with click ([505d103](https://github.com/neovici/cosmoz-treenode-navigator/commit/505d103f6f84ccdcbdcf5571bdb53abed0703386))
|
|
9
|
+
|
|
1
10
|
## [3.0.4](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.0.3...v3.0.4) (2020-01-06)
|
|
2
11
|
|
|
3
12
|
|
package/cc-test-reporter
CHANGED
|
Binary file
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import '@webcomponents/shadycss/entrypoints/apply-shim';
|
|
2
|
-
|
|
3
|
-
import '@polymer/polymer/lib/elements/custom-style';
|
|
4
|
-
import '@polymer/iron-flex-layout/iron-flex-layout-classes';
|
|
5
1
|
import '@polymer/paper-icon-button/paper-icon-button';
|
|
6
2
|
import '@polymer/paper-button/paper-button';
|
|
7
3
|
|
|
@@ -27,98 +23,83 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
|
|
|
27
23
|
/* eslint-disable-next-line max-lines-per-function */
|
|
28
24
|
static get template() {
|
|
29
25
|
return html`
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
paper-dialog .buttons {
|
|
43
|
-
@apply --cosmoz-treenode-button-view-dialog-container;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
#chips {
|
|
47
|
-
@apply --layout-horizontal;
|
|
48
|
-
@apply --layout-end;
|
|
49
|
-
@apply --layout-wrap;
|
|
50
|
-
max-width: 90%;
|
|
51
|
-
padding: 20px;
|
|
52
|
-
}
|
|
53
|
-
.chip {
|
|
54
|
-
border-radius: 500px;
|
|
55
|
-
background-color: #e0e0e0;
|
|
56
|
-
margin: 1px 4px 1px 0;
|
|
57
|
-
white-space: nowrap;
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
@apply --layout-horizontal;
|
|
60
|
-
@apply --layout-center;
|
|
61
|
-
}
|
|
62
|
-
.chip > span {
|
|
63
|
-
color: #424242;
|
|
64
|
-
margin-left: 10px;
|
|
65
|
-
font-size: 13px;
|
|
66
|
-
overflow: hidden;
|
|
67
|
-
text-overflow: ellipsis;
|
|
68
|
-
}
|
|
69
|
-
.chip iron-icon {
|
|
70
|
-
margin: 2px 4px;
|
|
71
|
-
color: #cdcdcd;
|
|
72
|
-
background-color: #a6a6a6;
|
|
73
|
-
border-radius: 500px;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
min-width: 16px;
|
|
76
|
-
width: 16px;
|
|
77
|
-
min-height: 16px;
|
|
78
|
-
height: 16px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
#dialogTree {
|
|
82
|
-
min-width: 250px !important;
|
|
83
|
-
width: 450px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/* FIXME: https://github.com/PolymerElements/iron-flex-layout/issues/86 */
|
|
87
|
-
[hidden] {
|
|
88
|
-
display: none;
|
|
89
|
-
}
|
|
26
|
+
<style>
|
|
27
|
+
.actions { display: flex; }
|
|
28
|
+
.open { flex: auto; }
|
|
29
|
+
.pathToNode {
|
|
30
|
+
max-width: 320px;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
text-overflow: ellipsis;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
direction: rtl;
|
|
35
|
+
text-align: left;
|
|
36
|
+
}
|
|
90
37
|
|
|
91
|
-
|
|
92
|
-
|
|
38
|
+
#chips {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
max-width: 90%;
|
|
42
|
+
padding: 20px;
|
|
43
|
+
}
|
|
44
|
+
.chip {
|
|
45
|
+
border-radius: 500px;
|
|
46
|
+
background-color: #e0e0e0;
|
|
47
|
+
margin: 1px 4px 1px 0;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
}
|
|
53
|
+
.chip > span {
|
|
54
|
+
color: #424242;
|
|
55
|
+
margin-left: 10px;
|
|
56
|
+
font-size: 13px;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
}
|
|
60
|
+
.chip iron-icon {
|
|
61
|
+
margin: 2px 4px;
|
|
62
|
+
color: #cdcdcd;
|
|
63
|
+
background-color: #a6a6a6;
|
|
64
|
+
border-radius: 500px;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
min-width: 16px;
|
|
67
|
+
width: 16px;
|
|
68
|
+
min-height: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
}
|
|
93
71
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<div class="chip"><span>[[ _getChipText(item, tree) ]]</span><iron-icon icon="clear" on-click="_clearItemSelection"></iron-icon></div>
|
|
105
|
-
</template>
|
|
106
|
-
</div>
|
|
107
|
-
</template>
|
|
72
|
+
#dialogTree {
|
|
73
|
+
min-width: 250px !important;
|
|
74
|
+
width: 450px;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
77
|
+
<div class="actions">
|
|
78
|
+
<paper-button class="open" raised on-click="openDialogTree">
|
|
79
|
+
<div class="pathToNode">[[ _getButtonLabel(nodesOnNodePath, buttonTextPlaceholder) ]]</div>
|
|
80
|
+
</paper-button>
|
|
81
|
+
<paper-icon-button icon="clear" on-click="reset" hidden$="[[ !_enableReset(nodePath, noReset) ]]"></paper-icon-button>
|
|
108
82
|
</div>
|
|
83
|
+
<template is="dom-if" if="[[ _showSelectedNodes(multiSelection, selectedNodes.length) ]]">
|
|
84
|
+
<div id="chips" class="row">
|
|
85
|
+
<template is="dom-repeat" items="[[ selectedNodes ]]">
|
|
86
|
+
<div class="chip"><span>[[ _getChipText(item, tree) ]]</span><iron-icon icon="clear" on-click="_clearItemSelection"></iron-icon></div>
|
|
87
|
+
</template>
|
|
88
|
+
</div>
|
|
89
|
+
</template>
|
|
109
90
|
|
|
110
91
|
<cosmoz-dialog id="dialogTree" class="treeDialog" on-iron-overlay-opened="focusSearch" modal prerender>
|
|
111
92
|
<template>
|
|
112
93
|
<h2>[[ dialogText ]]</h2>
|
|
113
|
-
<cosmoz-treenode-navigator id="treeNavigator" tree="[[ tree ]]" selected-node="{{ selectedNode }}"
|
|
94
|
+
<cosmoz-treenode-navigator id="treeNavigator" class="no-padding" tree="[[ tree ]]" selected-node="{{ selectedNode }}"
|
|
114
95
|
on-data-plane-changed="refit" highlighted-node-path="{{ highlightedNodePath }}"
|
|
115
96
|
search-placeholder="[[ searchPlaceholder ]]" search-global-placeholder="[[ searchGlobalPlaceholder ]]"
|
|
116
97
|
search-min-length="[[ searchMinLength ]]" node-path="{{ nodePath }}" nodes-on-node-path="{{ nodesOnNodePath }}"
|
|
117
98
|
on-node-dblclicked="_selectNodeAndCloseDialog">
|
|
118
|
-
|
|
99
|
+
<slot></slot>
|
|
119
100
|
</cosmoz-treenode-navigator>
|
|
120
101
|
<div class="buttons">
|
|
121
|
-
<paper-button disabled="[[!highlightedNodePath]]" dialog-confirm autofocus on-
|
|
102
|
+
<paper-button disabled="[[!highlightedNodePath]]" dialog-confirm autofocus on-click="selectNode">[[ _('Select', t) ]]</paper-button>
|
|
122
103
|
<paper-button dialog-dismiss>[[ _('Cancel', t) ]]</paper-button>
|
|
123
104
|
</div>
|
|
124
105
|
</template>
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import '@webcomponents/shadycss/entrypoints/apply-shim';
|
|
2
|
-
|
|
3
1
|
import '@polymer/polymer/lib/elements/custom-style';
|
|
4
|
-
import '@polymer/iron-flex-layout/iron-flex-layout-classes';
|
|
5
2
|
import '@polymer/paper-input/paper-input';
|
|
6
3
|
import '@polymer/paper-button/paper-button';
|
|
7
4
|
import '@polymer/paper-icon-button/paper-icon-button';
|
|
@@ -26,8 +23,7 @@ class CosmozTreenodeNavigator extends translatable(PolymerElement) {
|
|
|
26
23
|
/* eslint-disable-next-line max-lines-per-function */
|
|
27
24
|
static get template() {
|
|
28
25
|
return html`
|
|
29
|
-
|
|
30
|
-
<style include="iron-flex iron-flex-alignment">
|
|
26
|
+
<style>
|
|
31
27
|
:host {
|
|
32
28
|
--cosmoz-treenode-navigator-select-node-icon-color: var(--primary-color, white);
|
|
33
29
|
--cosmoz-treenode-navigator-list-item-focused-color: #f0f8ff;
|
|
@@ -42,6 +38,12 @@ class CosmozTreenodeNavigator extends translatable(PolymerElement) {
|
|
|
42
38
|
color: inherit;
|
|
43
39
|
}
|
|
44
40
|
|
|
41
|
+
.path {
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
flex-wrap: wrap;
|
|
45
|
+
}
|
|
46
|
+
|
|
45
47
|
.section {
|
|
46
48
|
background-color: #f5f5f5;
|
|
47
49
|
padding: 5px;
|
|
@@ -68,6 +70,8 @@ class CosmozTreenodeNavigator extends translatable(PolymerElement) {
|
|
|
68
70
|
font-weight: 400;
|
|
69
71
|
line-height: 24px;
|
|
70
72
|
height: 40px;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
.node-item.selected {
|
|
@@ -84,18 +88,17 @@ class CosmozTreenodeNavigator extends translatable(PolymerElement) {
|
|
|
84
88
|
color: var(--cosmoz-treenode-navigator-select-node-icon-color);
|
|
85
89
|
}
|
|
86
90
|
</style>
|
|
87
|
-
</custom-style>
|
|
88
91
|
<div id="header">
|
|
89
|
-
<h3 class="
|
|
90
|
-
<paper-icon-button data-path on-
|
|
92
|
+
<h3 class="path">
|
|
93
|
+
<paper-icon-button data-path on-click="openNode" icon="home"></paper-icon-button>
|
|
91
94
|
<template is="dom-repeat" items="[[ _nodesOnOpenNodePath ]]" as="node">
|
|
92
95
|
<span class="slash">/</span>
|
|
93
|
-
<span class="pointer" tabindex="0" data-path$="[[ node.path ]]" on-
|
|
96
|
+
<span class="pointer" tabindex="0" data-path$="[[ node.path ]]" on-click="openNode" on-keydown="_clickOnEnterOrSpace">[[ _getNodeName(node) ]]
|
|
94
97
|
</span>
|
|
95
98
|
</template>
|
|
96
99
|
</h3>
|
|
97
|
-
<paper-input tabindex="0" id="searchInput"
|
|
98
|
-
<paper-icon-button icon="clear" slot="suffix" hidden$="[[ !_search ]]" on-
|
|
100
|
+
<paper-input tabindex="0" id="searchInput" label="[[ searchPlaceholder ]]" title$="[[ searchPlaceholder ]]" value="{{ searchValue }}">
|
|
101
|
+
<paper-icon-button icon="clear" slot="suffix" hidden$="[[ !_search ]]" on-click="_clearSearch"></paper-icon-button>
|
|
99
102
|
</paper-input>
|
|
100
103
|
</div>
|
|
101
104
|
<iron-list id="ironList" items="[[ dataPlane ]]" as="node" selected-item="{{ highlightedNode }}" selection-enabled>
|
|
@@ -103,15 +106,15 @@ class CosmozTreenodeNavigator extends translatable(PolymerElement) {
|
|
|
103
106
|
<div tabindex$="[[ tabIndex ]]">
|
|
104
107
|
<div hidden$="[[ !_renderSection(_search, index, dataPlane, node.parentSectionName) ]]" class="section">[[ node.parentSectionName ]]
|
|
105
108
|
</div>
|
|
106
|
-
<div class$="[[_computeRowClass('node-item pointer
|
|
107
|
-
<div
|
|
108
|
-
<paper-icon-button hidden$="[[ !hasChildren(node) ]]" icon="icons:arrow-forward" data-path$="[[ node.path ]]" on-
|
|
109
|
+
<div class$="[[_computeRowClass('node-item pointer', selected)]]">
|
|
110
|
+
<div style="flex: auto" on-dblclick="_onNodeDblClicked">[[ node.name ]]</div>
|
|
111
|
+
<paper-icon-button hidden$="[[ !hasChildren(node) ]]" icon="icons:arrow-forward" data-path$="[[ node.path ]]" on-click="openNode">
|
|
109
112
|
</paper-icon-button>
|
|
110
113
|
</div>
|
|
111
114
|
</div>
|
|
112
115
|
</template>
|
|
113
116
|
</iron-list>
|
|
114
|
-
<paper-button hidden$="[[ !_showGlobalSearchBtn(_search, _openNodePath) ]]" on-
|
|
117
|
+
<paper-button hidden$="[[ !_showGlobalSearchBtn(_search, _openNodePath) ]]" on-click="tryGlobalSearch">[[ searchGlobalPlaceholder ]]
|
|
115
118
|
</paper-button>
|
|
116
119
|
`;
|
|
117
120
|
}
|
package/demo/index.html
CHANGED
|
@@ -4,20 +4,21 @@
|
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
6
6
|
<title>cosmoz-treenode-navigator demo</title>
|
|
7
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
|
8
|
+
<script type="module">
|
|
9
|
+
import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
|
|
10
|
+
import "@polymer/iron-demo-helpers/demo-snippet.js";
|
|
11
|
+
import "@polymer/iron-ajax/iron-ajax.js";
|
|
12
|
+
import "../cosmoz-treenode-navigator.js";
|
|
13
|
+
import "../cosmoz-treenode-button-view.js";
|
|
7
14
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<script type="module" src="../cosmoz-treenode-navigator.js"></script>
|
|
16
|
-
<script type="module" src="../cosmoz-treenode-button-view.js"></script>
|
|
17
|
-
|
|
18
|
-
<custom-style>
|
|
19
|
-
<style is="custom-style" include="demo-pages-shared-styles"></style>
|
|
20
|
-
</custom-style>
|
|
15
|
+
const $documentContainer = document.createElement('template');
|
|
16
|
+
$documentContainer.innerHTML = `
|
|
17
|
+
<custom-style>
|
|
18
|
+
<style is="custom-style" include="demo-pages-shared-styles"></style>
|
|
19
|
+
</custom-style>`;
|
|
20
|
+
document.head.appendChild($documentContainer.content);
|
|
21
|
+
</script>
|
|
21
22
|
</head>
|
|
22
23
|
|
|
23
24
|
<body>
|
|
@@ -35,8 +36,8 @@
|
|
|
35
36
|
<iron-ajax url="data/adminFiles.json" handle-as="json" last-response="{{ treeData1 }}" auto="[[ doRequest ]]">
|
|
36
37
|
</iron-ajax>
|
|
37
38
|
<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node"
|
|
38
|
-
node-path="{{ path1 }}" selected-node="{{ selectedNode1 }}" tree="[[ getTree(treeData1) ]]"
|
|
39
|
-
|
|
39
|
+
node-path="{{ path1 }}" selected-node="{{ selectedNode1 }}" tree="[[ getTree(treeData1) ]]"
|
|
40
|
+
></cosmoz-treenode-button-view>
|
|
40
41
|
</template>
|
|
41
42
|
</dom-bind>
|
|
42
43
|
</template>
|
|
@@ -54,8 +55,9 @@
|
|
|
54
55
|
<template is="dom-bind">
|
|
55
56
|
<iron-ajax url="data/johnFiles.json" handle-as="json" last-response="{{ treeData2 }}" auto="[[ doRequest ]]">
|
|
56
57
|
</iron-ajax>
|
|
57
|
-
<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node" node-path="{{ path2 }}" selected-node="{{ selectedNode2 }}"
|
|
58
|
-
|
|
58
|
+
<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node" node-path="{{ path2 }}" selected-node="{{ selectedNode2 }}"
|
|
59
|
+
tree="[[ getTree(treeData2) ]]" multi-selection
|
|
60
|
+
></cosmoz-treenode-button-view>
|
|
59
61
|
</template>
|
|
60
62
|
</dom-bind>
|
|
61
63
|
</template>
|
package/demo/rtl.html
CHANGED
|
@@ -4,20 +4,20 @@
|
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
6
6
|
<title>cosmoz-treenode-navigator demo</title>
|
|
7
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
|
8
|
+
<script type="module">
|
|
9
|
+
import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
|
|
10
|
+
import "@polymer/iron-demo-helpers/demo-snippet.js";
|
|
11
|
+
import "../cosmoz-treenode-navigator.js";
|
|
12
|
+
import "../cosmoz-treenode-button-view.js";
|
|
7
13
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<script type="module" src="../cosmoz-treenode-navigator.js"></script>
|
|
16
|
-
<script type="module" src="../cosmoz-treenode-button-view.js"></script>
|
|
17
|
-
|
|
18
|
-
<custom-style>
|
|
19
|
-
<style is="custom-style" include="demo-pages-shared-styles"></style>
|
|
20
|
-
</custom-style>
|
|
14
|
+
const $documentContainer = document.createElement('template');
|
|
15
|
+
$documentContainer.innerHTML = `
|
|
16
|
+
<custom-style>
|
|
17
|
+
<style is="custom-style" include="demo-pages-shared-styles"></style>
|
|
18
|
+
</custom-style>`;
|
|
19
|
+
document.head.appendChild($documentContainer.content);
|
|
20
|
+
</script>
|
|
21
21
|
</head>
|
|
22
22
|
|
|
23
23
|
<body>
|
|
@@ -30,8 +30,6 @@
|
|
|
30
30
|
<template>
|
|
31
31
|
<dom-bind id="demo1">
|
|
32
32
|
<template is="dom-bind">
|
|
33
|
-
<iron-ajax url="../test/data/rtlTest.json" handle-as="json" last-response="{{ treeData1 }}" auto="[[ doRequest ]]">
|
|
34
|
-
</iron-ajax>
|
|
35
33
|
<cosmoz-treenode-button-view id="navigator" button-text-placeholder="Click to select a node" node-path="{{ path1 }}" selected-node="{{ selectedNode1 }}" tree="[[ getTree(treeData1) ]]">
|
|
36
34
|
</cosmoz-treenode-button-view>
|
|
37
35
|
</template>
|
|
@@ -41,6 +39,7 @@
|
|
|
41
39
|
</div>
|
|
42
40
|
<script type="module">
|
|
43
41
|
import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
|
|
42
|
+
import treeData1 from '../test/data/rtlTest';
|
|
44
43
|
const getTree = data => {
|
|
45
44
|
if (data) {
|
|
46
45
|
return new DefaultTree(data);
|
|
@@ -50,7 +49,7 @@
|
|
|
50
49
|
let tpl = document.getElementById(id);
|
|
51
50
|
tpl = !tpl.set ? tpl.firstElementChild : tpl;
|
|
52
51
|
tpl.getTree = getTree;
|
|
53
|
-
tpl.
|
|
52
|
+
tpl.treeData1 = treeData1;
|
|
54
53
|
};
|
|
55
54
|
initTemplate('demo1');
|
|
56
55
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-treenode-navigator",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.5",
|
|
4
4
|
"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"polymer",
|
|
@@ -21,10 +21,11 @@
|
|
|
21
21
|
"test": "test"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"test": "
|
|
24
|
+
"lint": "eslint --cache --ext .js .",
|
|
25
|
+
"start": "wds",
|
|
26
|
+
"test": "wtr --coverage",
|
|
27
|
+
"test:watch": "wtr --watch",
|
|
28
|
+
"prepare": "husky install"
|
|
28
29
|
},
|
|
29
30
|
"release": {
|
|
30
31
|
"plugins": [
|
|
@@ -45,48 +46,36 @@
|
|
|
45
46
|
"@commitlint/config-conventional"
|
|
46
47
|
]
|
|
47
48
|
},
|
|
48
|
-
"husky": {
|
|
49
|
-
"hooks": {
|
|
50
|
-
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
49
|
"dependencies": {
|
|
54
|
-
"@neovici/cosmoz-dialog": "^3.0.
|
|
55
|
-
"@neovici/cosmoz-i18next": "^3.0
|
|
56
|
-
"@neovici/cosmoz-tree": "^3.0.
|
|
57
|
-
"@polymer/iron-flex-layout": "^3.0.0",
|
|
50
|
+
"@neovici/cosmoz-dialog": "^3.0.0",
|
|
51
|
+
"@neovici/cosmoz-i18next": "^3.2.0",
|
|
52
|
+
"@neovici/cosmoz-tree": "^3.0.0",
|
|
58
53
|
"@polymer/iron-icons": "^3.0.0",
|
|
59
|
-
"@polymer/iron-list": "^3.
|
|
54
|
+
"@polymer/iron-list": "^3.1.0",
|
|
60
55
|
"@polymer/paper-button": "^3.0.0",
|
|
61
56
|
"@polymer/paper-icon-button": "^3.0.0",
|
|
62
|
-
"@polymer/paper-input": "^3.
|
|
63
|
-
"@polymer/polymer": "^3.
|
|
64
|
-
"@
|
|
57
|
+
"@polymer/paper-input": "^3.2.0",
|
|
58
|
+
"@polymer/polymer": "^3.4.0",
|
|
59
|
+
"@web/dev-server": "^0.1.25",
|
|
60
|
+
"@web/test-runner": "^0.13.19",
|
|
61
|
+
"@web/test-runner-selenium": "^0.5.2",
|
|
62
|
+
"@webcomponents/shadycss": "^1.0.0"
|
|
65
63
|
},
|
|
66
64
|
"devDependencies": {
|
|
67
|
-
"@commitlint/cli": "^
|
|
68
|
-
"@commitlint/config-conventional": "^
|
|
69
|
-
"@neovici/eslint-config": "^1.
|
|
70
|
-
"@
|
|
65
|
+
"@commitlint/cli": "^13.0.0",
|
|
66
|
+
"@commitlint/config-conventional": "^13.0.0",
|
|
67
|
+
"@neovici/eslint-config": "^1.3.0",
|
|
68
|
+
"@open-wc/testing": "^2.5.33",
|
|
71
69
|
"@polymer/iron-ajax": "^3.0.0",
|
|
72
70
|
"@polymer/iron-component-page": "^4.0.0",
|
|
73
71
|
"@polymer/iron-demo-helpers": "^3.0.0",
|
|
74
72
|
"@polymer/iron-test-helpers": "^3.0.0",
|
|
75
73
|
"@polymer/test-fixture": "^4.0.2",
|
|
76
|
-
"@semantic-release/changelog": "^
|
|
77
|
-
"@semantic-release/git": "^
|
|
74
|
+
"@semantic-release/changelog": "^6.0.0",
|
|
75
|
+
"@semantic-release/git": "^10.0.0",
|
|
78
76
|
"@webcomponents/webcomponentsjs": "^2.0.0",
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"eslint-plugin-html": "^5.0.3",
|
|
83
|
-
"eslint-plugin-import": "^2.17.3",
|
|
84
|
-
"eslint-plugin-mocha": "^5.3.0",
|
|
85
|
-
"husky": "^3.0.9",
|
|
86
|
-
"mocha": "^6.2.1",
|
|
87
|
-
"polymer-cli": "^1.9.1",
|
|
88
|
-
"semantic-release": "^16.0.0-beta.25",
|
|
89
|
-
"wct-istanbul": "^0.14.3",
|
|
90
|
-
"wct-mocha": "^1.0.1"
|
|
77
|
+
"eslint": "^7.0.0",
|
|
78
|
+
"husky": "^6.0.0",
|
|
79
|
+
"semantic-release": "^18.0.0"
|
|
91
80
|
}
|
|
92
81
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
2
|
+
import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
|
|
3
|
+
import rtlData from './data/rtlTest.js';
|
|
4
|
+
import '../cosmoz-treenode-button-view';
|
|
5
|
+
|
|
6
|
+
suite('rtl', () => {
|
|
7
|
+
let treeButton;
|
|
8
|
+
|
|
9
|
+
suiteSetup(async () => {
|
|
10
|
+
treeButton = await fixture(html`<cosmoz-treenode-button-view .tree=${ new DefaultTree(rtlData) }>`);
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
test('button renders selected path', done => {
|
|
14
|
+
treeButton.nodePath = '1.2.3';
|
|
15
|
+
|
|
16
|
+
// Button view label depends on a binding in a cosmoz-treenode-navigator
|
|
17
|
+
// stamped asynchronously, so we need to wait a bit.
|
|
18
|
+
setTimeout(() => {
|
|
19
|
+
const buttonLabel = treeButton.shadowRoot.querySelector('.pathToNode').textContent;
|
|
20
|
+
assert.equal(buttonLabel, '1 / 2 / 3');
|
|
21
|
+
done();
|
|
22
|
+
}, 500);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
/*
|
|
26
|
+
// commented out because test is unstable
|
|
27
|
+
function isIdActiveElement(id, element, idPreviouslyFound) {
|
|
28
|
+
let idFound = idPreviouslyFound || element && element.id === id;
|
|
29
|
+
|
|
30
|
+
if (element != null && element.shadowRoot != null) {
|
|
31
|
+
return isIdActiveElement(id, element.shadowRoot.activeElement, idFound);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// active element not null means that it has focus
|
|
35
|
+
return element != null && idFound;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
test('search input has focus when dialog has opened', done => {
|
|
39
|
+
treeButton.$$('.pathToNode').click();
|
|
40
|
+
Polymer.Base.async(() => {
|
|
41
|
+
// real focus can only be tested here, not valid outside test()
|
|
42
|
+
if (window.document.hasFocus()) {
|
|
43
|
+
assert.equal(isIdActiveElement('searchInput', window.document.activeElement), true);
|
|
44
|
+
}
|
|
45
|
+
if (treeButton.$.dialogTree != null) {
|
|
46
|
+
treeButton.$.dialogTree.close();
|
|
47
|
+
}
|
|
48
|
+
done();
|
|
49
|
+
}, 50);
|
|
50
|
+
});
|
|
51
|
+
*/
|
|
52
|
+
});
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
2
|
+
import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
|
|
3
|
+
import basicTree from './data/basicTree.js';
|
|
4
|
+
import { flush } from '@polymer/polymer/lib/utils/flush';
|
|
5
|
+
import '../cosmoz-treenode-navigator';
|
|
6
|
+
|
|
7
|
+
suite('cosmoz-treenode-navigator', () => {
|
|
8
|
+
let navigator;
|
|
9
|
+
|
|
10
|
+
setup(async () => {
|
|
11
|
+
navigator = await fixture(html`<cosmoz-treenode-navigator .tree=${ new DefaultTree(basicTree) }>`);
|
|
12
|
+
flush();
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
test('instantiating the element', () => {
|
|
16
|
+
assert.equal(navigator.tagName, 'COSMOZ-TREENODE-NAVIGATOR');
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
test('dataPlane initialised with tree', () => {
|
|
20
|
+
assert.equal(navigator.dataPlane[0].name, 'Root');
|
|
21
|
+
assert.equal(
|
|
22
|
+
navigator.dataPlane.length,
|
|
23
|
+
navigator.tree._roots.length
|
|
24
|
+
);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
test('tree length and sort', () => {
|
|
28
|
+
// given a node navigator with some data
|
|
29
|
+
|
|
30
|
+
// when I enter the first node
|
|
31
|
+
navigator.shadowRoot
|
|
32
|
+
.querySelector('#ironList paper-icon-button')
|
|
33
|
+
.click();
|
|
34
|
+
flush();
|
|
35
|
+
|
|
36
|
+
// then I can see the contents of the node
|
|
37
|
+
// and it is ordered folder-first, then alphabetically
|
|
38
|
+
assert.equal(navigator.dataPlane[0].name, 'Node2');
|
|
39
|
+
assert.equal(navigator.dataPlane[1].name, 'Node4');
|
|
40
|
+
assert.equal(navigator.dataPlane[2].name, 'Node');
|
|
41
|
+
assert.equal(navigator.dataPlane[3].name, 'Node');
|
|
42
|
+
assert.equal(navigator.dataPlane.length, 4);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
test('match search string', () => {
|
|
46
|
+
// given a node navigator with some data
|
|
47
|
+
// when I search for 'ode2'
|
|
48
|
+
navigator.searchValue = 'ode2';
|
|
49
|
+
flush();
|
|
50
|
+
|
|
51
|
+
//then I can see only 1 item matching 'ode2'
|
|
52
|
+
assert.lengthOf(navigator.dataPlane, 1);
|
|
53
|
+
assert.equal(navigator.dataPlane[0].name, 'Node2');
|
|
54
|
+
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
test('not match search string', () => {
|
|
58
|
+
// given a node navigator with some data
|
|
59
|
+
// when I search for 'NONEXISTING'
|
|
60
|
+
navigator.searchValue = 'NONEXISTING';
|
|
61
|
+
flush();
|
|
62
|
+
|
|
63
|
+
//then I can see that is no contents
|
|
64
|
+
assert.lengthOf(navigator.dataPlane, 0);
|
|
65
|
+
});
|
|
66
|
+
});
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
1: {
|
|
3
|
+
id: '11111111-1111-1111-1111-111111111111',
|
|
4
|
+
name: 'Root',
|
|
5
|
+
pathLocator: '1',
|
|
6
|
+
children: {
|
|
7
|
+
6: {
|
|
8
|
+
id: '2b577550-b874-4228-9395-a4fb00f31245',
|
|
9
|
+
name: 'Node',
|
|
10
|
+
pathLocator: '1.6',
|
|
11
|
+
children: {}
|
|
12
|
+
},
|
|
13
|
+
7: {
|
|
14
|
+
id: '2b577550-b874-4228-9395-a4fb00f31245',
|
|
15
|
+
name: 'Node',
|
|
16
|
+
pathLocator: '1.7',
|
|
17
|
+
children: {}
|
|
18
|
+
},
|
|
19
|
+
4: {
|
|
20
|
+
id: '177d1485-7d4f-4c7d-86cd-a4fb00f31245',
|
|
21
|
+
name: 'Node4',
|
|
22
|
+
pathLocator: '1.2.3.4',
|
|
23
|
+
children: {
|
|
24
|
+
5: {
|
|
25
|
+
id: '3a7754f1-e3e6-49c7-b6a8-a4fb00f31245',
|
|
26
|
+
name: 'Node5',
|
|
27
|
+
pathLocator: '1.2.3.4.5',
|
|
28
|
+
children: {
|
|
29
|
+
501: {
|
|
30
|
+
id: '3a7754f1-e3e6-49c7-b6a8-a4fb00f31245',
|
|
31
|
+
name: 'Node501',
|
|
32
|
+
pathLocator: '1.2.3.4.5.501',
|
|
33
|
+
children: {}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
2: {
|
|
40
|
+
id: '167d1485-7d4f-4c7d-86cd-a4fb00f31245',
|
|
41
|
+
name: 'Node2',
|
|
42
|
+
pathLocator: '1.2',
|
|
43
|
+
children: {
|
|
44
|
+
3: {
|
|
45
|
+
id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
|
|
46
|
+
name: 'Node3',
|
|
47
|
+
pathLocator: '1.2.3',
|
|
48
|
+
children: {
|
|
49
|
+
301: {
|
|
50
|
+
id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
|
|
51
|
+
name: 'Node301',
|
|
52
|
+
pathLocator: '1.2.3.301',
|
|
53
|
+
children: {}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
1: {
|
|
3
|
+
id: '11111111-1111-1111-1111-111111111111',
|
|
4
|
+
name: '1',
|
|
5
|
+
pathLocator: '1',
|
|
6
|
+
children: {
|
|
7
|
+
2: {
|
|
8
|
+
id: '167d1485-7d4f-4c7d-86cd-a4fb00f31245',
|
|
9
|
+
name: '2',
|
|
10
|
+
pathLocator: '1.2',
|
|
11
|
+
children: {
|
|
12
|
+
3: {
|
|
13
|
+
id: '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245',
|
|
14
|
+
name: '3',
|
|
15
|
+
pathLocator: '1.2.3'
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* eslint-env node */
|
|
2
|
+
export default {
|
|
3
|
+
appIndex: 'demo/index.html',
|
|
4
|
+
open: true,
|
|
5
|
+
preserveSymlinks: true,
|
|
6
|
+
nodeResolve: {
|
|
7
|
+
mainFields: ['browser', 'jsnext', 'jsnext:main', 'module', 'main'],
|
|
8
|
+
dedupe: pkg => ['@neovici', '@polymer', 'lit', 'haunted'].find(prefix => pkg.startsWith(prefix))
|
|
9
|
+
}
|
|
10
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { chromeLauncher } from '@web/test-runner';
|
|
2
|
+
import { seleniumLauncher } from '@web/test-runner-selenium';
|
|
3
|
+
import webdriver from 'selenium-webdriver';
|
|
4
|
+
import firefox from 'selenium-webdriver/firefox.js';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
nodeResolve: true,
|
|
8
|
+
coverageConfig: {
|
|
9
|
+
reportDir: 'coverage',
|
|
10
|
+
threshold: {
|
|
11
|
+
statements: 70,
|
|
12
|
+
branches: 70,
|
|
13
|
+
functions: 50,
|
|
14
|
+
lines: 70
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
files: [
|
|
18
|
+
'**!(node_modules)/*.test.js'
|
|
19
|
+
],
|
|
20
|
+
testFramework: { config: { ui: 'tdd' }},
|
|
21
|
+
browsers: [
|
|
22
|
+
chromeLauncher(),
|
|
23
|
+
seleniumLauncher({
|
|
24
|
+
driverBuilder: new webdriver.Builder().forBrowser('firefox').setFirefoxOptions(new firefox.Options().headless())
|
|
25
|
+
})
|
|
26
|
+
]
|
|
27
|
+
|
|
28
|
+
};
|
package/index.html
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
6
|
-
<title>cosmoz-treenode-navigator</title>
|
|
7
|
-
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
|
8
|
-
<script type="module" src="/components/@polymer/iron-component-page/iron-component-page.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<iron-component-page></iron-component-page>
|
|
12
|
-
</body></html>
|
package/polymer.json
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
|
|
3
|
-
<html>
|
|
4
|
-
<head>
|
|
5
|
-
<title>cosmoz-treenode-navigator test</title>
|
|
6
|
-
<meta charset="utf-8">
|
|
7
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
8
|
-
|
|
9
|
-
<title>cosmoz-treenode-navigator test</title>
|
|
10
|
-
|
|
11
|
-
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
12
|
-
<script src="/components/mocha/mocha.js"></script>
|
|
13
|
-
<script src="/components/wct-mocha/wct-mocha.js"></script>
|
|
14
|
-
<script src="/components/chai/chai.js"></script>
|
|
15
|
-
<script src="/components/@polymer/test-fixture/test-fixture-mocha.js"></script>
|
|
16
|
-
|
|
17
|
-
<script type="module" src="/components/@polymer/test-fixture/test-fixture.js"></script>
|
|
18
|
-
<script type="module" src="/components/@polymer/iron-test-helpers/iron-test-helpers.js"></script>
|
|
19
|
-
|
|
20
|
-
<script type="module" src="../cosmoz-treenode-button-view.js"></script>
|
|
21
|
-
<script type="module" src="/components/@polymer/iron-ajax/iron-ajax.js"></script>
|
|
22
|
-
|
|
23
|
-
<script type="module" src="/components/@polymer/polymer/lib/utils/async.js"></script>
|
|
24
|
-
</head>
|
|
25
|
-
<body>
|
|
26
|
-
<test-fixture id="rtl">
|
|
27
|
-
<template>
|
|
28
|
-
<cosmoz-treenode-button-view></cosmoz-treenode-button-view>
|
|
29
|
-
<iron-ajax auto
|
|
30
|
-
url="data/rtlTest.json"
|
|
31
|
-
handle-as="json">
|
|
32
|
-
</iron-ajax>
|
|
33
|
-
</template>
|
|
34
|
-
</test-fixture>
|
|
35
|
-
|
|
36
|
-
<script type="module">
|
|
37
|
-
import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
|
|
38
|
-
suite('rtl', () => {
|
|
39
|
-
let buttonFixture,
|
|
40
|
-
tree,
|
|
41
|
-
treeButton;
|
|
42
|
-
|
|
43
|
-
suiteSetup(done => {
|
|
44
|
-
buttonFixture = fixture('rtl');
|
|
45
|
-
const ajax = buttonFixture.find(n => {
|
|
46
|
-
return n.is === 'iron-ajax';
|
|
47
|
-
});
|
|
48
|
-
treeButton = buttonFixture.find(n => {
|
|
49
|
-
return n.tagName === 'COSMOZ-TREENODE-BUTTON-VIEW';
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
ajax.addEventListener('response', () => {
|
|
53
|
-
tree = new DefaultTree(ajax.lastResponse);
|
|
54
|
-
treeButton.tree = tree;
|
|
55
|
-
done();
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
test('button renders selected path', done => {
|
|
60
|
-
treeButton.nodePath = '1.2.3';
|
|
61
|
-
// Button view label depends on a binding in a cosmoz-treenode-navigator
|
|
62
|
-
// stamped asynchronously, so we need to wait a bit.
|
|
63
|
-
setTimeout(() => {
|
|
64
|
-
const buttonLabel = treeButton.shadowRoot.querySelector('.pathToNode').textContent;
|
|
65
|
-
assert.equal(buttonLabel, '1 / 2 / 3');
|
|
66
|
-
done();
|
|
67
|
-
}, 500);
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
/*
|
|
71
|
-
// commented out because test is unstable
|
|
72
|
-
function isIdActiveElement(id, element, idPreviouslyFound) {
|
|
73
|
-
let idFound = idPreviouslyFound || element && element.id === id;
|
|
74
|
-
|
|
75
|
-
if (element != null && element.shadowRoot != null) {
|
|
76
|
-
return isIdActiveElement(id, element.shadowRoot.activeElement, idFound);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// active element not null means that it has focus
|
|
80
|
-
return element != null && idFound;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
test('search input has focus when dialog has opened', done => {
|
|
84
|
-
treeButton.$$('.pathToNode').click();
|
|
85
|
-
Polymer.Base.async(() => {
|
|
86
|
-
// real focus can only be tested here, not valid outside test()
|
|
87
|
-
if (window.document.hasFocus()) {
|
|
88
|
-
assert.equal(isIdActiveElement('searchInput', window.document.activeElement), true);
|
|
89
|
-
}
|
|
90
|
-
if (treeButton.$.dialogTree != null) {
|
|
91
|
-
treeButton.$.dialogTree.close();
|
|
92
|
-
}
|
|
93
|
-
done();
|
|
94
|
-
}, 50);
|
|
95
|
-
});
|
|
96
|
-
*/
|
|
97
|
-
});
|
|
98
|
-
</script>
|
|
99
|
-
</body></html>
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
|
|
3
|
-
<html>
|
|
4
|
-
<head>
|
|
5
|
-
<title>cosmoz-treenode-navigator test</title>
|
|
6
|
-
<meta charset="utf-8">
|
|
7
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
8
|
-
|
|
9
|
-
<title>cosmoz-treenode-navigator test</title>
|
|
10
|
-
|
|
11
|
-
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
12
|
-
<script src="/components/mocha/mocha.js"></script>
|
|
13
|
-
<script src="/components/wct-mocha/wct-mocha.js"></script>
|
|
14
|
-
<script src="/components/chai/chai.js"></script>
|
|
15
|
-
<script src="/components/@polymer/test-fixture/test-fixture-mocha.js"></script>
|
|
16
|
-
|
|
17
|
-
<script type="module" src="/components/@polymer/test-fixture/test-fixture.js"></script>
|
|
18
|
-
<script type="module" src="/components/@polymer/iron-test-helpers/iron-test-helpers.js"></script>
|
|
19
|
-
|
|
20
|
-
<script type="module" src="../cosmoz-treenode-navigator.js"></script>
|
|
21
|
-
<script type="module" src="/components/@polymer/iron-ajax/iron-ajax.js"></script>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
<test-fixture id="basic">
|
|
25
|
-
<template>
|
|
26
|
-
<cosmoz-treenode-navigator></cosmoz-treenode-navigator>
|
|
27
|
-
<iron-ajax auto
|
|
28
|
-
url="data/basicTree.json"
|
|
29
|
-
handle-as="json"
|
|
30
|
-
last-response="{{ basicTree }}">
|
|
31
|
-
</iron-ajax>
|
|
32
|
-
</template>
|
|
33
|
-
</test-fixture>
|
|
34
|
-
|
|
35
|
-
<script type="module">
|
|
36
|
-
import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
|
|
37
|
-
suite('cosmoz-treenode-navigator', () => {
|
|
38
|
-
let basicFixture,
|
|
39
|
-
basicTree,
|
|
40
|
-
navigator;
|
|
41
|
-
|
|
42
|
-
suiteSetup(done => {
|
|
43
|
-
basicFixture = fixture('basic');
|
|
44
|
-
const ajax = basicFixture.find(n => {
|
|
45
|
-
return n.is === 'iron-ajax';
|
|
46
|
-
});
|
|
47
|
-
navigator = basicFixture.find(n => {
|
|
48
|
-
return n.tagName === 'COSMOZ-TREENODE-NAVIGATOR';
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
ajax.addEventListener('response', () => {
|
|
52
|
-
basicTree = new DefaultTree(ajax.lastResponse);
|
|
53
|
-
navigator.tree = basicTree;
|
|
54
|
-
done();
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
test('instantiating the element', () => {
|
|
59
|
-
assert.equal(navigator.tagName, 'COSMOZ-TREENODE-NAVIGATOR');
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
test('dataPlane initialised with tree', () => {
|
|
63
|
-
assert.equal(navigator.dataPlane[0].name, 'Root');
|
|
64
|
-
assert.equal(navigator.dataPlane.length, navigator.tree._roots.length);
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
});
|
|
68
|
-
</script>
|
|
69
|
-
</body></html>
|
package/test/data/basicTree.json
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"1": {
|
|
3
|
-
"id": "11111111-1111-1111-1111-111111111111",
|
|
4
|
-
"name": "Root",
|
|
5
|
-
"pathLocator": "1",
|
|
6
|
-
"children": {
|
|
7
|
-
"2": {
|
|
8
|
-
"id": "167d1485-7d4f-4c7d-86cd-a4fb00f31245",
|
|
9
|
-
"name": "Node2",
|
|
10
|
-
"pathLocator": "1.2",
|
|
11
|
-
"children": {
|
|
12
|
-
"3": {
|
|
13
|
-
"id": "3a7654f1-e3e6-49c7-b6a8-a4fb00f31245",
|
|
14
|
-
"name": "Node3",
|
|
15
|
-
"pathLocator": "1.2.3",
|
|
16
|
-
"children": {
|
|
17
|
-
"301": {
|
|
18
|
-
"id": "3a7654f1-e3e6-49c7-b6a8-a4fb00f31245",
|
|
19
|
-
"name": "Node301",
|
|
20
|
-
"pathLocator": "1.2.3.301",
|
|
21
|
-
"children": {
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
"4": {
|
|
30
|
-
"id": "2b547550-b874-4228-9395-a4fb00f31245",
|
|
31
|
-
"name": "Node4",
|
|
32
|
-
"pathLocator": "1.4",
|
|
33
|
-
"children": {}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
package/test/data/rtlTest.json
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"1": {
|
|
3
|
-
"id": "11111111-1111-1111-1111-111111111111",
|
|
4
|
-
"name": "1",
|
|
5
|
-
"pathLocator": "1",
|
|
6
|
-
"children": {
|
|
7
|
-
"2": {
|
|
8
|
-
"id": "167d1485-7d4f-4c7d-86cd-a4fb00f31245",
|
|
9
|
-
"name": "2",
|
|
10
|
-
"pathLocator": "1.2",
|
|
11
|
-
"children": {
|
|
12
|
-
"3": {
|
|
13
|
-
"id": "3a7654f1-e3e6-49c7-b6a8-a4fb00f31245",
|
|
14
|
-
"name": "3",
|
|
15
|
-
"pathLocator": "1.2.3"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
package/test/index.html
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
6
|
-
<title>cosmoz-treenode-navigator tests</title>
|
|
7
|
-
<script src="/components/mocha/mocha.js"></script>
|
|
8
|
-
<script src="/components/wct-mocha/wct-mocha.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<script>
|
|
12
|
-
WCT.loadSuites([
|
|
13
|
-
'cosmoz-treenode-navigator_test.html',
|
|
14
|
-
'cosmoz-treenode-button-view_test.html'
|
|
15
|
-
]);
|
|
16
|
-
</script>
|
|
17
|
-
</body></html>
|
package/wct.conf.json
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"plugins": {
|
|
3
|
-
"local": {
|
|
4
|
-
"browsers": ["chrome", "firefox"],
|
|
5
|
-
"browserOptions": {
|
|
6
|
-
"chrome": [
|
|
7
|
-
"headless",
|
|
8
|
-
"disable-gpu",
|
|
9
|
-
"no-sandbox"
|
|
10
|
-
],
|
|
11
|
-
"firefox": [
|
|
12
|
-
"--headless"
|
|
13
|
-
]
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"istanbul": {
|
|
17
|
-
"dir": "./coverage",
|
|
18
|
-
"reporters": ["text-summary", "lcov"],
|
|
19
|
-
"include": [
|
|
20
|
-
"**/cosmoz-*.js"
|
|
21
|
-
],
|
|
22
|
-
"exclude": []
|
|
23
|
-
},
|
|
24
|
-
"sauce": {
|
|
25
|
-
"browsers": [{
|
|
26
|
-
"browserName": "microsoftedge",
|
|
27
|
-
"platform": "Windows 10",
|
|
28
|
-
"version": ""
|
|
29
|
-
}, {
|
|
30
|
-
"browserName": "chrome",
|
|
31
|
-
"platform": "Windows 10",
|
|
32
|
-
"version": "latest"
|
|
33
|
-
}, {
|
|
34
|
-
"browserName": "chrome",
|
|
35
|
-
"platform": "Windows 10",
|
|
36
|
-
"version": "beta"
|
|
37
|
-
}, {
|
|
38
|
-
"browserName": "firefox",
|
|
39
|
-
"platform": "Windows 10",
|
|
40
|
-
"version": ""
|
|
41
|
-
}, {
|
|
42
|
-
"browserName": "safari",
|
|
43
|
-
"platform": "macOS 10.13",
|
|
44
|
-
"version": "11.1"
|
|
45
|
-
}]
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|