design-system-next 2.7.42 → 2.7.44

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.
@@ -1,106 +0,0 @@
1
- // Test script for dropdown component
2
-
3
- import { describe, it, expect } from 'vitest';
4
- import { ref } from 'vue';
5
- import { useDropdown } from '../use-dropdown';
6
-
7
- describe('Dropdown Component Fixes', () => {
8
- describe('Value handling', () => {
9
- it('should handle string value selection correctly', () => {
10
- // Setup single-select dropdown with string value
11
- const modelValue = ref('');
12
- const menuList = [
13
- { text: 'Apple', value: 'apple' },
14
- { text: 'Banana', value: 'banana' }
15
- ];
16
-
17
- const { handleSelectedItem } = useDropdown({
18
- id: 'test',
19
- modelValue,
20
- menuList
21
- });
22
-
23
- // Simulate selecting an item
24
- handleSelectedItem([{ text: 'Apple', value: 'apple' }]);
25
-
26
- // Verify correct value is set
27
- expect(modelValue.value).toBe('apple');
28
- });
29
-
30
- it('should handle multiple selection correctly', () => {
31
- // Setup multi-select dropdown
32
- const modelValue = ref([]);
33
- const menuList = [
34
- { text: 'Apple', value: 'apple' },
35
- { text: 'Banana', value: 'banana' }
36
- ];
37
-
38
- const { handleSelectedItem } = useDropdown({
39
- id: 'test',
40
- modelValue,
41
- menuList,
42
- multiSelect: true
43
- });
44
-
45
- // Simulate selecting multiple items
46
- handleSelectedItem([
47
- { text: 'Apple', value: 'apple' },
48
- { text: 'Banana', value: 'banana' }
49
- ]);
50
-
51
- // Verify correct values are set
52
- expect(modelValue.value).toEqual(['apple', 'banana']);
53
- });
54
- });
55
-
56
- describe('Ladderized dropdown', () => {
57
- it('should handle ladderized dropdown selection', () => {
58
- // Setup ladderized dropdown
59
- const modelValue = ref([]);
60
- const menuList = [
61
- {
62
- text: 'Lion',
63
- value: 'lion',
64
- sublevel: [
65
- { text: 'Cub', value: 'cub' }
66
- ]
67
- }
68
- ];
69
-
70
- const { handleSelectedItem } = useDropdown({
71
- id: 'test',
72
- modelValue,
73
- menuList,
74
- ladderized: true
75
- });
76
-
77
- // Simulate selecting an item
78
- handleSelectedItem([{ text: 'Cub', value: 'cub', subvalue: 'lion' }]);
79
-
80
- // Verify correct values are set for ladderized dropdown
81
- expect(modelValue.value).toEqual(['lion', 'cub']);
82
- });
83
- });
84
-
85
- describe('Edge cases', () => {
86
- it('should handle empty selection', () => {
87
- const modelValue = ref('apple');
88
- const menuList = [
89
- { text: 'Apple', value: 'apple' },
90
- { text: 'Banana', value: 'banana' }
91
- ];
92
-
93
- const { handleSelectedItem } = useDropdown({
94
- id: 'test',
95
- modelValue,
96
- menuList
97
- });
98
-
99
- // Simulate clearing selection
100
- handleSelectedItem([]);
101
-
102
- // Verify value is cleared
103
- expect(modelValue.value).toBeUndefined();
104
- });
105
- });
106
- });
@@ -1,213 +0,0 @@
1
- import { describe, it, expect } from 'vitest';
2
- import { ref } from 'vue';
3
- import { useDropdown } from '../use-dropdown';
4
-
5
- describe('Dropdown Value Types', () => {
6
- describe('Single primitive values', () => {
7
- it('should handle string values', () => {
8
- const modelValue = 'apple';
9
- const menuList = ['apple', 'banana', 'cherry'];
10
-
11
- const { dropdownMenuList, normalizedValue } = useDropdown({
12
- id: 'test',
13
- modelValue,
14
- menuList
15
- });
16
-
17
- expect(normalizedValue.value).toEqual(['apple']);
18
- expect(dropdownMenuList.value).toEqual([
19
- { text: 'apple', value: 'apple' },
20
- { text: 'banana', value: 'banana' },
21
- { text: 'cherry', value: 'cherry' }
22
- ]);
23
- });
24
-
25
- it('should handle number values', () => {
26
- const modelValue = 42;
27
- const menuList = [42, 55, 67];
28
-
29
- const { dropdownMenuList, normalizedValue } = useDropdown({
30
- id: 'test',
31
- modelValue,
32
- menuList
33
- });
34
-
35
- expect(normalizedValue.value).toEqual([42]);
36
- expect(dropdownMenuList.value).toEqual([
37
- { text: '42', value: '42' },
38
- { text: '55', value: '55' },
39
- { text: '67', value: '67' }
40
- ]);
41
- });
42
- });
43
-
44
- describe('Single object values', () => {
45
- it('should handle object values', () => {
46
- const employee = { systemId: 1, firstName: 'John', lastName: 'Doe' };
47
- const modelValue = employee;
48
- const menuList = [
49
- { systemId: 1, firstName: 'John', lastName: 'Doe' },
50
- { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
51
- ];
52
-
53
- const { dropdownMenuList, normalizedValue } = useDropdown({
54
- id: 'test',
55
- modelValue,
56
- menuList,
57
- textField: 'firstName',
58
- valueField: 'systemId'
59
- });
60
-
61
- expect(normalizedValue.value).toEqual([employee]);
62
- expect(dropdownMenuList.value[0].text).toBe('John');
63
- expect(dropdownMenuList.value[1].text).toBe('Jane');
64
- expect(dropdownMenuList.value[0].value).toBe('1');
65
- expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
66
- });
67
- });
68
-
69
- describe('Multiple primitive values', () => {
70
- it('should handle string arrays', () => {
71
- const modelValue = ['apple', 'banana'];
72
- const menuList = ['apple', 'banana', 'cherry'];
73
-
74
- const { dropdownMenuList, normalizedValue } = useDropdown({
75
- id: 'test',
76
- modelValue,
77
- menuList,
78
- multiSelect: true
79
- });
80
-
81
- expect(normalizedValue.value).toEqual(['apple', 'banana']);
82
- expect(dropdownMenuList.value).toEqual([
83
- { text: 'apple', value: 'apple' },
84
- { text: 'banana', value: 'banana' },
85
- { text: 'cherry', value: 'cherry' }
86
- ]);
87
- });
88
-
89
- it('should handle number arrays', () => {
90
- const modelValue = [42, 55];
91
- const menuList = [42, 55, 67];
92
-
93
- const { dropdownMenuList, normalizedValue } = useDropdown({
94
- id: 'test',
95
- modelValue,
96
- menuList,
97
- multiSelect: true
98
- });
99
-
100
- expect(normalizedValue.value).toEqual([42, 55]);
101
- expect(dropdownMenuList.value).toEqual([
102
- { text: '42', value: '42' },
103
- { text: '55', value: '55' },
104
- { text: '67', value: '67' }
105
- ]);
106
- });
107
- });
108
-
109
- describe('Multiple object values', () => {
110
- it('should handle object arrays', () => {
111
- const employees = [
112
- { systemId: 1, firstName: 'John', lastName: 'Doe' },
113
- { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
114
- ];
115
- const modelValue = employees;
116
- const menuList = [
117
- { systemId: 1, firstName: 'John', lastName: 'Doe' },
118
- { systemId: 2, firstName: 'Jane', lastName: 'Smith' },
119
- { systemId: 3, firstName: 'Mike', lastName: 'Johnson' }
120
- ];
121
-
122
- const { dropdownMenuList, normalizedValue } = useDropdown({
123
- id: 'test',
124
- modelValue,
125
- menuList,
126
- textField: 'firstName',
127
- valueField: 'systemId',
128
- multiSelect: true
129
- });
130
-
131
- expect(normalizedValue.value).toEqual(employees);
132
- expect(dropdownMenuList.value[0].text).toBe('John');
133
- expect(dropdownMenuList.value[1].text).toBe('Jane');
134
- expect(dropdownMenuList.value[0].value).toBe('1');
135
- expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
136
- });
137
- });
138
-
139
- describe('Handle selected items', () => {
140
- it('should output string for string selection', () => {
141
- const modelValue = ref(undefined);
142
- const menuList = ['apple', 'banana', 'cherry'];
143
-
144
- const { handleSelectedItem } = useDropdown({
145
- id: 'test',
146
- modelValue,
147
- menuList,
148
- });
149
-
150
- handleSelectedItem([{ text: 'apple', value: 'apple' }]);
151
- expect(modelValue.value).toBe('apple');
152
- });
153
-
154
- it('should output number for number selection', () => {
155
- const modelValue = ref(undefined);
156
- const menuList = [42, 55, 67];
157
-
158
- const { handleSelectedItem } = useDropdown({
159
- id: 'test',
160
- modelValue,
161
- menuList,
162
- });
163
-
164
- handleSelectedItem([{ text: '42', value: '42' }]);
165
- expect(modelValue.value).toBe(42);
166
- });
167
-
168
- it('should output original object for object selection', () => {
169
- const modelValue = ref(undefined);
170
- const employeeObj = { systemId: 1, firstName: 'John', lastName: 'Doe' };
171
- const menuList = [
172
- employeeObj,
173
- { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
174
- ];
175
-
176
- const { handleSelectedItem, dropdownMenuList } = useDropdown({
177
- id: 'test',
178
- modelValue,
179
- menuList,
180
- textField: 'firstName',
181
- valueField: 'systemId'
182
- });
183
-
184
- // Process menu list first to get _originalObject
185
- dropdownMenuList.value.forEach(item => {
186
- if (item.value === '1') {
187
- handleSelectedItem([item]);
188
- }
189
- });
190
-
191
- expect(modelValue.value).toEqual(employeeObj);
192
- });
193
-
194
- it('should output array for multi-select', () => {
195
- const modelValue = ref([]);
196
- const menuList = ['apple', 'banana', 'cherry'];
197
-
198
- const { handleSelectedItem } = useDropdown({
199
- id: 'test',
200
- modelValue,
201
- menuList,
202
- multiSelect: true
203
- });
204
-
205
- handleSelectedItem([
206
- { text: 'apple', value: 'apple' },
207
- { text: 'banana', value: 'banana' }
208
- ]);
209
-
210
- expect(modelValue.value).toEqual(['apple', 'banana']);
211
- });
212
- });
213
- });