sf-i-events 1.0.748 → 1.0.749

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.
Files changed (31) hide show
  1. package/.babelrc +3 -3
  2. package/CHANGELOG.md +41 -41
  3. package/LICENSE +27 -27
  4. package/README copy.md +588 -588
  5. package/README.md +2 -2
  6. package/coverage/lcov-report/base.css +224 -224
  7. package/coverage/lcov-report/block-navigation.js +87 -87
  8. package/coverage/lcov-report/index.html +145 -145
  9. package/coverage/lcov-report/prettify.css +1 -1
  10. package/coverage/lcov-report/prettify.js +2 -2
  11. package/coverage/lcov-report/sf-i-select.ts.html +4383 -4383
  12. package/coverage/lcov-report/sorter.js +196 -196
  13. package/coverage/lcov.info +1719 -1719
  14. package/dev/index.html +708 -682
  15. package/index.html +11 -11
  16. package/package.json +96 -96
  17. package/rollup.config.js +38 -38
  18. package/sf-i-events.d.ts +11 -4
  19. package/sf-i-events.js +12293 -11527
  20. package/src/sf-i-events.ts +25417 -24536
  21. package/src/test/sf-i-form_test.ts +23 -23
  22. package/src/util.ts +459 -459
  23. package/test/sf-i-select_test.d.ts +6 -6
  24. package/test/sf-i-select_test.js +17 -17
  25. package/test/sf-nav_profile_test.d.ts +6 -6
  26. package/test/sf-nav_profile_test.js +138 -138
  27. package/test/sf-nav_test.d.ts +6 -6
  28. package/test/sf-nav_test.js +357 -357
  29. package/tsconfig.json +34 -34
  30. package/web-dev-server.config.js +25 -25
  31. package/web-test-runner.config.js +124 -124
package/test/sf-nav_test.js CHANGED
@@ -1,358 +1,358 @@
1
- /**
2
- * @license
3
- * Copyright 2022 Superflows.dev
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { SfNav } from '../sf-nav.js';
7
- import { stub } from 'sinon';
8
- import { fixture, assert } from '@open-wc/testing';
9
- // import {assert} from '@open-wc/testing';
10
- import { html } from 'lit/static-html.js';
11
- import DownloadFile from '../downloadFile.js';
12
- //const TIMEOUT = 2000;
13
- const htmlContent = html `
14
- <sf-nav >
15
- <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
16
- <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
17
- <ul slot="mainMenu">
18
- <li><a href="#about" class="a-about">About</a></li>
19
- <li class="li-solutions">
20
- <a href="javascript:void(0);" class="a-solutions">Solutions</a>
21
- <ul>
22
- <li><a href="#services" class="a-services">Services</a></li>
23
- <li><a href="#products">Products</a></li>
24
- </ul>
25
- </li>
26
- <li>
27
- <a href="javascript:void(0);">Contact Us</a>
28
- <ul>
29
- <li><a href="https://instagram.com">Instagram</a></li>
30
- <li><a href="https://facebook.com">Facebook</a></li>
31
- </ul>
32
- </li>
33
- </ul>
34
- <!-- Set the notifications -->
35
- <ul slot="unreadNotifications">
36
- <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
37
- <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
38
- <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
39
- </ul>
40
- <ul slot="readNotifications">
41
- <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
42
- <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
43
- <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
44
- </ul>
45
- <a slot="notificationsList" href="#notifications">View All</a>
46
- <ul slot="socialMedia">
47
- <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
48
- <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
49
- <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
50
- </ul>
51
- <p slot="copyright">Copyright 2022 Superflows</p>
52
- <a slot="cta" href="#login">Sign In</a>
53
- <!-- Profile picture -->
54
- <img alt="profile" slot="profilePicture" src="https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg" />
55
- <!-- Set the profile menu -->
56
- <ul slot="profileMenu">
57
- <li><a href="#about1">About</a></li>
58
- <li class="li-solutions">
59
- <a href="javascript:void(0);" class="a-solutions">Solutions</a>
60
- <ul>
61
- <li><a href="#services">Services</a></li>
62
- <li><a href="#products">Products</a></li>
63
- </ul>
64
- </li>
65
- <li>
66
- <a href="javascript:void(0);">Contact Us</a>
67
- <ul>
68
- <li><a href="https://instagram.com">Instagram</a></li>
69
- <li><a href="https://facebook.com">Facebook</a></li>
70
- <li><a href="https://youtube.com">YouTube</a></li>
71
- </ul>
72
- </li>
73
- </ul>
74
- <div slot="content">
75
- </div>
76
- </sf-nav>
77
- `;
78
- var clickEvent = new MouseEvent("click", {
79
- "view": window,
80
- "bubbles": true,
81
- "cancelable": false
82
- });
83
- suite('sf-nav > left menu', () => {
84
- test('is defined', () => {
85
- const el = document.createElement('sf-nav');
86
- assert.instanceOf(el, SfNav);
87
- });
88
- test('left menu', async () => {
89
- const el = (await fixture(htmlContent));
90
- await el.updateComplete;
91
- // Check sanity
92
- const sfNavC = el.shadowRoot.querySelectorAll('.sfNavC')[0];
93
- assert.ok(sfNavC.innerHTML.indexOf('▶') >= 0);
94
- // Open left menu
95
- const sfNavToggleLeft = el.shadowRoot.querySelectorAll('.sfNavToggleLeft')[0];
96
- sfNavToggleLeft.dispatchEvent(clickEvent);
97
- await el.updateComplete;
98
- const sfNavToggleLeftLeaf = el.shadowRoot.querySelectorAll('.sfNavToggleLeftLeaf')[0];
99
- assert.ok(sfNavToggleLeftLeaf.outerHTML.indexOf('display: block;') >= 0);
100
- // Close left menu
101
- sfNavToggleLeftLeaf.dispatchEvent(clickEvent);
102
- await el.updateComplete;
103
- assert.ok(sfNavToggleLeftLeaf.outerHTML.indexOf('display: none;') >= 0);
104
- // Open left menu again
105
- sfNavToggleLeft.dispatchEvent(clickEvent);
106
- await el.updateComplete;
107
- // Open left submenu
108
- const liSolutions = el.shadowRoot.querySelectorAll('.li-solutions')[0];
109
- liSolutions.dispatchEvent(clickEvent);
110
- await el.updateComplete;
111
- assert.ok(liSolutions.outerHTML.indexOf('color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);') >= 0);
112
- // Close left submenu > menu
113
- liSolutions.dispatchEvent(clickEvent);
114
- await new Promise((r) => setTimeout(r, 1000));
115
- await el.updateComplete;
116
- });
117
- });
118
- suite('sf-nav > main menu', () => {
119
- test('main menu', async () => {
120
- const el = await fixture(htmlContent);
121
- await el.updateComplete;
122
- // Check sanity
123
- const sfNavC = el.shadowRoot.querySelectorAll('.sfNavC')[0];
124
- assert.ok(sfNavC.innerHTML.indexOf('▶') >= 0);
125
- // Open main menu
126
- const aSolutions = el.shadowRoot.querySelectorAll('.a-solutions')[1];
127
- aSolutions.dispatchEvent(clickEvent);
128
- await el.updateComplete;
129
- const liSolutions1 = el.shadowRoot.querySelectorAll('.li-solutions')[1];
130
- assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: block;') >= 0);
131
- // Close main menu
132
- const sfNavToggleLeftLeaf1 = el.shadowRoot.querySelectorAll('.sfNavToggleLeftLeaf')[1];
133
- sfNavToggleLeftLeaf1.dispatchEvent(clickEvent);
134
- await el.updateComplete;
135
- assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: none;') >= 0);
136
- // Click last menu
137
- aSolutions.dispatchEvent(clickEvent);
138
- await el.updateComplete;
139
- assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: block;') >= 0);
140
- const aServices = el.shadowRoot.querySelectorAll('.a-services')[1];
141
- aServices.dispatchEvent(clickEvent);
142
- await el.updateComplete;
143
- assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: none;') >= 0);
144
- });
145
- });
146
- suite('sf-nav > search menu', () => {
147
- test('search menu', async () => {
148
- const el = await fixture(htmlContent);
149
- // Open search menu
150
- const searchH1 = el.shadowRoot.querySelectorAll('.sfNavSearchToggle')[0];
151
- searchH1.dispatchEvent(clickEvent);
152
- await el.updateComplete;
153
- assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: flex;') >= 0);
154
- // Type something in search
155
- var count = 0;
156
- const testSearchClick = () => { count++; };
157
- el.addEventListener('searchClick', testSearchClick);
158
- var eventKeyA = new KeyboardEvent('keyup', { 'key': 'A' });
159
- var eventKeyEnter = new KeyboardEvent('keyup', { 'key': 'Enter' });
160
- const searchInput = el.shadowRoot.querySelectorAll('.sfNavInputSearch')[0];
161
- searchInput.dispatchEvent(eventKeyA);
162
- await el.updateComplete;
163
- searchInput.dispatchEvent(eventKeyA);
164
- await el.updateComplete;
165
- searchInput.dispatchEvent(eventKeyA);
166
- await el.updateComplete;
167
- searchInput.dispatchEvent(eventKeyEnter);
168
- await el.updateComplete;
169
- assert.ok(count === 1);
170
- el.removeEventListener('searchClick', testSearchClick);
171
- // Close search menu
172
- const searchOverlay = el.shadowRoot.querySelectorAll('.sfNavDivSearch > div')[0];
173
- searchOverlay.dispatchEvent(clickEvent);
174
- await el.updateComplete;
175
- assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: none;') >= 0);
176
- // Again open search menu
177
- searchH1.dispatchEvent(clickEvent);
178
- await el.updateComplete;
179
- assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: flex;') >= 0);
180
- // Click on close button to close search
181
- const sfNavDivSearchClose = el.shadowRoot.querySelectorAll('.sfNavDivSearchClose')[0];
182
- sfNavDivSearchClose.dispatchEvent(clickEvent);
183
- await el.updateComplete;
184
- assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: none;') >= 0);
185
- });
186
- });
187
- suite('sf-nav > notifications menu', () => {
188
- test('Notifications', async () => {
189
- const el = await fixture(htmlContent);
190
- await el.updateComplete;
191
- var clickEvent = new MouseEvent("click", {
192
- "view": window,
193
- "bubbles": true,
194
- "cancelable": false
195
- });
196
- // Open notifications
197
- const h1Notifications = el.shadowRoot.querySelectorAll('.sfNavNotifToggle')[0];
198
- h1Notifications.dispatchEvent(clickEvent);
199
- await el.updateComplete;
200
- assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: block;') >= 0);
201
- // Close notifications
202
- el.shadowRoot.querySelector('.sfNavDivNotif').children[2].dispatchEvent(clickEvent);
203
- await el.updateComplete;
204
- assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: none;') >= 0);
205
- // Open notifications again
206
- h1Notifications.dispatchEvent(clickEvent);
207
- await el.updateComplete;
208
- assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: block;') >= 0);
209
- // Click a notification
210
- el.shadowRoot.querySelector('.sfNavDivNotif').children[3].children[0].children[0].children[0].dispatchEvent(clickEvent);
211
- await el.updateComplete;
212
- assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: none;') >= 0);
213
- });
214
- test('Routing page found', async () => {
215
- stub(DownloadFile, 'downloadFile').returns({ status: 200, content: "Hello" });
216
- const el = await fixture(html `
217
- <sf-nav >
218
- <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
219
- <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
220
- <ul slot="mainMenu">
221
- <li><a href="#about" class="a-about">About</a></li>
222
- <li class="li-solutions">
223
- <a href="javascript:void(0);" class="a-solutions">Solutions</a>
224
- <ul>
225
- <li><a href="#services" class="a-services">Services</a></li>
226
- <li><a href="#products">Products</a></li>
227
- </ul>
228
- </li>
229
- <li>
230
- <a href="javascript:void(0);">Contact Us</a>
231
- <ul>
232
- <li><a href="https://instagram.com">Instagram</a></li>
233
- <li><a href="https://facebook.com">Facebook</a></li>
234
- </ul>
235
- </li>
236
- </ul>
237
- <ul slot="unreadNotifications">
238
- <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
239
- <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
240
- <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
241
- </ul>
242
- <ul slot="readNotifications">
243
- <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
244
- <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
245
- <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
246
- </ul>
247
- <a slot="notificationsList" href="#notifications">View All</a>
248
- <ul slot="socialMedia">
249
- <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
250
- <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
251
- <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
252
- </ul>
253
- <a slot="cta" href="#login">Sign In</a>
254
- <p slot="copyright">Copyright 2022 Superflows</p>
255
- <div slot="content">
256
- </div>
257
- </sf-nav>
258
- `);
259
- await el.updateComplete;
260
- var clickEvent = new MouseEvent("click", {
261
- "view": window,
262
- "bubbles": true,
263
- "cancelable": false
264
- });
265
- // Routing page found
266
- // Click simple main menu
267
- const aboutA = el.shadowRoot.querySelectorAll('.a-about')[1];
268
- aboutA.dispatchEvent(clickEvent);
269
- await el.updateComplete;
270
- //await new Promise((r) => setTimeout(r, TIMEOUT));
271
- assert.ok(el.shadowRoot.children[3].outerHTML.indexOf('display: none;') >= 0);
272
- });
273
- test('Notifications all read', async () => {
274
- const el = await fixture(html `
275
- <sf-nav >
276
- <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
277
- <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
278
- <ul slot="mainMenu">
279
- <li><a href="#about" class="a-about">About</a></li>
280
- <li class="li-solutions">
281
- <a href="javascript:void(0);" class="a-solutions">Solutions</a>
282
- <ul>
283
- <li><a href="#services" class="a-services">Services</a></li>
284
- <li><a href="#products">Products</a></li>
285
- </ul>
286
- </li>
287
- <li>
288
- <a href="javascript:void(0);">Contact Us</a>
289
- <ul>
290
- <li><a href="https://instagram.com">Instagram</a></li>
291
- <li><a href="https://facebook.com">Facebook</a></li>
292
- </ul>
293
- </li>
294
- </ul>
295
- <ul slot="readNotifications">
296
- <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
297
- <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
298
- <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
299
- </ul>
300
- <a slot="notificationsList" href="#notifications">View All</a>
301
- <ul slot="socialMedia">
302
- <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
303
- <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
304
- <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
305
- </ul>
306
- <p slot="copyright">Copyright 2022 Superflows</p>
307
- <div slot="content">
308
- </div>
309
- </sf-nav>
310
- `);
311
- await el.updateComplete;
312
- // Click simple main menu
313
- const badge = el.shadowRoot.querySelectorAll('.sfNavDivNotifBadge')[0];
314
- assert.ok(badge.outerHTML.indexOf('display: none;') >= 0);
315
- });
316
- });
317
- // test('renders with default values', async () => {
318
- // const el = await fixture(html`<sf-nav></sf-nav>`);
319
- // assert.shadowDom.equal(
320
- // el,
321
- // `
322
- // <h1>Hello, World!</h1>
323
- // <button part="button">Click Count: 0</button>
324
- // <slot></slot>
325
- // `
326
- // );
327
- // });
328
- // test('renders with a set name', async () => {
329
- // const el = await fixture(html`<sf-nav name="Test"></sf-nav>`);
330
- // assert.shadowDom.equal(
331
- // el,
332
- // `
333
- // <h1>Hello, Test!</h1>
334
- // <button part="button">Click Count: 0</button>
335
- // <slot></slot>
336
- // `
337
- // );
338
- // });
339
- // test('handles a click', async () => {
340
- // const el = (await fixture(html`<sf-nav></sf-nav>`)) as SfNav;
341
- // const button = el.shadowRoot!.querySelector('button')!;
342
- // button.click();
343
- // await el.updateComplete;
344
- // assert.shadowDom.equal(
345
- // el,
346
- // `
347
- // <h1>Hello, World!</h1>
348
- // <button part="button">Click Count: 1</button>
349
- // <slot></slot>
350
- // `
351
- // );
352
- // });
353
- // test('styling applied', async () => {
354
- // const el = (await fixture(html`<sf-nav></sf-nav>`)) as SfNav;
355
- // await el.updateComplete;
356
- // assert.equal(getComputedStyle(el).paddingTop, '16px');
357
- // });
1
+ /**
2
+ * @license
3
+ * Copyright 2022 Superflows.dev
4
+ * SPDX-License-Identifier: MIT
5
+ */
6
+ import { SfNav } from '../sf-nav.js';
7
+ import { stub } from 'sinon';
8
+ import { fixture, assert } from '@open-wc/testing';
9
+ // import {assert} from '@open-wc/testing';
10
+ import { html } from 'lit/static-html.js';
11
+ import DownloadFile from '../downloadFile.js';
12
+ //const TIMEOUT = 2000;
13
+ const htmlContent = html `
14
+ <sf-nav >
15
+ <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
16
+ <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
17
+ <ul slot="mainMenu">
18
+ <li><a href="#about" class="a-about">About</a></li>
19
+ <li class="li-solutions">
20
+ <a href="javascript:void(0);" class="a-solutions">Solutions</a>
21
+ <ul>
22
+ <li><a href="#services" class="a-services">Services</a></li>
23
+ <li><a href="#products">Products</a></li>
24
+ </ul>
25
+ </li>
26
+ <li>
27
+ <a href="javascript:void(0);">Contact Us</a>
28
+ <ul>
29
+ <li><a href="https://instagram.com">Instagram</a></li>
30
+ <li><a href="https://facebook.com">Facebook</a></li>
31
+ </ul>
32
+ </li>
33
+ </ul>
34
+ <!-- Set the notifications -->
35
+ <ul slot="unreadNotifications">
36
+ <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
37
+ <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
38
+ <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
39
+ </ul>
40
+ <ul slot="readNotifications">
41
+ <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
42
+ <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
43
+ <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
44
+ </ul>
45
+ <a slot="notificationsList" href="#notifications">View All</a>
46
+ <ul slot="socialMedia">
47
+ <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
48
+ <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
49
+ <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
50
+ </ul>
51
+ <p slot="copyright">Copyright 2022 Superflows</p>
52
+ <a slot="cta" href="#login">Sign In</a>
53
+ <!-- Profile picture -->
54
+ <img alt="profile" slot="profilePicture" src="https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg" />
55
+ <!-- Set the profile menu -->
56
+ <ul slot="profileMenu">
57
+ <li><a href="#about1">About</a></li>
58
+ <li class="li-solutions">
59
+ <a href="javascript:void(0);" class="a-solutions">Solutions</a>
60
+ <ul>
61
+ <li><a href="#services">Services</a></li>
62
+ <li><a href="#products">Products</a></li>
63
+ </ul>
64
+ </li>
65
+ <li>
66
+ <a href="javascript:void(0);">Contact Us</a>
67
+ <ul>
68
+ <li><a href="https://instagram.com">Instagram</a></li>
69
+ <li><a href="https://facebook.com">Facebook</a></li>
70
+ <li><a href="https://youtube.com">YouTube</a></li>
71
+ </ul>
72
+ </li>
73
+ </ul>
74
+ <div slot="content">
75
+ </div>
76
+ </sf-nav>
77
+ `;
78
+ var clickEvent = new MouseEvent("click", {
79
+ "view": window,
80
+ "bubbles": true,
81
+ "cancelable": false
82
+ });
83
+ suite('sf-nav > left menu', () => {
84
+ test('is defined', () => {
85
+ const el = document.createElement('sf-nav');
86
+ assert.instanceOf(el, SfNav);
87
+ });
88
+ test('left menu', async () => {
89
+ const el = (await fixture(htmlContent));
90
+ await el.updateComplete;
91
+ // Check sanity
92
+ const sfNavC = el.shadowRoot.querySelectorAll('.sfNavC')[0];
93
+ assert.ok(sfNavC.innerHTML.indexOf('▶') >= 0);
94
+ // Open left menu
95
+ const sfNavToggleLeft = el.shadowRoot.querySelectorAll('.sfNavToggleLeft')[0];
96
+ sfNavToggleLeft.dispatchEvent(clickEvent);
97
+ await el.updateComplete;
98
+ const sfNavToggleLeftLeaf = el.shadowRoot.querySelectorAll('.sfNavToggleLeftLeaf')[0];
99
+ assert.ok(sfNavToggleLeftLeaf.outerHTML.indexOf('display: block;') >= 0);
100
+ // Close left menu
101
+ sfNavToggleLeftLeaf.dispatchEvent(clickEvent);
102
+ await el.updateComplete;
103
+ assert.ok(sfNavToggleLeftLeaf.outerHTML.indexOf('display: none;') >= 0);
104
+ // Open left menu again
105
+ sfNavToggleLeft.dispatchEvent(clickEvent);
106
+ await el.updateComplete;
107
+ // Open left submenu
108
+ const liSolutions = el.shadowRoot.querySelectorAll('.li-solutions')[0];
109
+ liSolutions.dispatchEvent(clickEvent);
110
+ await el.updateComplete;
111
+ assert.ok(liSolutions.outerHTML.indexOf('color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);') >= 0);
112
+ // Close left submenu > menu
113
+ liSolutions.dispatchEvent(clickEvent);
114
+ await new Promise((r) => setTimeout(r, 1000));
115
+ await el.updateComplete;
116
+ });
117
+ });
118
+ suite('sf-nav > main menu', () => {
119
+ test('main menu', async () => {
120
+ const el = await fixture(htmlContent);
121
+ await el.updateComplete;
122
+ // Check sanity
123
+ const sfNavC = el.shadowRoot.querySelectorAll('.sfNavC')[0];
124
+ assert.ok(sfNavC.innerHTML.indexOf('▶') >= 0);
125
+ // Open main menu
126
+ const aSolutions = el.shadowRoot.querySelectorAll('.a-solutions')[1];
127
+ aSolutions.dispatchEvent(clickEvent);
128
+ await el.updateComplete;
129
+ const liSolutions1 = el.shadowRoot.querySelectorAll('.li-solutions')[1];
130
+ assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: block;') >= 0);
131
+ // Close main menu
132
+ const sfNavToggleLeftLeaf1 = el.shadowRoot.querySelectorAll('.sfNavToggleLeftLeaf')[1];
133
+ sfNavToggleLeftLeaf1.dispatchEvent(clickEvent);
134
+ await el.updateComplete;
135
+ assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: none;') >= 0);
136
+ // Click last menu
137
+ aSolutions.dispatchEvent(clickEvent);
138
+ await el.updateComplete;
139
+ assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: block;') >= 0);
140
+ const aServices = el.shadowRoot.querySelectorAll('.a-services')[1];
141
+ aServices.dispatchEvent(clickEvent);
142
+ await el.updateComplete;
143
+ assert.ok(liSolutions1.querySelector('ul').outerHTML.indexOf('display: none;') >= 0);
144
+ });
145
+ });
146
+ suite('sf-nav > search menu', () => {
147
+ test('search menu', async () => {
148
+ const el = await fixture(htmlContent);
149
+ // Open search menu
150
+ const searchH1 = el.shadowRoot.querySelectorAll('.sfNavSearchToggle')[0];
151
+ searchH1.dispatchEvent(clickEvent);
152
+ await el.updateComplete;
153
+ assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: flex;') >= 0);
154
+ // Type something in search
155
+ var count = 0;
156
+ const testSearchClick = () => { count++; };
157
+ el.addEventListener('searchClick', testSearchClick);
158
+ var eventKeyA = new KeyboardEvent('keyup', { 'key': 'A' });
159
+ var eventKeyEnter = new KeyboardEvent('keyup', { 'key': 'Enter' });
160
+ const searchInput = el.shadowRoot.querySelectorAll('.sfNavInputSearch')[0];
161
+ searchInput.dispatchEvent(eventKeyA);
162
+ await el.updateComplete;
163
+ searchInput.dispatchEvent(eventKeyA);
164
+ await el.updateComplete;
165
+ searchInput.dispatchEvent(eventKeyA);
166
+ await el.updateComplete;
167
+ searchInput.dispatchEvent(eventKeyEnter);
168
+ await el.updateComplete;
169
+ assert.ok(count === 1);
170
+ el.removeEventListener('searchClick', testSearchClick);
171
+ // Close search menu
172
+ const searchOverlay = el.shadowRoot.querySelectorAll('.sfNavDivSearch > div')[0];
173
+ searchOverlay.dispatchEvent(clickEvent);
174
+ await el.updateComplete;
175
+ assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: none;') >= 0);
176
+ // Again open search menu
177
+ searchH1.dispatchEvent(clickEvent);
178
+ await el.updateComplete;
179
+ assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: flex;') >= 0);
180
+ // Click on close button to close search
181
+ const sfNavDivSearchClose = el.shadowRoot.querySelectorAll('.sfNavDivSearchClose')[0];
182
+ sfNavDivSearchClose.dispatchEvent(clickEvent);
183
+ await el.updateComplete;
184
+ assert.ok(el.shadowRoot.querySelectorAll('.sfNavDivSearchDropdown')[0].outerHTML.indexOf('display: none;') >= 0);
185
+ });
186
+ });
187
+ suite('sf-nav > notifications menu', () => {
188
+ test('Notifications', async () => {
189
+ const el = await fixture(htmlContent);
190
+ await el.updateComplete;
191
+ var clickEvent = new MouseEvent("click", {
192
+ "view": window,
193
+ "bubbles": true,
194
+ "cancelable": false
195
+ });
196
+ // Open notifications
197
+ const h1Notifications = el.shadowRoot.querySelectorAll('.sfNavNotifToggle')[0];
198
+ h1Notifications.dispatchEvent(clickEvent);
199
+ await el.updateComplete;
200
+ assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: block;') >= 0);
201
+ // Close notifications
202
+ el.shadowRoot.querySelector('.sfNavDivNotif').children[2].dispatchEvent(clickEvent);
203
+ await el.updateComplete;
204
+ assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: none;') >= 0);
205
+ // Open notifications again
206
+ h1Notifications.dispatchEvent(clickEvent);
207
+ await el.updateComplete;
208
+ assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: block;') >= 0);
209
+ // Click a notification
210
+ el.shadowRoot.querySelector('.sfNavDivNotif').children[3].children[0].children[0].children[0].dispatchEvent(clickEvent);
211
+ await el.updateComplete;
212
+ assert.ok(el.shadowRoot.querySelector('.sfNavDivNotif').children[2].outerHTML.indexOf('display: none;') >= 0);
213
+ });
214
+ test('Routing page found', async () => {
215
+ stub(DownloadFile, 'downloadFile').returns({ status: 200, content: "Hello" });
216
+ const el = await fixture(html `
217
+ <sf-nav >
218
+ <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
219
+ <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
220
+ <ul slot="mainMenu">
221
+ <li><a href="#about" class="a-about">About</a></li>
222
+ <li class="li-solutions">
223
+ <a href="javascript:void(0);" class="a-solutions">Solutions</a>
224
+ <ul>
225
+ <li><a href="#services" class="a-services">Services</a></li>
226
+ <li><a href="#products">Products</a></li>
227
+ </ul>
228
+ </li>
229
+ <li>
230
+ <a href="javascript:void(0);">Contact Us</a>
231
+ <ul>
232
+ <li><a href="https://instagram.com">Instagram</a></li>
233
+ <li><a href="https://facebook.com">Facebook</a></li>
234
+ </ul>
235
+ </li>
236
+ </ul>
237
+ <ul slot="unreadNotifications">
238
+ <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
239
+ <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
240
+ <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
241
+ </ul>
242
+ <ul slot="readNotifications">
243
+ <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
244
+ <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
245
+ <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
246
+ </ul>
247
+ <a slot="notificationsList" href="#notifications">View All</a>
248
+ <ul slot="socialMedia">
249
+ <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
250
+ <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
251
+ <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
252
+ </ul>
253
+ <a slot="cta" href="#login">Sign In</a>
254
+ <p slot="copyright">Copyright 2022 Superflows</p>
255
+ <div slot="content">
256
+ </div>
257
+ </sf-nav>
258
+ `);
259
+ await el.updateComplete;
260
+ var clickEvent = new MouseEvent("click", {
261
+ "view": window,
262
+ "bubbles": true,
263
+ "cancelable": false
264
+ });
265
+ // Routing page found
266
+ // Click simple main menu
267
+ const aboutA = el.shadowRoot.querySelectorAll('.a-about')[1];
268
+ aboutA.dispatchEvent(clickEvent);
269
+ await el.updateComplete;
270
+ //await new Promise((r) => setTimeout(r, TIMEOUT));
271
+ assert.ok(el.shadowRoot.children[3].outerHTML.indexOf('display: none;') >= 0);
272
+ });
273
+ test('Notifications all read', async () => {
274
+ const el = await fixture(html `
275
+ <sf-nav >
276
+ <h2 slot="brandName"><a href="#home" >SuperTester</a></h2>
277
+ <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows.dev/img/superflows_gray_transparent_200.png" /></a>
278
+ <ul slot="mainMenu">
279
+ <li><a href="#about" class="a-about">About</a></li>
280
+ <li class="li-solutions">
281
+ <a href="javascript:void(0);" class="a-solutions">Solutions</a>
282
+ <ul>
283
+ <li><a href="#services" class="a-services">Services</a></li>
284
+ <li><a href="#products">Products</a></li>
285
+ </ul>
286
+ </li>
287
+ <li>
288
+ <a href="javascript:void(0);">Contact Us</a>
289
+ <ul>
290
+ <li><a href="https://instagram.com">Instagram</a></li>
291
+ <li><a href="https://facebook.com">Facebook</a></li>
292
+ </ul>
293
+ </li>
294
+ </ul>
295
+ <ul slot="readNotifications">
296
+ <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
297
+ <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
298
+ <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
299
+ </ul>
300
+ <a slot="notificationsList" href="#notifications">View All</a>
301
+ <ul slot="socialMedia">
302
+ <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
303
+ <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
304
+ <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
305
+ </ul>
306
+ <p slot="copyright">Copyright 2022 Superflows</p>
307
+ <div slot="content">
308
+ </div>
309
+ </sf-nav>
310
+ `);
311
+ await el.updateComplete;
312
+ // Click simple main menu
313
+ const badge = el.shadowRoot.querySelectorAll('.sfNavDivNotifBadge')[0];
314
+ assert.ok(badge.outerHTML.indexOf('display: none;') >= 0);
315
+ });
316
+ });
317
+ // test('renders with default values', async () => {
318
+ // const el = await fixture(html`<sf-nav></sf-nav>`);
319
+ // assert.shadowDom.equal(
320
+ // el,
321
+ // `
322
+ // <h1>Hello, World!</h1>
323
+ // <button part="button">Click Count: 0</button>
324
+ // <slot></slot>
325
+ // `
326
+ // );
327
+ // });
328
+ // test('renders with a set name', async () => {
329
+ // const el = await fixture(html`<sf-nav name="Test"></sf-nav>`);
330
+ // assert.shadowDom.equal(
331
+ // el,
332
+ // `
333
+ // <h1>Hello, Test!</h1>
334
+ // <button part="button">Click Count: 0</button>
335
+ // <slot></slot>
336
+ // `
337
+ // );
338
+ // });
339
+ // test('handles a click', async () => {
340
+ // const el = (await fixture(html`<sf-nav></sf-nav>`)) as SfNav;
341
+ // const button = el.shadowRoot!.querySelector('button')!;
342
+ // button.click();
343
+ // await el.updateComplete;
344
+ // assert.shadowDom.equal(
345
+ // el,
346
+ // `
347
+ // <h1>Hello, World!</h1>
348
+ // <button part="button">Click Count: 1</button>
349
+ // <slot></slot>
350
+ // `
351
+ // );
352
+ // });
353
+ // test('styling applied', async () => {
354
+ // const el = (await fixture(html`<sf-nav></sf-nav>`)) as SfNav;
355
+ // await el.updateComplete;
356
+ // assert.equal(getComputedStyle(el).paddingTop, '16px');
357
+ // });
358
358
  //# sourceMappingURL=sf-nav_test.js.map