Skip to content

Commit 57fdbae

Browse files
committed
use test-id
1 parent 0601c57 commit 57fdbae

File tree

2 files changed

+90
-9
lines changed

2 files changed

+90
-9
lines changed

src/__tests__/VueToggles.spec.ts

Lines changed: 82 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,19 @@ describe("VueToggles", () => {
9191
expect(wrapper.attributes("style")).toContain(`height: ${height}px;`);
9292
});
9393
});
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+
});
94107
});
95108

96109
describe("Text", () => {
@@ -116,7 +129,7 @@ describe("VueToggles", () => {
116129
runTestForValueProps(async (wrapper) => {
117130
await wrapper.setProps({ fontWeight });
118131
await wrapper.setProps({ uncheckedText });
119-
expect(wrapper.find(".vue-toggles__text").attributes("style")).toContain(
132+
expect(wrapper.find("[test-id='text']").attributes("style")).toContain(
120133
`font-weight: ${fontWeight};`,
121134
);
122135
});
@@ -127,7 +140,7 @@ describe("VueToggles", () => {
127140
runTestForValueProps(async (wrapper) => {
128141
await wrapper.setProps({ fontSize });
129142
await wrapper.setProps({ uncheckedText });
130-
expect(wrapper.find(".vue-toggles__text").attributes("style")).toContain(
143+
expect(wrapper.find("[test-id='text']").attributes("style")).toContain(
131144
`font-size: ${fontSize}px;`,
132145
);
133146
});
@@ -140,7 +153,7 @@ describe("VueToggles", () => {
140153
runTestForValueProps(
141154
async (wrapper) => {
142155
await wrapper.setProps({ checkedBg });
143-
expect(wrapper.find(".vue-toggles").attributes("style")).toContain(
156+
expect(wrapper.find("[test-id='toggle']").attributes("style")).toContain(
144157
`background: ${hexToRgb(checkedBg)};`,
145158
);
146159
},
@@ -152,7 +165,7 @@ describe("VueToggles", () => {
152165
const uncheckedBg = "#654321";
153166
runTestForValueProps(async (wrapper) => {
154167
await wrapper.setProps({ uncheckedBg });
155-
expect(wrapper.find(".vue-toggles").attributes("style")).toContain(
168+
expect(wrapper.find("[test-id='toggle']").attributes("style")).toContain(
156169
`background: ${hexToRgb(uncheckedBg)};`,
157170
);
158171
});
@@ -163,7 +176,7 @@ describe("VueToggles", () => {
163176
runTestForValueProps(
164177
async (wrapper) => {
165178
await wrapper.setProps({ dotColor });
166-
expect(wrapper.find(".vue-toggles__dot").attributes("style")).toContain(
179+
expect(wrapper.find("[test-id='dot']").attributes("style")).toContain(
167180
`background: ${hexToRgb(dotColor)};`,
168181
);
169182
},
@@ -177,7 +190,7 @@ describe("VueToggles", () => {
177190
async (wrapper) => {
178191
await wrapper.setProps({ checkedText });
179192
await wrapper.setProps({ checkedTextColor });
180-
expect(wrapper.find(".vue-toggles__text").attributes("style")).toContain(
193+
expect(wrapper.find("[test-id='text']").attributes("style")).toContain(
181194
`color: ${hexToRgb(checkedTextColor)};`,
182195
);
183196
},
@@ -190,7 +203,7 @@ describe("VueToggles", () => {
190203
runTestForValueProps(async (wrapper) => {
191204
await wrapper.setProps({ uncheckedText });
192205
await wrapper.setProps({ uncheckedTextColor });
193-
expect(wrapper.find(".vue-toggles__text").attributes("style")).toContain(
206+
expect(wrapper.find("[test-id='text']").attributes("style")).toContain(
194207
`color: ${hexToRgb(uncheckedTextColor)};`,
195208
);
196209
});
@@ -221,4 +234,66 @@ describe("VueToggles", () => {
221234
);
222235
});
223236
});
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+
});
224299
});

src/components/VueToggles.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,18 @@ watchEffect(() => {
134134
tabindex="0"
135135
:aria-checked="isChecked"
136136
:aria-readonly="disabled"
137+
test-id="toggle"
137138
@keyup.enter.prevent="toggle"
138139
@keyup.space.prevent="toggle"
139140
@click="toggle"
140141
>
141-
<span aria-hidden="true" :style="dotStyle" class="vue-toggles__dot">
142-
<span v-if="checkedText || uncheckedText" class="vue-toggles__text" :style="textStyle">
142+
<span aria-hidden="true" :style="dotStyle" class="vue-toggles__dot" test-id="dot">
143+
<span
144+
v-if="checkedText || uncheckedText"
145+
class="vue-toggles__text"
146+
:style="textStyle"
147+
test-id="text"
148+
>
143149
{{ isChecked ? checkedText : uncheckedText }}
144150
</span>
145151
</span>

0 commit comments

Comments
 (0)