@salesforcedevs/dx-components 0.17.0 → 0.18.0

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 (43) hide show
  1. package/lwc.config.json +1 -0
  2. package/package.json +3 -3
  3. package/src/assets/svg/sidebar-loading.svg +34 -0
  4. package/src/modules/dx/header/__tests__/mockProps.ts +7 -1
  5. package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts +24 -39
  6. package/src/modules/dx/headerSearch/__tests__/mockProps.ts +2 -7
  7. package/src/modules/dx/headerSearch/headerSearch.ts +13 -19
  8. package/src/modules/dx/lazy/lazy.ts +0 -7
  9. package/src/modules/dx/sidebar/__tests__/mockSearchChangeEmptyEvent.ts +6 -0
  10. package/src/modules/dx/sidebar/__tests__/mockSearchChangeEvent.ts +527 -0
  11. package/src/modules/dx/sidebar/__tests__/sidebar.test.ts +210 -247
  12. package/src/modules/dx/sidebar/sidebar.css +40 -17
  13. package/src/modules/dx/sidebar/sidebar.html +58 -34
  14. package/src/modules/dx/sidebar/sidebar.stories.ts +54 -4
  15. package/src/modules/dx/sidebar/sidebar.ts +141 -73
  16. package/src/modules/dx/sidebarOld/__tests__/mockProps.ts +178 -0
  17. package/src/modules/dx/sidebarOld/__tests__/sidebarOld.test.ts +574 -0
  18. package/src/modules/dx/sidebarOld/sidebarOld.css +158 -0
  19. package/src/modules/dx/sidebarOld/sidebarOld.html +70 -0
  20. package/src/modules/dx/sidebarOld/sidebarOld.stories.ts +139 -0
  21. package/src/modules/dx/sidebarOld/sidebarOld.ts +187 -0
  22. package/src/modules/dx/sidebarSearch/__tests__/mockPreloadedState.ts +8843 -0
  23. package/src/modules/dx/sidebarSearch/__tests__/sidebarSearch.test.ts +113 -0
  24. package/src/modules/dx/sidebarSearch/sidebarSearch.css +3 -0
  25. package/src/modules/dx/sidebarSearch/sidebarSearch.html +26 -0
  26. package/src/modules/dx/sidebarSearch/sidebarSearch.ts +421 -0
  27. package/src/modules/dx/sidebarSearchResult/__tests__/sidebarSearchResult.test.ts +55 -0
  28. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +36 -0
  29. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html +14 -0
  30. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts +56 -0
  31. package/src/modules/dx/treeTile/__tests__/treeTile.test.ts +27 -38
  32. package/src/modules/dx/treeTile/treeTile.css +3 -19
  33. package/src/modules/dx/treeTile/treeTile.html +4 -1
  34. package/src/modules/dx/treeTile/treeTile.ts +2 -2
  35. package/src/modules/helpers/sidebar/sidebar.css +21 -0
  36. package/src/modules/utils/coveo/coveo.ts +69 -0
  37. package/src/modules/utils/highlight/__tests__/highlight.test.ts +108 -0
  38. package/src/modules/utils/highlight/__tests__/mockProps.ts +45 -0
  39. package/src/modules/utils/highlight/highlight.ts +2 -1
  40. package/src/modules/utils/jest/jest.ts +35 -0
  41. package/src/modules/utils/recentSearches/__tests__/recentSearches.test.ts +79 -0
  42. package/src/modules/utils/recentSearches/recentSearches.ts +57 -0
  43. package/src/modules/utils/tests/tests.ts +18 -11
package/src/modules/dx/sidebar/__tests__/sidebar.test.ts CHANGED
@@ -1,11 +1,17 @@
1
1
  import Button from "dx/button";
2
- import Input from "dx/input";
3
2
  import { track } from "dx/instrumentation";
4
3
  import Sidebar from "dx/sidebar";
5
4
  import Tree from "dx/tree";
6
- import { TreeNode } from "typings/custom";
7
- import { createMediaMock } from "utils/jest";
5
+ import SidebarSearch from "dx/sidebarSearch";
6
+ import {
7
+ createMediaMock,
8
+ mockQueryParameter,
9
+ unmockQueryParameter
10
+ } from "utils/jest";
8
11
  import { createRenderComponent } from "utils/tests";
12
+ import { coveoXMLDocsConfig } from "utils/coveo";
13
+ import mockSearchChangeEvent from "./mockSearchChangeEvent";
14
+ import mockSearchChangeEmptyEvent from "./mockSearchChangeEmptyEvent";
9
15
  import { SAMPLE_TREES } from "./mockProps";
10
16
 
11
17
  jest.mock("dx/instrumentation");
@@ -24,43 +30,40 @@ describe(TAG, () => {
24
30
  });
25
31
 
26
32
  describe("desktop", () => {
33
+ beforeEach(() => {
34
+ unmockQueryParameter();
35
+ });
36
+
27
37
  describe("component render", () => {
28
38
  it("should render as expanded with all the elements that sidebar includes", () => {
29
39
  const expectedTitle = "Super cool title";
30
40
  const component = renderComponent({
31
41
  header: expectedTitle,
32
- trees: SAMPLE_TREES
42
+ trees: SAMPLE_TREES,
43
+ ...coveoXMLDocsConfig
33
44
  });
34
45
 
35
- expect(component.trees).toEqual(SAMPLE_TREES);
36
-
37
- const container: HTMLElement = component.shadowRoot.querySelector(
38
- ".container"
39
- );
46
+ const container: HTMLElement =
47
+ component.shadowRoot.querySelector(".container");
40
48
  expect(container).not.toBeNull();
41
49
  expect(container.classList).not.toContain(COLLAPSED_CLASS);
42
50
 
43
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
44
- ".header h2"
45
- );
51
+ const headerTitle: HTMLElement =
52
+ component.shadowRoot.querySelector(".header h2");
46
53
  expect(headerTitle).not.toBeNull();
47
54
  expect(headerTitle.textContent).toBe(expectedTitle);
48
55
 
49
- const collapseButton: Button = component.shadowRoot.querySelector(
50
- "dx-button"
51
- );
56
+ const collapseButton: Button =
57
+ component.shadowRoot.querySelector("dx-button");
52
58
  expect(collapseButton).not.toBeNull();
53
59
  expect(collapseButton.iconSymbol).toBe("close_panel");
54
60
 
55
- const searchBox: Input = component.shadowRoot.querySelector(
56
- "dx-input"
57
- );
58
- expect(searchBox).not.toBeNull();
59
- expect(searchBox.value).toBe("");
61
+ const search: SidebarSearch =
62
+ component.shadowRoot.querySelector("dx-sidebar-search");
63
+ expect(search).not.toBeNull();
60
64
 
61
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
62
- "dx-tree"
63
- );
65
+ const trees: Array<Tree> =
66
+ component.shadowRoot.querySelectorAll("dx-tree");
64
67
  expect(trees).toHaveLength(SAMPLE_TREES.length);
65
68
  trees.forEach((tree, index) =>
66
69
  expect(tree.treeRoot).toHaveProperty(
@@ -90,38 +93,31 @@ describe(TAG, () => {
90
93
  const expectedTitle = "Other super cool title";
91
94
  const component = renderComponent({
92
95
  header: expectedTitle,
93
- trees: JSON.stringify(SAMPLE_TREES)
96
+ trees: JSON.stringify(SAMPLE_TREES),
97
+ ...coveoXMLDocsConfig
94
98
  });
95
99
 
96
- expect(component.trees).toEqual(SAMPLE_TREES);
97
-
98
- const container: HTMLElement = component.shadowRoot.querySelector(
99
- ".container"
100
- );
100
+ const container: HTMLElement =
101
+ component.shadowRoot.querySelector(".container");
101
102
  expect(container).not.toBeNull();
102
103
  expect(container.classList).not.toContain(COLLAPSED_CLASS);
103
104
 
104
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
105
- ".header h2"
106
- );
105
+ const headerTitle: HTMLElement =
106
+ component.shadowRoot.querySelector(".header h2");
107
107
  expect(headerTitle).not.toBeNull();
108
108
  expect(headerTitle.textContent).toBe(expectedTitle);
109
109
 
110
- const collapseButton: Button = component.shadowRoot.querySelector(
111
- "dx-button"
112
- );
110
+ const collapseButton: Button =
111
+ component.shadowRoot.querySelector("dx-button");
113
112
  expect(collapseButton).not.toBeNull();
114
113
  expect(collapseButton.iconSymbol).toBe("close_panel");
115
114
 
116
- const searchBox: Input = component.shadowRoot.querySelector(
117
- "dx-input"
118
- );
119
- expect(searchBox).not.toBeNull();
120
- expect(searchBox.value).toBe("");
115
+ const search: SidebarSearch =
116
+ component.shadowRoot.querySelector("dx-sidebar-search");
117
+ expect(search).not.toBeNull();
121
118
 
122
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
123
- "dx-tree"
124
- );
119
+ const trees: Array<Tree> =
120
+ component.shadowRoot.querySelectorAll("dx-tree");
125
121
  expect(trees).toHaveLength(SAMPLE_TREES.length);
126
122
  trees.forEach((tree, index) =>
127
123
  expect(tree.treeRoot).toHaveProperty(
@@ -139,33 +135,131 @@ describe(TAG, () => {
139
135
  const component = renderComponent({
140
136
  header: "Non visible title",
141
137
  trees: SAMPLE_TREES,
142
- value: testValue
138
+ value: testValue,
139
+ ...coveoXMLDocsConfig
143
140
  });
144
141
 
145
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
146
- "dx-tree"
147
- );
142
+ const trees: Array<Tree> =
143
+ component.shadowRoot.querySelectorAll("dx-tree");
148
144
 
149
145
  expect(trees).toHaveLength(SAMPLE_TREES.length);
150
146
  trees.forEach((tree) => expect(tree.value).toBe(testValue));
151
147
 
152
148
  return expect(component).toBeAccessible();
153
149
  });
150
+
151
+ it("should render loading ui when ui loads with a non empty query parameter", () => {
152
+ mockQueryParameter("test");
153
+
154
+ const component = renderComponent({
155
+ header: "Super cool title",
156
+ trees: SAMPLE_TREES,
157
+ ...coveoXMLDocsConfig
158
+ });
159
+
160
+ const loadingImg: Element = component.shadowRoot.querySelector(
161
+ "img.loading-skeleton"
162
+ );
163
+
164
+ expect(loadingImg).not.toBeNull();
165
+ });
166
+
167
+ it("should not render loading ui when ui loads with an empty query parameter, but should when dx-sidebar-search fires onloading as true", () => {
168
+ const component = renderComponent({
169
+ header: "Super cool title",
170
+ trees: SAMPLE_TREES,
171
+ ...coveoXMLDocsConfig
172
+ });
173
+
174
+ const loadingImg: Element = component.shadowRoot.querySelector(
175
+ "img.loading-skeleton"
176
+ );
177
+ expect(loadingImg).toBeNull();
178
+
179
+ const search: SidebarSearch =
180
+ component.shadowRoot.querySelector("dx-sidebar-search");
181
+ search.dispatchEvent(
182
+ new CustomEvent("loading", { detail: true })
183
+ );
184
+
185
+ return Promise.resolve().then(() => {
186
+ const loadingImgAfter: Element =
187
+ component.shadowRoot.querySelector(
188
+ "img.loading-skeleton"
189
+ );
190
+ expect(loadingImgAfter).not.toBeNull();
191
+ });
192
+ });
193
+
194
+ it("should render search results on change of dx-sidebar-search", () => {
195
+ const component = renderComponent({
196
+ header: "Super cool title",
197
+ trees: SAMPLE_TREES,
198
+ ...coveoXMLDocsConfig
199
+ });
200
+
201
+ const search: SidebarSearch =
202
+ component.shadowRoot.querySelector("dx-sidebar-search");
203
+ search.dispatchEvent(
204
+ new CustomEvent("change", mockSearchChangeEvent)
205
+ );
206
+ search.dispatchEvent(
207
+ new CustomEvent("loading", { detail: false })
208
+ );
209
+
210
+ return Promise.resolve().then(() => {
211
+ const results = component.shadowRoot.querySelectorAll(
212
+ "dx-sidebar-search-result"
213
+ );
214
+ expect(results).toHaveLength(
215
+ mockSearchChangeEvent.detail.results.length
216
+ );
217
+ });
218
+ });
219
+
220
+ it("should render the empty component if search results return empty", () => {
221
+ const component = renderComponent({
222
+ header: "Super cool title",
223
+ trees: SAMPLE_TREES,
224
+ ...coveoXMLDocsConfig
225
+ });
226
+
227
+ const container =
228
+ component.shadowRoot.querySelector(".container");
229
+ expect(container.classList).not.toContain("search-empty");
230
+
231
+ const search: SidebarSearch =
232
+ component.shadowRoot.querySelector("dx-sidebar-search");
233
+ search.dispatchEvent(
234
+ new CustomEvent("change", mockSearchChangeEmptyEvent)
235
+ );
236
+ search.dispatchEvent(
237
+ new CustomEvent("loading", { detail: false })
238
+ );
239
+
240
+ return Promise.resolve().then(() => {
241
+ const results = component.shadowRoot.querySelectorAll(
242
+ "dx-sidebar-search-result"
243
+ );
244
+
245
+ expect(container.classList).toContain("search-empty");
246
+ expect(results).toHaveLength(0);
247
+ });
248
+ });
154
249
  });
155
250
 
156
251
  describe("component interactions", () => {
157
252
  it("should expand/collapse sidebar when toggle button is clicked", () => {
158
253
  const component = renderComponent({
159
254
  header: "Cool Title",
160
- trees: SAMPLE_TREES
255
+ trees: SAMPLE_TREES,
256
+ ...coveoXMLDocsConfig
161
257
  });
162
258
 
163
- const container: HTMLElement = component.shadowRoot.querySelector(
164
- ".container"
165
- );
166
- const toggleButton: HTMLElement = component.shadowRoot.querySelector(
167
- "dx-button"
168
- );
259
+ const container: HTMLElement =
260
+ component.shadowRoot.querySelector(".container");
261
+ const toggleButton: HTMLElement =
262
+ component.shadowRoot.querySelector("dx-button");
169
263
  toggleButton.click();
170
264
 
171
265
  expect(track).toBeCalledTimes(1);
@@ -178,26 +272,10 @@ describe(TAG, () => {
178
272
  .then(() => {
179
273
  expect(container.classList).toContain(COLLAPSED_CLASS);
180
274
 
181
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
182
- ".header h2"
183
- );
184
- expect(headerTitle).toBeNull();
185
-
186
- const expandButton: Button = component.shadowRoot.querySelector(
187
- "dx-button"
188
- );
275
+ const expandButton: Button =
276
+ component.shadowRoot.querySelector("dx-button");
189
277
  expect(expandButton).not.toBeNull();
190
278
 
191
- const searchBox: Input = component.shadowRoot.querySelector(
192
- "dx-input"
193
- );
194
- expect(searchBox).toBeNull();
195
-
196
- const trees: Tree = component.shadowRoot.querySelector(
197
- "dx-tree"
198
- );
199
- expect(trees).toBeNull();
200
-
201
279
  toggleButton.click();
202
280
 
203
281
  expect(track).toBeCalledTimes(2);
@@ -215,21 +293,6 @@ describe(TAG, () => {
215
293
  COLLAPSED_CLASS
216
294
  );
217
295
 
218
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
219
- ".header h2"
220
- );
221
- expect(headerTitle).not.toBeNull();
222
-
223
- const searchBox: Input = component.shadowRoot.querySelector(
224
- "dx-input"
225
- );
226
- expect(searchBox).not.toBeNull();
227
-
228
- const trees: Tree = component.shadowRoot.querySelector(
229
- "dx-tree"
230
- );
231
- expect(trees).not.toBeNull();
232
-
233
296
  return expect(component).toBeAccessible();
234
297
  });
235
298
  });
@@ -237,15 +300,14 @@ describe(TAG, () => {
237
300
  it("should make hover effect on toggle button hover", () => {
238
301
  const component = renderComponent({
239
302
  header: "Cool Title",
240
- trees: SAMPLE_TREES
303
+ trees: SAMPLE_TREES,
304
+ ...coveoXMLDocsConfig
241
305
  });
242
306
 
243
- const container: HTMLElement = component.shadowRoot.querySelector(
244
- ".container"
245
- );
246
- const toggleButton: Button = component.shadowRoot.querySelector(
247
- "dx-button"
248
- );
307
+ const container: HTMLElement =
308
+ component.shadowRoot.querySelector(".container");
309
+ const toggleButton: Button =
310
+ component.shadowRoot.querySelector("dx-button");
249
311
 
250
312
  expect(container.classList).not.toContain(
251
313
  "container-border-active"
@@ -284,42 +346,14 @@ describe(TAG, () => {
284
346
 
285
347
  describe("render", () => {
286
348
  it("should render as collapsed", () => {
287
- const expectedTitle = SAMPLE_TREES[0].label;
288
349
  const component = renderComponent({
289
- trees: SAMPLE_TREES
350
+ trees: SAMPLE_TREES,
351
+ ...coveoXMLDocsConfig
290
352
  });
291
353
 
292
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
293
- ".header span.header-title"
294
- );
295
- expect(headerTitle).not.toBeNull();
296
- expect(headerTitle.textContent).toBe(expectedTitle);
297
-
298
- const headerIcon = component.shadowRoot.querySelector(
299
- ".header .header-toggle-icon dx-icon"
300
- );
301
- expect(headerIcon).not.toBeNull();
302
-
303
- const searchBox: Input = component.shadowRoot.querySelector(
304
- "dx-input"
305
- );
306
- expect(searchBox).toBeNull();
307
-
308
- const trees: Tree = component.shadowRoot.querySelector(
309
- "dx-tree"
310
- );
311
- expect(trees).toBeNull();
312
-
313
- // Desktop specific elements should not render
314
- const headerTitleDesktop = component.shadowRoot.querySelector(
315
- ".header h2.header-title"
316
- );
317
- expect(headerTitleDesktop).toBeNull();
318
-
319
- const toggleButtonDesktop = component.shadowRoot.querySelector(
320
- "dx-button.header-toggle-button"
321
- );
322
- expect(toggleButtonDesktop).toBeNull();
354
+ const container: HTMLElement =
355
+ component.shadowRoot.querySelector(".container");
356
+ expect(container.classList).toContain(COLLAPSED_CLASS);
323
357
 
324
358
  expect(window.matchMedia).toBeCalledTimes(1);
325
359
  expect(window.matchMedia).toBeCalledWith(EXPECTED_QUERY);
@@ -330,17 +364,18 @@ describe(TAG, () => {
330
364
  it("should ignore null values for trees api", () => {
331
365
  const component = renderComponent({
332
366
  header: "Cool Title",
333
- trees: null
367
+ trees: null,
368
+ ...coveoXMLDocsConfig
334
369
  });
335
370
 
336
- const tree: Tree = component.shadowRoot.querySelector(
337
- "dx-tree"
338
- );
371
+ const tree: Tree =
372
+ component.shadowRoot.querySelector("dx-tree");
339
373
  expect(tree).toBeNull();
340
374
 
341
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
342
- ".header span.header-title"
343
- );
375
+ const headerTitle: HTMLElement =
376
+ component.shadowRoot.querySelector(
377
+ ".header span.header-title"
378
+ );
344
379
  expect(headerTitle).not.toBeNull();
345
380
  expect(headerTitle.textContent).toBe("");
346
381
  });
@@ -350,15 +385,14 @@ describe(TAG, () => {
350
385
  it("should expand/collapse sidebar when mobile toggle is clicked", () => {
351
386
  const expectedTitle = SAMPLE_TREES[0].label;
352
387
  const component = renderComponent({
353
- trees: SAMPLE_TREES
388
+ trees: SAMPLE_TREES,
389
+ ...coveoXMLDocsConfig
354
390
  });
355
391
 
356
- const container: HTMLElement = component.shadowRoot.querySelector(
357
- ".container"
358
- );
359
- const toggleDiv: HTMLElement = component.shadowRoot.querySelector(
360
- "div.header"
361
- );
392
+ const container: HTMLElement =
393
+ component.shadowRoot.querySelector(".container");
394
+ const toggleDiv: HTMLElement =
395
+ component.shadowRoot.querySelector("div.header");
362
396
  toggleDiv.click();
363
397
 
364
398
  expect(track).toBeCalledTimes(1);
@@ -372,9 +406,10 @@ describe(TAG, () => {
372
406
  expect(container.classList).not.toContain(
373
407
  COLLAPSED_CLASS
374
408
  );
375
- const headerTitle: HTMLElement = component.shadowRoot.querySelector(
376
- ".header span.header-title"
377
- );
409
+ const headerTitle: HTMLElement =
410
+ component.shadowRoot.querySelector(
411
+ ".header span.header-title"
412
+ );
378
413
  expect(headerTitle).not.toBeNull();
379
414
  expect(headerTitle.textContent).toBe(expectedTitle);
380
415
 
@@ -383,15 +418,14 @@ describe(TAG, () => {
383
418
  );
384
419
  expect(headerIcon).not.toBeNull();
385
420
 
386
- const searchBox: Input = component.shadowRoot.querySelector(
387
- "dx-input"
388
- );
389
- expect(searchBox).not.toBeNull();
390
- expect(searchBox.value).toBe("");
421
+ const search: HTMLElement =
422
+ component.shadowRoot.querySelector(
423
+ "dx-sidebar-search"
424
+ );
425
+ expect(search).not.toBeNull();
391
426
 
392
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
393
- "dx-tree"
394
- );
427
+ const trees: Array<Tree> =
428
+ component.shadowRoot.querySelectorAll("dx-tree");
395
429
  expect(trees).toHaveLength(SAMPLE_TREES.length);
396
430
  trees.forEach((tree, index) =>
397
431
  expect(tree.treeRoot).toHaveProperty(
@@ -401,14 +435,16 @@ describe(TAG, () => {
401
435
  );
402
436
 
403
437
  // Desktop specific elements should not render
404
- const headerTitleDesktop = component.shadowRoot.querySelector(
405
- ".header h2.header-title"
406
- );
438
+ const headerTitleDesktop =
439
+ component.shadowRoot.querySelector(
440
+ ".header h2.header-title"
441
+ );
407
442
  expect(headerTitleDesktop).toBeNull();
408
443
 
409
- const toggleButtonDesktop = component.shadowRoot.querySelector(
410
- "dx-button.header-toggle-button"
411
- );
444
+ const toggleButtonDesktop =
445
+ component.shadowRoot.querySelector(
446
+ "dx-button.header-toggle-button"
447
+ );
412
448
  expect(toggleButtonDesktop).toBeNull();
413
449
 
414
450
  toggleDiv.click();
@@ -434,12 +470,12 @@ describe(TAG, () => {
434
470
  const defaultTitle = SAMPLE_TREES[0].label;
435
471
  const itemToSelect = SAMPLE_TREES[0].children![2];
436
472
  const component = renderComponent({
437
- trees: SAMPLE_TREES
473
+ trees: SAMPLE_TREES,
474
+ ...coveoXMLDocsConfig
438
475
  });
439
476
 
440
- const toggleDiv: HTMLElement = component.shadowRoot.querySelector(
441
- "div.header"
442
- );
477
+ const toggleDiv: HTMLElement =
478
+ component.shadowRoot.querySelector("div.header");
443
479
  const headerTitle: HTMLElement = toggleDiv.querySelector(
444
480
  ".header span.header-title"
445
481
  )!;
@@ -451,9 +487,8 @@ describe(TAG, () => {
451
487
  expect(headerTitle).not.toBeNull();
452
488
  expect(headerTitle.textContent).toBe(defaultTitle);
453
489
 
454
- const tree: Tree = component.shadowRoot.querySelector(
455
- "dx-tree"
456
- );
490
+ const tree: Tree =
491
+ component.shadowRoot.querySelector("dx-tree");
457
492
  tree.dispatchEvent(
458
493
  new CustomEvent("select", {
459
494
  detail: { name: itemToSelect.name }
@@ -476,12 +511,12 @@ describe(TAG, () => {
476
511
  const [expectedTree] = SAMPLE_TREES;
477
512
  const component = renderComponent({
478
513
  header: "Cool Title",
479
- trees: expectedTree
514
+ trees: expectedTree,
515
+ ...coveoXMLDocsConfig
480
516
  });
481
517
 
482
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
483
- "dx-tree"
484
- );
518
+ const trees: Array<Tree> =
519
+ component.shadowRoot.querySelectorAll("dx-tree");
485
520
  expect(trees).toHaveLength(1);
486
521
 
487
522
  const [singleTree] = trees;
@@ -499,14 +534,14 @@ describe(TAG, () => {
499
534
 
500
535
  const component = renderComponent({
501
536
  header: "Cool Title",
502
- trees: SAMPLE_TREES
537
+ trees: SAMPLE_TREES,
538
+ ...coveoXMLDocsConfig
503
539
  });
504
540
 
505
541
  component.addEventListener("select", mockSelect);
506
542
 
507
- const tree: Tree = component.shadowRoot.querySelector(
508
- "dx-tree"
509
- );
543
+ const tree: Tree =
544
+ component.shadowRoot.querySelector("dx-tree");
510
545
  expect(tree).not.toBeNull();
511
546
  expect(tree.value).toBeUndefined();
512
547
 
@@ -521,11 +556,8 @@ describe(TAG, () => {
521
556
  return Promise.resolve().then(() => {
522
557
  expect(tree.value).toBe(expectedName);
523
558
  expect(mockSelect).toBeCalledTimes(1);
524
- const {
525
- detail,
526
- composed,
527
- bubbles
528
- } = mockSelect.mock.calls[0][0];
559
+ const { detail, composed, bubbles } =
560
+ mockSelect.mock.calls[0][0];
529
561
  expect(detail).toEqual({
530
562
  name: expectedName
531
563
  });
@@ -536,74 +568,5 @@ describe(TAG, () => {
536
568
  });
537
569
  });
538
570
  });
539
-
540
- describe("search", () => {
541
- beforeAll(() => {
542
- jest.useFakeTimers();
543
- });
544
-
545
- it("should filter trees element label based on the search text value", () => {
546
- const testSearchText = " token ";
547
- const component = renderComponent({
548
- header: "Cool Title",
549
- trees: SAMPLE_TREES
550
- });
551
-
552
- const searchBox: Input = component.shadowRoot.querySelector(
553
- "dx-input"
554
- );
555
- searchBox.dispatchEvent(
556
- new CustomEvent("change", {
557
- detail: testSearchText
558
- })
559
- );
560
-
561
- jest.runAllTimers();
562
-
563
- return Promise.resolve().then(() => {
564
- expect(searchBox.value).toBe(testSearchText);
565
-
566
- const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
567
- "dx-tree"
568
- );
569
- expect(trees).toHaveLength(1);
570
- const treeNode = trees[0].treeRoot as TreeNode;
571
- expect(treeNode.name).toBe(SAMPLE_TREES[0].name);
572
- expect(treeNode.isExpanded).toBe(true);
573
- expect(treeNode.children).toHaveLength(1);
574
- expect(treeNode.children![0].name).toMatch(
575
- testSearchText.trim()
576
- );
577
- });
578
- });
579
-
580
- it("should not display anything if search text does not match", () => {
581
- const testSearchText = "this does not exist";
582
- const component = renderComponent({
583
- header: "Cool Title",
584
- trees: SAMPLE_TREES
585
- });
586
-
587
- const searchBox: Input = component.shadowRoot.querySelector(
588
- "dx-input"
589
- );
590
- searchBox.dispatchEvent(
591
- new CustomEvent("change", {
592
- detail: testSearchText
593
- })
594
- );
595
-
596
- jest.runAllTimers();
597
-
598
- return Promise.resolve().then(() => {
599
- expect(searchBox.value).toBe(testSearchText);
600
-
601
- const tree: Tree = component.shadowRoot.querySelector(
602
- "dx-tree"
603
- );
604
- expect(tree).toBeNull();
605
- });
606
- });
607
- });
608
571
  });
609
572
  });