@@ -91,6 +91,19 @@ describe("VueToggles", () => {
91
91
expect ( wrapper . attributes ( "style" ) ) . toContain ( `height: ${ height } px;` ) ;
92
92
} ) ;
93
93
} ) ;
94
+
95
+ it ( "handles dot size prop correctly" , ( ) => {
96
+ runTestForValueProps ( async ( wrapper ) => {
97
+ const dotSize = 10 ;
98
+ await wrapper . setProps ( { dotSize } ) ;
99
+ expect ( wrapper . find ( "[test-id='dot']" ) . attributes ( "style" ) ) . toContain (
100
+ `width: ${ dotSize } px;` ,
101
+ ) ;
102
+ expect ( wrapper . find ( "[test-id='dot']" ) . attributes ( "style" ) ) . toContain (
103
+ `height: ${ dotSize } px;` ,
104
+ ) ;
105
+ } ) ;
106
+ } ) ;
94
107
} ) ;
95
108
96
109
describe ( "Text" , ( ) => {
@@ -116,7 +129,7 @@ describe("VueToggles", () => {
116
129
runTestForValueProps ( async ( wrapper ) => {
117
130
await wrapper . setProps ( { fontWeight } ) ;
118
131
await wrapper . setProps ( { uncheckedText } ) ;
119
- expect ( wrapper . find ( ".vue-toggles__text " ) . attributes ( "style" ) ) . toContain (
132
+ expect ( wrapper . find ( "[test-id='text'] " ) . attributes ( "style" ) ) . toContain (
120
133
`font-weight: ${ fontWeight } ;` ,
121
134
) ;
122
135
} ) ;
@@ -127,7 +140,7 @@ describe("VueToggles", () => {
127
140
runTestForValueProps ( async ( wrapper ) => {
128
141
await wrapper . setProps ( { fontSize } ) ;
129
142
await wrapper . setProps ( { uncheckedText } ) ;
130
- expect ( wrapper . find ( ".vue-toggles__text " ) . attributes ( "style" ) ) . toContain (
143
+ expect ( wrapper . find ( "[test-id='text'] " ) . attributes ( "style" ) ) . toContain (
131
144
`font-size: ${ fontSize } px;` ,
132
145
) ;
133
146
} ) ;
@@ -140,7 +153,7 @@ describe("VueToggles", () => {
140
153
runTestForValueProps (
141
154
async ( wrapper ) => {
142
155
await wrapper . setProps ( { checkedBg } ) ;
143
- expect ( wrapper . find ( ".vue-toggles " ) . attributes ( "style" ) ) . toContain (
156
+ expect ( wrapper . find ( "[test-id='toggle'] " ) . attributes ( "style" ) ) . toContain (
144
157
`background: ${ hexToRgb ( checkedBg ) } ;` ,
145
158
) ;
146
159
} ,
@@ -152,7 +165,7 @@ describe("VueToggles", () => {
152
165
const uncheckedBg = "#654321" ;
153
166
runTestForValueProps ( async ( wrapper ) => {
154
167
await wrapper . setProps ( { uncheckedBg } ) ;
155
- expect ( wrapper . find ( ".vue-toggles " ) . attributes ( "style" ) ) . toContain (
168
+ expect ( wrapper . find ( "[test-id='toggle'] " ) . attributes ( "style" ) ) . toContain (
156
169
`background: ${ hexToRgb ( uncheckedBg ) } ;` ,
157
170
) ;
158
171
} ) ;
@@ -163,7 +176,7 @@ describe("VueToggles", () => {
163
176
runTestForValueProps (
164
177
async ( wrapper ) => {
165
178
await wrapper . setProps ( { dotColor } ) ;
166
- expect ( wrapper . find ( ".vue-toggles__dot " ) . attributes ( "style" ) ) . toContain (
179
+ expect ( wrapper . find ( "[test-id='dot'] " ) . attributes ( "style" ) ) . toContain (
167
180
`background: ${ hexToRgb ( dotColor ) } ;` ,
168
181
) ;
169
182
} ,
@@ -177,7 +190,7 @@ describe("VueToggles", () => {
177
190
async ( wrapper ) => {
178
191
await wrapper . setProps ( { checkedText } ) ;
179
192
await wrapper . setProps ( { checkedTextColor } ) ;
180
- expect ( wrapper . find ( ".vue-toggles__text " ) . attributes ( "style" ) ) . toContain (
193
+ expect ( wrapper . find ( "[test-id='text'] " ) . attributes ( "style" ) ) . toContain (
181
194
`color: ${ hexToRgb ( checkedTextColor ) } ;` ,
182
195
) ;
183
196
} ,
@@ -190,7 +203,7 @@ describe("VueToggles", () => {
190
203
runTestForValueProps ( async ( wrapper ) => {
191
204
await wrapper . setProps ( { uncheckedText } ) ;
192
205
await wrapper . setProps ( { uncheckedTextColor } ) ;
193
- expect ( wrapper . find ( ".vue-toggles__text " ) . attributes ( "style" ) ) . toContain (
206
+ expect ( wrapper . find ( "[test-id='text'] " ) . attributes ( "style" ) ) . toContain (
194
207
`color: ${ hexToRgb ( uncheckedTextColor ) } ;` ,
195
208
) ;
196
209
} ) ;
@@ -221,4 +234,66 @@ describe("VueToggles", () => {
221
234
) ;
222
235
} ) ;
223
236
} ) ;
237
+
238
+ describe ( "Interactions and Events" , ( ) => {
239
+ it ( "emits correct events when clicked" , async ( ) => {
240
+ runTestForValueProps ( async ( wrapper ) => {
241
+ // Initial state should be false
242
+ expect ( wrapper . emitted ( "update:modelValue" ) ) . toBeUndefined ( ) ;
243
+ expect ( wrapper . emitted ( "click" ) ) . toBeUndefined ( ) ;
244
+
245
+ // First click
246
+ await wrapper . trigger ( "click" ) ;
247
+ expect ( wrapper . emitted ( "click" ) ) . toHaveLength ( 1 ) ;
248
+ expect ( wrapper . emitted ( "update:modelValue" ) ?. [ 0 ] ) . toEqual ( [ true ] ) ;
249
+
250
+ // Second click
251
+ await wrapper . trigger ( "click" ) ;
252
+ expect ( wrapper . emitted ( "click" ) ) . toHaveLength ( 2 ) ;
253
+ expect ( wrapper . emitted ( "update:modelValue" ) ?. [ 1 ] ) . toEqual ( [ false ] ) ;
254
+ } ) ;
255
+ } ) ;
256
+
257
+ it ( "emits events on keyboard interaction" , async ( ) => {
258
+ runTestForValueProps ( async ( wrapper ) => {
259
+ // Test Enter key
260
+ await wrapper . trigger ( "keyup.enter" ) ;
261
+ expect ( wrapper . emitted ( "click" ) ) . toHaveLength ( 1 ) ;
262
+ expect ( wrapper . emitted ( "update:modelValue" ) ?. [ 0 ] ) . toEqual ( [ true ] ) ;
263
+
264
+ // Test Space key
265
+ await wrapper . trigger ( "keyup.space" ) ;
266
+ expect ( wrapper . emitted ( "click" ) ) . toHaveLength ( 2 ) ;
267
+ expect ( wrapper . emitted ( "update:modelValue" ) ?. [ 1 ] ) . toEqual ( [ false ] ) ;
268
+ } ) ;
269
+ } ) ;
270
+
271
+ it ( "does not emit events when disabled" , async ( ) => {
272
+ runTestForValueProps ( async ( wrapper ) => {
273
+ await wrapper . setProps ( { disabled : true } ) ;
274
+
275
+ // Click attempt
276
+ await wrapper . trigger ( "click" ) ;
277
+ expect ( wrapper . emitted ( "click" ) ) . toBeUndefined ( ) ;
278
+ expect ( wrapper . emitted ( "update:modelValue" ) ) . toBeUndefined ( ) ;
279
+
280
+ // Keyboard attempt
281
+ await wrapper . trigger ( "keyup.enter" ) ;
282
+ expect ( wrapper . emitted ( "click" ) ) . toBeUndefined ( ) ;
283
+ expect ( wrapper . emitted ( "update:modelValue" ) ) . toBeUndefined ( ) ;
284
+ } ) ;
285
+ } ) ;
286
+
287
+ it ( "maintains correct event state through multiple toggles" , async ( ) => {
288
+ runTestForValueProps ( async ( wrapper ) => {
289
+ // Multiple clicks
290
+ for ( let i = 0 ; i < 3 ; i ++ ) {
291
+ await wrapper . trigger ( "click" ) ;
292
+ const expectedValue = i % 2 === 0 ;
293
+ expect ( wrapper . emitted ( "update:modelValue" ) ?. [ i ] ) . toEqual ( [ expectedValue ] ) ;
294
+ }
295
+ expect ( wrapper . emitted ( "click" ) ) . toHaveLength ( 3 ) ;
296
+ } ) ;
297
+ } ) ;
298
+ } ) ;
224
299
} ) ;
0 commit comments