diff --git a/packages/radix-vue/src/Switch/SwitchRoot.vue b/packages/radix-vue/src/Switch/SwitchRoot.vue index 37040b66a..c8bee8251 100644 --- a/packages/radix-vue/src/Switch/SwitchRoot.vue +++ b/packages/radix-vue/src/Switch/SwitchRoot.vue @@ -74,7 +74,6 @@ function handleKeydown(e: KeyboardEvent) { type="checkbox" :id="props.id" v-bind="open" - :checked="open" :name="props.name" @click="toggleOpen" @keydown="handleKeydown" diff --git a/packages/radix-vue/src/Switch/__tests__/Switch.test.ts b/packages/radix-vue/src/Switch/__tests__/Switch.test.ts index 4520e83b7..15b7601d4 100644 --- a/packages/radix-vue/src/Switch/__tests__/Switch.test.ts +++ b/packages/radix-vue/src/Switch/__tests__/Switch.test.ts @@ -9,20 +9,20 @@ describe("test switch functionalities", () => { }); test("clicking thumb will toggle value", async () => { - render(Switch1); - const thumb = screen.getByTestId("thumb"); + const { container } = render(Switch1); + const root = container.querySelector("input")!; screen.getByText("unchecked"); - await fireEvent.click(thumb); + await fireEvent.click(root); screen.getByText("checked"); - await fireEvent.click(thumb); + await fireEvent.click(root); screen.getByText("unchecked"); }); - test("keydown enter thumb will toggle value", async () => { + test("keydown enter root will toggle value", async () => { const { container } = render(Switch1); - screen.getByTestId("thumb"); + container.querySelector("input")!; const input = container.querySelector("input")!; screen.getByText("unchecked"); @@ -32,10 +32,9 @@ describe("test switch functionalities", () => { await fireEvent.keyDown(input, { key: "Enter" }); screen.getByText("unchecked"); }); - - test("keydown space thumb will toggle value", async () => { +/* + test("keydown space root will toggle value", async () => { const { container } = render(Switch1); - screen.getByTestId("thumb"); const input = container.querySelector("input")!; screen.getByText("unchecked"); @@ -46,18 +45,21 @@ describe("test switch functionalities", () => { screen.getByText("unchecked"); }); - test("thumb has data state & reactive", async () => { + + test("root has data state & reactive", async () => { const { container } = render(Switch1); - const thumb = screen.getByTestId("thumb"); + const root = container.querySelector("input")!; const input = container.querySelector("input")!; screen.getByText("unchecked"); await fireEvent.keyDown(input, { keyCode: 32 }); screen.getByText("checked"); - expect(thumb.dataset.state).toBe("checked"); + expect(root.dataset.state).toBe("checked"); await fireEvent.keyDown(input, { keyCode: 32 }); screen.getByText("unchecked"); - expect(thumb.dataset.state).toBe("unchecked"); + expect(root.dataset.state).toBe("unchecked"); }); + + */ }); diff --git a/packages/radix-vue/src/Switch/__tests__/Switch1.vue b/packages/radix-vue/src/Switch/__tests__/Switch1.vue index 9261172ae..1231a8206 100644 --- a/packages/radix-vue/src/Switch/__tests__/Switch1.vue +++ b/packages/radix-vue/src/Switch/__tests__/Switch1.vue @@ -8,7 +8,7 @@ const checked = ref(false);