@dile/ui 3.17.1 → 3.18.1

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 (117) hide show
  1. package/components/steps/index.js +2 -0
  2. package/components/steps/src/DileStep.js +90 -0
  3. package/components/steps/src/DileSteps.js +171 -0
  4. package/components/steps/step.js +5 -0
  5. package/components/steps/steps.js +5 -0
  6. package/components/toast/src/DileToast.js +2 -1
  7. package/components/toast/src/DileToastPersistent.js +1 -1
  8. package/package.json +4 -4
  9. package/components/accordion/accordion.spec.js +0 -253
  10. package/components/app-drawer/app-drawer.spec.js +0 -262
  11. package/components/avatar/avatar.spec.js +0 -25
  12. package/components/bottom-nav/__screenshots__/bottom-nav.spec.js/dile-bottom-nav-places-the-sheet-and-the-overlay-above-the-bar-1.png +0 -0
  13. package/components/bottom-nav/bottom-nav.spec.js +0 -340
  14. package/components/box-selector/box-selector-item.spec.js +0 -27
  15. package/components/box-selector/box-selector.spec.js +0 -27
  16. package/components/breadcrumbs/breadcrumbs-item.spec.js +0 -28
  17. package/components/breadcrumbs/breadcrumbs.spec.js +0 -33
  18. package/components/button/button.spec.js +0 -234
  19. package/components/card/card-slide.spec.js +0 -30
  20. package/components/card/card.spec.js +0 -26
  21. package/components/checkbox/checkbox.spec.js +0 -235
  22. package/components/chip/chip.spec.js +0 -31
  23. package/components/color-picker/color-picker.spec.js +0 -133
  24. package/components/confirm/confirm.spec.js +0 -57
  25. package/components/confirm-text/confirm-text.spec.js +0 -29
  26. package/components/copy-markdown-url/copy-markdown-url.spec.js +0 -27
  27. package/components/copy-text/copy-text.spec.js +0 -38
  28. package/components/data-grid/__screenshots__/data-grid.spec.js/dile-data-grid-dispatches-item-checkbox-changed-and-dile-data-grid-item-selected-when-a-checkbox-is-toggled-1.png +0 -0
  29. package/components/data-grid/data-grid.spec.js +0 -421
  30. package/components/drop-file/drop-file.spec.js +0 -214
  31. package/components/drop-file/file-preview.spec.js +0 -35
  32. package/components/floating-feedback/floating-feedback.spec.js +0 -30
  33. package/components/floating-menu/floating-menu-item.spec.js +0 -27
  34. package/components/floating-menu/floating-menu.spec.js +0 -31
  35. package/components/form-separator/form-separator.spec.js +0 -28
  36. package/components/hamburger/hamburger.spec.js +0 -28
  37. package/components/icon/icon.spec.js +0 -31
  38. package/components/icon-switch/icon-switch-group.spec.js +0 -46
  39. package/components/icon-switch/icon-switch.spec.js +0 -35
  40. package/components/info-box/info-box.spec.js +0 -38
  41. package/components/inline-feedback/inline-feedback.spec.js +0 -46
  42. package/components/input/input-contact.spec.js +0 -32
  43. package/components/input/input-icon.spec.js +0 -166
  44. package/components/input/input-integer.spec.js +0 -31
  45. package/components/input/input-mask.spec.js +0 -314
  46. package/components/input/input-message.spec.js +0 -27
  47. package/components/input/input-money.spec.js +0 -30
  48. package/components/input/input-number-mask.spec.js +0 -48
  49. package/components/input/input-number.spec.js +0 -109
  50. package/components/input/input-percentage.spec.js +0 -31
  51. package/components/input/input-search.spec.js +0 -91
  52. package/components/input/input.spec.js +0 -47
  53. package/components/light-mode-switch/light-mode-switch.spec.js +0 -34
  54. package/components/menu-hamburger/menu-hamburger.spec.js +0 -34
  55. package/components/menu-overlay/menu-overlay.spec.js +0 -44
  56. package/components/message/message.spec.js +0 -42
  57. package/components/modal/__screenshots__/modal.spec.js/dile-modal-closes-only-the-topmost-modal-when-Esc-is-pressed-1.png +0 -0
  58. package/components/modal/__screenshots__/modal.spec.js/dile-modal-dispatches-dile-modal-closed-and-animates-when-the-opened-property-is-set-to-false-1.png +0 -0
  59. package/components/modal/__screenshots__/modal.spec.js/dile-modal-does-not-close-a-blocking-modal-when-Esc-is-pressed-1.png +0 -0
  60. package/components/modal/__screenshots__/modal.spec.js/dile-modal-does-not-close-the-modal-below-when-the-topmost-modal-is-blocking-1.png +0 -0
  61. package/components/modal/__screenshots__/modal.spec.js/dile-modal-ignores-transitionend-events-coming-from-inner-elements-1.png +0 -0
  62. package/components/modal/__screenshots__/modal.spec.js/dile-modal-keeps-the-focus-on-content-focused-by-the-user-when-opening-1.png +0 -0
  63. package/components/modal/__screenshots__/modal.spec.js/dile-modal-opens-and-closes-through-the-opened-attribute-1.png +0 -0
  64. package/components/modal/__screenshots__/modal.spec.js/dile-modal-reflects-the-opened-property-to-the-attribute-1.png +0 -0
  65. package/components/modal/__screenshots__/modal.spec.js/dile-modal-releases-the-background-layer-after-the-close-animation-even-without-transitionend-1.png +0 -0
  66. package/components/modal/__screenshots__/modal.spec.js/dile-modal-releases-the-background-layer-immediately-when-the-animation-duration-is-0s-1.png +0 -0
  67. package/components/modal/modal-help.spec.js +0 -32
  68. package/components/modal/modal.spec.js +0 -250
  69. package/components/nav/nav.spec.js +0 -33
  70. package/components/number-picker/number-picker-element.spec.js +0 -30
  71. package/components/number-picker/number-picker.spec.js +0 -30
  72. package/components/order-switch/__screenshots__/order-switch.spec.js/dile-order-switch-clicking-the-label-re-announces-the-current-value-without-toggling-when-not-selected-1.png +0 -0
  73. package/components/order-switch/__screenshots__/order-switch.spec.js/dile-order-switch-clicking-the-label-toggles-the-order-when-selected-1.png +0 -0
  74. package/components/order-switch/__screenshots__/order-switch.spec.js/dile-order-switch-defaults-to-ascending-order-1.png +0 -0
  75. package/components/order-switch/order-switch.spec.js +0 -57
  76. package/components/otp-input/otp-input.spec.js +0 -41
  77. package/components/pages/pages.spec.js +0 -44
  78. package/components/password/password.spec.js +0 -35
  79. package/components/progress-bar/progress-bar.spec.js +0 -28
  80. package/components/radio-group/__screenshots__/radio-group-dialog.spec.js/dile-radio-group-dialog-renders-dialog-items-with-labels-and-values-1.png +0 -0
  81. package/components/radio-group/__screenshots__/radio-group-dialog.spec.js/dile-radio-group-dialog-renders-items-with-optional-description-1.png +0 -0
  82. package/components/radio-group/__screenshots__/radio-group-dialog.spec.js/dile-radio-group-dialog-updates-value-when-an-option-is-selected-1.png +0 -0
  83. package/components/radio-group/radio-group-dialog.spec.js +0 -126
  84. package/components/radio-group/radio-group.spec.js +0 -128
  85. package/components/radio-group/radio.spec.js +0 -32
  86. package/components/range/range.spec.js +0 -36
  87. package/components/rating/rating.spec.js +0 -34
  88. package/components/rating/star.spec.js +0 -30
  89. package/components/rating-scale-question/rating-scale-option.spec.js +0 -32
  90. package/components/rating-scale-question/rating-scale-question.spec.js +0 -35
  91. package/components/select/__screenshots__/select-search.spec.js/dile-select-search-Value-API-uses-the-label-as-accessible-name-of-the-selected-field-1.png +0 -0
  92. package/components/select/select-ajax-overlay.spec.js +0 -469
  93. package/components/select/select-overlay.spec.js +0 -612
  94. package/components/select/select-search.spec.js +0 -318
  95. package/components/select/select.spec.js +0 -574
  96. package/components/selector/selector-item.spec.js +0 -40
  97. package/components/selector/selector-overlay.spec.js +0 -139
  98. package/components/selector/selector.spec.js +0 -45
  99. package/components/slide-menu/slide-menu.spec.js +0 -38
  100. package/components/slide-show/slide-show.spec.js +0 -34
  101. package/components/social-icon/social-icon.spec.js +0 -26
  102. package/components/spinner/spinner-bar.spec.js +0 -26
  103. package/components/spinner/spinner-block.spec.js +0 -21
  104. package/components/spinner/spinner-horizontal.spec.js +0 -25
  105. package/components/spinner/spinner-icon.spec.js +0 -25
  106. package/components/spinner/spinner-modal.spec.js +0 -26
  107. package/components/spinner/spinner.spec.js +0 -26
  108. package/components/switch/switch.spec.js +0 -33
  109. package/components/tabs/tabs.spec.js +0 -85
  110. package/components/textarea/textarea.spec.js +0 -39
  111. package/components/time-picker/time-picker.spec.js +0 -26
  112. package/components/timer/timer.spec.js +0 -31
  113. package/components/toast/toast.spec.js +0 -86
  114. package/components/tooltip/chip-tooltip.spec.js +0 -29
  115. package/components/tooltip/tooltip.spec.js +0 -32
  116. package/components/web-visor/web-visor.spec.js +0 -32
  117. package/mixins/form/src/DileForm.spec.js +0 -29
@@ -1,139 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './selector-overlay.js';
3
- import './selector-item.js';
4
-
5
- describe('dile-selector-overlay', () => {
6
- afterEach(() => {
7
- document.body.innerHTML = '';
8
- });
9
-
10
- async function renderSelectorOverlay(html) {
11
- document.body.innerHTML = html;
12
- const el = document.body.querySelector('dile-selector-overlay');
13
- await el.updateComplete;
14
- return el;
15
- }
16
-
17
- function wait(ms) {
18
- return new Promise((resolve) => setTimeout(resolve, ms));
19
- }
20
-
21
- it('renders a bare rounded icon trigger with the default icon when label is empty', async () => {
22
- const el = await renderSelectorOverlay(`
23
- <dile-selector-overlay>
24
- <dile-selector-item>One</dile-selector-item>
25
- <dile-selector-item>Two</dile-selector-item>
26
- </dile-selector-overlay>
27
- `);
28
-
29
- const trigger = el.shadowRoot.getElementById('trigger');
30
- const icon = trigger.querySelector('dile-lucide-icon');
31
- expect(icon).toBeTruthy();
32
- expect(icon.getAttribute('icon')).toBe('ellipsis-vertical');
33
- expect(icon.hasAttribute('rounded')).toBe(true);
34
- // dile-lucide-icon forwards `rounded` to the inner icon it renders in its own shadow DOM
35
- expect(icon.shadowRoot.querySelector('[rounded]')).toBeTruthy();
36
- expect(trigger.querySelector('dile-lucide-badge')).toBeFalsy();
37
- });
38
-
39
- it('by default, label is shown as static text regardless of the selection', async () => {
40
- const el = await renderSelectorOverlay(`
41
- <dile-selector-overlay label="Menu" selected="0">
42
- <dile-selector-item>One</dile-selector-item>
43
- <dile-selector-item>Two</dile-selector-item>
44
- </dile-selector-overlay>
45
- `);
46
-
47
- const trigger = el.shadowRoot.getElementById('trigger');
48
- const badge = trigger.querySelector('dile-lucide-badge');
49
- expect(badge).toBeTruthy();
50
- expect(badge.textContent.trim()).toBe('Menu');
51
- expect(badge.getAttribute('icon')).toBe('ellipsis-vertical');
52
- expect(trigger.querySelector('dile-lucide-icon')).toBeFalsy();
53
-
54
- el.querySelectorAll('dile-selector-item')[1].shadowRoot.querySelector('article').click();
55
- await el.updateComplete;
56
-
57
- expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Menu');
58
- });
59
-
60
- it('with dynamicLabel, the trigger label follows the selected item text and updates when selection changes', async () => {
61
- const el = await renderSelectorOverlay(`
62
- <dile-selector-overlay dynamicLabel selected="1">
63
- <dile-selector-item>One</dile-selector-item>
64
- <dile-selector-item>Two</dile-selector-item>
65
- </dile-selector-overlay>
66
- `);
67
-
68
- const trigger = el.shadowRoot.getElementById('trigger');
69
- expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Two');
70
-
71
- el.querySelectorAll('dile-selector-item')[0].shadowRoot.querySelector('article').click();
72
- await el.updateComplete;
73
-
74
- expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('One');
75
- });
76
-
77
- it('with dynamicLabel and nothing selected, label falls back to the label property', async () => {
78
- const el = await renderSelectorOverlay(`
79
- <dile-selector-overlay dynamicLabel label="Choose an option">
80
- <dile-selector-item>One</dile-selector-item>
81
- <dile-selector-item>Two</dile-selector-item>
82
- </dile-selector-overlay>
83
- `);
84
-
85
- const trigger = el.shadowRoot.getElementById('trigger');
86
- expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Choose an option');
87
- });
88
-
89
- it('uses a custom icon name when the icon property is set', async () => {
90
- const el = await renderSelectorOverlay(`
91
- <dile-selector-overlay icon="star" label="Two">
92
- <dile-selector-item>One</dile-selector-item>
93
- <dile-selector-item>Two</dile-selector-item>
94
- </dile-selector-overlay>
95
- `);
96
-
97
- const trigger = el.shadowRoot.getElementById('trigger');
98
- expect(trigger.querySelector('dile-lucide-badge').getAttribute('icon')).toBe('star');
99
- });
100
-
101
- it('opens the internal dile-menu-overlay when the trigger is clicked', async () => {
102
- const el = await renderSelectorOverlay(`
103
- <dile-selector-overlay>
104
- <dile-selector-item>One</dile-selector-item>
105
- <dile-selector-item>Two</dile-selector-item>
106
- </dile-selector-overlay>
107
- `);
108
-
109
- const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
110
- el.shadowRoot.getElementById('trigger').click();
111
- await wait(100);
112
-
113
- expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(true);
114
- });
115
-
116
- it('selecting an item dispatches dile-selected-changed and closes the overlay', async () => {
117
- const el = await renderSelectorOverlay(`
118
- <dile-selector-overlay>
119
- <dile-selector-item>One</dile-selector-item>
120
- <dile-selector-item>Two</dile-selector-item>
121
- </dile-selector-overlay>
122
- `);
123
-
124
- const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
125
- el.shadowRoot.getElementById('trigger').click();
126
- await wait(100);
127
-
128
- let detail = null;
129
- el.addEventListener('dile-selected-changed', (e) => { detail = e.detail; });
130
-
131
- const items = el.querySelectorAll('dile-selector-item');
132
- items[1].shadowRoot.querySelector('article').click();
133
- await el.updateComplete;
134
-
135
- expect(detail.selected).toBe(1);
136
- expect(el.selected).toBe(1);
137
- expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(false);
138
- });
139
- });
@@ -1,45 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './selector.js';
3
- import './selector-item.js';
4
-
5
- describe('dile-selector', () => {
6
- afterEach(() => {
7
- document.body.innerHTML = '';
8
- });
9
-
10
- async function renderSelector(html) {
11
- document.body.innerHTML = html;
12
- const el = document.body.querySelector('dile-selector');
13
- await el.updateComplete;
14
- return el;
15
- }
16
-
17
- it('renders a slot with the selector items', async () => {
18
- const el = await renderSelector(`
19
- <dile-selector>
20
- <dile-selector-item>One</dile-selector-item>
21
- <dile-selector-item>Two</dile-selector-item>
22
- </dile-selector>
23
- `);
24
-
25
- expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
26
- expect(el.querySelectorAll('dile-selector-item').length).toBe(2);
27
- });
28
-
29
- it('selects an item by index when clicked, marking it selected', async () => {
30
- const el = await renderSelector(`
31
- <dile-selector>
32
- <dile-selector-item>One</dile-selector-item>
33
- <dile-selector-item>Two</dile-selector-item>
34
- </dile-selector>
35
- `);
36
-
37
- const items = el.querySelectorAll('dile-selector-item');
38
- items[1].shadowRoot.querySelector('article').click();
39
- await el.updateComplete;
40
-
41
- expect(el.selected).toBe(1);
42
- expect(items[1].selected).toBe(true);
43
- expect(items[0].selected).toBe(false);
44
- });
45
- });
@@ -1,38 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './slide-menu.js';
3
-
4
- describe('dile-slide-menu', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSlideMenu(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-slide-menu');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders closed by default with a nav control', async () => {
17
- const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
18
- expect(el.opened).toBe(false);
19
-
20
- const nav = el.shadowRoot.querySelector('nav');
21
- expect(nav).toBeTruthy();
22
- expect(nav.getAttribute('aria-expanded')).toBe('false');
23
- });
24
-
25
- it('opens when toggled', async () => {
26
- const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
27
- el.toggle();
28
- await el.updateComplete;
29
-
30
- expect(el.opened).toBe(true);
31
- expect(el.shadowRoot.querySelector('nav').getAttribute('aria-expanded')).toBe('true');
32
- });
33
-
34
- it('uses the label property in the nav control', async () => {
35
- const el = await renderSlideMenu('<dile-slide-menu label="Options">Content</dile-slide-menu>');
36
- expect(el.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Options');
37
- });
38
- });
@@ -1,34 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './slide-show.js';
3
-
4
- describe('dile-slide-show', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSlideShow(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-slide-show');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders closed by default with the showLabel text', async () => {
17
- const el = await renderSlideShow('<dile-slide-show>Content</dile-slide-show>');
18
- const link = el.shadowRoot.querySelector('a');
19
-
20
- expect(link).toBeTruthy();
21
- expect(link.textContent.trim()).toBe('Open');
22
- expect(link.classList.contains('showmoreclose')).toBe(true);
23
- });
24
-
25
- it('opens and shows the hideLabel text', async () => {
26
- const el = await renderSlideShow('<dile-slide-show hideLabel="Close it">Content</dile-slide-show>');
27
- el.toggle();
28
- await el.updateComplete;
29
-
30
- const link = el.shadowRoot.querySelector('a');
31
- expect(link.textContent.trim()).toBe('Close it');
32
- expect(link.classList.contains('showmoreopen')).toBe(true);
33
- });
34
- });
@@ -1,26 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './social-icon.js';
3
-
4
- describe('dile-social-icon', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSocialIcon(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-social-icon');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('defaults to the facebook icon and renders an svg', async () => {
17
- const el = await renderSocialIcon('<dile-social-icon></dile-social-icon>');
18
- expect(el.icon).toBe('facebook');
19
- expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
20
- });
21
-
22
- it('renders a different icon based on the icon property', async () => {
23
- const el = await renderSocialIcon('<dile-social-icon icon="twitter"></dile-social-icon>');
24
- expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
25
- });
26
- });
@@ -1,26 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner-bar.js';
3
-
4
- describe('dile-spinner-bar', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSpinnerBar(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-spinner-bar');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders nothing when inactive', async () => {
17
- const el = await renderSpinnerBar('<dile-spinner-bar></dile-spinner-bar>');
18
- expect(el.active).toBe(false);
19
- expect(el.shadowRoot.querySelector('.bar')).toBeNull();
20
- });
21
-
22
- it('renders the bar when active', async () => {
23
- const el = await renderSpinnerBar('<dile-spinner-bar active></dile-spinner-bar>');
24
- expect(el.shadowRoot.querySelector('.bar')).toBeTruthy();
25
- });
26
- });
@@ -1,21 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner-block.js';
3
-
4
- describe('dile-spinner-block', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- it('renders an active dile-spinner inside the loading section', async () => {
10
- document.body.innerHTML = '<dile-spinner-block></dile-spinner-block>';
11
- const el = document.body.querySelector('dile-spinner-block');
12
- await el.updateComplete;
13
-
14
- const section = el.shadowRoot.querySelector('section.loading');
15
- expect(section).toBeTruthy();
16
-
17
- const spinner = section.querySelector('dile-spinner');
18
- expect(spinner).toBeTruthy();
19
- expect(spinner.hasAttribute('active')).toBe(true);
20
- });
21
- });
@@ -1,25 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner-horizontal.js';
3
-
4
- describe('dile-spinner-horizontal', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSpinnerHorizontal(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-spinner-horizontal');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders nothing when inactive', async () => {
17
- const el = await renderSpinnerHorizontal('<dile-spinner-horizontal></dile-spinner-horizontal>');
18
- expect(el.shadowRoot.querySelector('.loader')).toBeNull();
19
- });
20
-
21
- it('renders the loader when active', async () => {
22
- const el = await renderSpinnerHorizontal('<dile-spinner-horizontal active></dile-spinner-horizontal>');
23
- expect(el.shadowRoot.querySelector('.loader')).toBeTruthy();
24
- });
25
- });
@@ -1,25 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner-icon.js';
3
-
4
- describe('dile-spinner-icon', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSpinnerIcon(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-spinner-icon');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('is inactive by default', async () => {
17
- const el = await renderSpinnerIcon('<dile-spinner-icon></dile-spinner-icon>');
18
- expect(el.active).toBe(false);
19
- });
20
-
21
- it('renders the loader icon when active', async () => {
22
- const el = await renderSpinnerIcon('<dile-spinner-icon active></dile-spinner-icon>');
23
- expect(el.shadowRoot.querySelector('dile-lucide-icon-loader-circle')).toBeTruthy();
24
- });
25
- });
@@ -1,26 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner-modal.js';
3
-
4
- describe('dile-spinner-modal', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSpinnerModal(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-spinner-modal');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders nothing when inactive', async () => {
17
- const el = await renderSpinnerModal('<dile-spinner-modal></dile-spinner-modal>');
18
- expect(el.shadowRoot.querySelector('div')).toBeNull();
19
- });
20
-
21
- it('renders the modal overlay with a spinner when active', async () => {
22
- const el = await renderSpinnerModal('<dile-spinner-modal active></dile-spinner-modal>');
23
- expect(el.shadowRoot.querySelector('div')).toBeTruthy();
24
- expect(el.shadowRoot.querySelector('dile-spinner')).toBeTruthy();
25
- });
26
- });
@@ -1,26 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './spinner.js';
3
-
4
- describe('dile-spinner', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSpinner(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-spinner');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders nothing when inactive', async () => {
17
- const el = await renderSpinner('<dile-spinner></dile-spinner>');
18
- expect(el.active).toBe(false);
19
- expect(el.shadowRoot.querySelector('i')).toBeNull();
20
- });
21
-
22
- it('renders the spinner markup when active', async () => {
23
- const el = await renderSpinner('<dile-spinner active></dile-spinner>');
24
- expect(el.shadowRoot.querySelector('i')).toBeTruthy();
25
- });
26
- });
@@ -1,33 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './switch.js';
3
-
4
- describe('dile-switch', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderSwitch(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-switch');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('starts unchecked by default', async () => {
17
- const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
18
- expect(el.checked).toBe(false);
19
- expect(el.shadowRoot.querySelector('section button')).toBeTruthy();
20
- });
21
-
22
- it('toggles checked state and dispatches dile-switch-changed', async () => {
23
- const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
24
- let detail = null;
25
- el.addEventListener('dile-switch-changed', (e) => { detail = e.detail; });
26
-
27
- el.shadowRoot.querySelector('div').click();
28
- await el.updateComplete;
29
-
30
- expect(el.checked).toBe(true);
31
- expect(detail).toEqual({ checked: true, name: 'notify' });
32
- });
33
- });
@@ -1,85 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './tabs.js';
3
-
4
- describe('dile-tabs', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderTabs(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-tabs');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders slotted dile-tab items', async () => {
17
- const el = await renderTabs(`
18
- <dile-tabs selected="0">
19
- <dile-tab>One</dile-tab>
20
- <dile-tab>Two</dile-tab>
21
- </dile-tabs>
22
- `);
23
-
24
- const tabs = el.querySelectorAll('dile-tab');
25
- expect(tabs.length).toBe(2);
26
- await tabs[0].updateComplete;
27
- expect(tabs[0].selected).toBe(true);
28
- });
29
-
30
- it('selects a tab when clicked', async () => {
31
- const el = await renderTabs(`
32
- <dile-tabs>
33
- <dile-tab>One</dile-tab>
34
- <dile-tab>Two</dile-tab>
35
- </dile-tabs>
36
- `);
37
-
38
- const tabs = el.querySelectorAll('dile-tab');
39
- await tabs[1].updateComplete;
40
- tabs[1].shadowRoot.querySelector('article').click();
41
- await el.updateComplete;
42
-
43
- expect(el.selected).toBe(1);
44
- });
45
-
46
- it('renders a native link when the tab has an href', async () => {
47
- const el = await renderTabs(`
48
- <dile-tabs>
49
- <dile-tab href="/one">One</dile-tab>
50
- <dile-tab href="https://example.com" target="_blank">Two</dile-tab>
51
- <dile-tab>Three</dile-tab>
52
- </dile-tabs>
53
- `);
54
-
55
- const tabs = el.querySelectorAll('dile-tab');
56
- await Promise.all([...tabs].map((tab) => tab.updateComplete));
57
-
58
- const link1 = tabs[0].shadowRoot.querySelector('a');
59
- expect(link1.getAttribute('href')).toBe('/one');
60
- expect(link1.hasAttribute('target')).toBe(false);
61
- expect(link1.querySelector('article')).not.toBeNull();
62
-
63
- const link2 = tabs[1].shadowRoot.querySelector('a');
64
- expect(link2.getAttribute('target')).toBe('_blank');
65
-
66
- expect(tabs[2].shadowRoot.querySelector('a')).toBeNull();
67
- });
68
-
69
- it('keeps selection working for tabs with href', async () => {
70
- const el = await renderTabs(`
71
- <dile-tabs attrForSelected="name" selected="two">
72
- <dile-tab name="one" href="#one">One</dile-tab>
73
- <dile-tab name="two" href="#two">Two</dile-tab>
74
- </dile-tabs>
75
- `);
76
-
77
- const tabs = el.querySelectorAll('dile-tab');
78
- await tabs[1].updateComplete;
79
- expect(tabs[1].selected).toBe(true);
80
-
81
- tabs[0].shadowRoot.querySelector('article').click();
82
- await el.updateComplete;
83
- expect(el.selected).toBe('one');
84
- });
85
- });
@@ -1,39 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './textarea.js';
3
-
4
- describe('dile-textarea', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderTextarea(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-textarea');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('renders a native textarea with the initial value', async () => {
17
- const el = await renderTextarea('<dile-textarea name="bio" value="Hello"></dile-textarea>');
18
- const textarea = el.shadowRoot.querySelector('textarea');
19
-
20
- expect(textarea).toBeTruthy();
21
- expect(textarea.value).toBe('Hello');
22
- });
23
-
24
- it('updates the value property on input', async () => {
25
- const el = await renderTextarea('<dile-textarea name="bio"></dile-textarea>');
26
- const textarea = el.shadowRoot.querySelector('textarea');
27
- textarea.value = 'New text';
28
- textarea.dispatchEvent(new Event('input'));
29
- await el.updateComplete;
30
-
31
- expect(el.value).toBe('New text');
32
- });
33
-
34
- it('renders the label when provided', async () => {
35
- const el = await renderTextarea('<dile-textarea name="bio" label="Bio"></dile-textarea>');
36
- const label = el.shadowRoot.querySelector('label');
37
- expect(label.textContent.trim()).toBe('Bio');
38
- });
39
- });
@@ -1,26 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './time-picker.js';
3
-
4
- describe('dile-time-picker', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderTimePicker(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-time-picker');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('defaults to 00:00:00 and renders three number pickers', async () => {
17
- const el = await renderTimePicker('<dile-time-picker name="start"></dile-time-picker>');
18
- expect(el.value).toBe('00:00:00');
19
- expect(el.shadowRoot.querySelectorAll('dile-number-picker-element').length).toBe(3);
20
- });
21
-
22
- it('renders the label when provided', async () => {
23
- const el = await renderTimePicker('<dile-time-picker label="Start time"></dile-time-picker>');
24
- expect(el.shadowRoot.querySelector('label').textContent.trim()).toBe('Start time');
25
- });
26
- });
@@ -1,31 +0,0 @@
1
- import { describe, it, expect, afterEach } from 'vitest';
2
- import './timer.js';
3
-
4
- describe('dile-timer', () => {
5
- afterEach(() => {
6
- document.body.innerHTML = '';
7
- });
8
-
9
- async function renderTimer(html) {
10
- document.body.innerHTML = html;
11
- const el = document.body.querySelector('dile-timer');
12
- await el.updateComplete;
13
- return el;
14
- }
15
-
16
- it('defaults to a 60s duration shown as 01:00', async () => {
17
- const el = await renderTimer('<dile-timer></dile-timer>');
18
- expect(el.duration).toBe(60_000);
19
- expect(el.shadowRoot.querySelector('.display').textContent.trim()).toBe('01:00');
20
- });
21
-
22
- it('renders control buttons when controls is set', async () => {
23
- const el = await renderTimer('<dile-timer controls></dile-timer>');
24
- expect(el.shadowRoot.querySelectorAll('.controls dile-button').length).toBe(3);
25
- });
26
-
27
- it('renders the title when provided', async () => {
28
- const el = await renderTimer('<dile-timer title="Countdown"></dile-timer>');
29
- expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Countdown');
30
- });
31
- });