@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.
@@ -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 10.x
17
+ - name: Use Node.js 14.x
18
18
  uses: actions/setup-node@v1
19
19
  with:
20
- node-version: 10.x
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
- run: npx commitlint --from origin/master --to HEAD
34
+ uses: wagoid/commitlint-github-action@v3
27
35
 
28
36
  - name: ESLint
29
- run: npx github-actions-eslint-annotator
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
- npm run test $([ -z "$SAUCE_ACCESS_KEY"] && echo "-- --skip-plugin sauce")
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 }}
@@ -0,0 +1,4 @@
1
+ #!/bin/sh
2
+ . "$(dirname "$0")/_/husky.sh"
3
+
4
+ npx --no-install commitlint --edit $1
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
- <custom-style>
31
- <style include="iron-flex iron-flex-alignment">
32
-
33
- .pathToNode {
34
- max-width: 320px;
35
- overflow: hidden;
36
- text-overflow: ellipsis;
37
- white-space: nowrap;
38
- direction: rtl;
39
- text-align: left;
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
- </style>
92
- </custom-style>
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
- <div class="vertical layout actions">
95
- <div class="horizontal layout actions">
96
- <paper-button class="flex" raised on-tap="openDialogTree">
97
- <div class="pathToNode">[[ _getButtonLabel(nodesOnNodePath, buttonTextPlaceholder) ]]</div>
98
- </paper-button>
99
- <paper-icon-button icon="clear" on-tap="reset" hidden$="[[ !_enableReset(nodePath, noReset) ]]"></paper-icon-button>
100
- </div>
101
- <template is="dom-if" if="[[ _showSelectedNodes(multiSelection, selectedNodes.length) ]]">
102
- <div id="chips" class="row">
103
- <template is="dom-repeat" items="[[ selectedNodes ]]">
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
- <slot></slot>
99
+ <slot></slot>
119
100
  </cosmoz-treenode-navigator>
120
101
  <div class="buttons">
121
- <paper-button disabled="[[!highlightedNodePath]]" dialog-confirm autofocus on-tap="selectNode">[[ _('Select', t) ]]</paper-button>
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
- <custom-style>
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="layout horizontal center wrap">
90
- <paper-icon-button data-path on-tap="openNode" icon="home"></paper-icon-button>
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-tap="openNode" on-keydown="_clickOnEnterOrSpace">[[ _getNodeName(node) ]]
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" class="flex" label="[[ searchPlaceholder ]]" title$="[[ searchPlaceholder ]]" value="{{ searchValue }}">
98
- <paper-icon-button icon="clear" slot="suffix" hidden$="[[ !_search ]]" on-tap="_clearSearch"></paper-icon-button>
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 layout horizontal center', selected)]]">
107
- <div class="flex" on-dblclick="_onNodeDblClicked">[[ node.name ]]</div>
108
- <paper-icon-button hidden$="[[ !hasChildren(node) ]]" icon="icons:arrow-forward" data-path$="[[ node.path ]]" on-tap="openNode">
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-tap="tryGlobalSearch">[[ searchGlobalPlaceholder ]]
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
- <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
9
-
10
- <script type="module" src="/components/@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
11
- <script type="module" src="/components/@polymer/iron-demo-helpers/demo-snippet.js"></script>
12
-
13
- <script type="module" src="/components/@polymer/iron-ajax/iron-ajax.js"></script>
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
- </cosmoz-treenode-button-view>
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 }}" tree="[[ getTree(treeData2) ]]">
58
- </cosmoz-treenode-button-view>
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
- <script src="/components/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
-
10
- <script type="module" src="/components/@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
11
- <script type="module" src="/components/@polymer/iron-demo-helpers/demo-snippet.js"></script>
12
-
13
- <script type="module" src="/components/@polymer/iron-ajax/iron-ajax.js"></script>
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.set('doRequest', true);
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.4",
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
- "analyze": "polymer analyze --input cosmoz-*.js > analysis.json",
25
- "lint": "eslint --cache --ext .js,.html . && polymer lint cosmoz-*.js",
26
- "start": "polymer serve -o",
27
- "test": "polymer 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.2",
55
- "@neovici/cosmoz-i18next": "^3.0.2",
56
- "@neovici/cosmoz-tree": "^3.0.3",
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.0.0",
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.0.0",
63
- "@polymer/polymer": "^3.0.0",
64
- "@webcomponents/shadycss": "^1.9.1"
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": "^8.2.0",
68
- "@commitlint/config-conventional": "^8.2.0",
69
- "@neovici/eslint-config": "^1.1.7",
70
- "@neovici/github-actions-eslint-annotator": "^0.3.0",
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": "^3.0.4",
77
- "@semantic-release/git": "^7.0.16",
74
+ "@semantic-release/changelog": "^6.0.0",
75
+ "@semantic-release/git": "^10.0.0",
78
76
  "@webcomponents/webcomponentsjs": "^2.0.0",
79
- "babel-eslint": "^10.0.2",
80
- "chai": "^4.2.0",
81
- "eslint": "^5.15.1",
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,6 +0,0 @@
1
- {
2
- "npm": true,
3
- "lint": {
4
- "rules": ["polymer-3"]
5
- }
6
- }
@@ -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>
@@ -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
-
@@ -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
- }