test(switch): add switch tests

packages/oruga/src/components/checkbox/tests/checkbox.test.ts

@@ -71,7 +71,6 @@ describe("OCheckbox tests", () => {
         let emits = wrapper.emitted("update:modelValue");
         expect(emits).toHaveLength(1);
         expect(emits[0]).toContainEqual(true);
-        await nextTick();
         expect(wrapper.vm.value).toEqual(true);
 
         await input.setValue(false);

packages/oruga/src/components/input/Input.vue

@@ -484,7 +484,7 @@ const counterClasses = defineClasses(["counterClass", "o-input__counter"]);
 // --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
-defineExpose({ focus: setFocus, value: vmodel.value });
+defineExpose({ focus: setFocus, value: vmodel });
 </script>
 
 <template>

packages/oruga/src/components/input/tests/input.test.ts

@@ -1,5 +1,6 @@
 import { beforeEach, afterEach, describe, expect, test, vi } from "vitest";
 import { shallowMount, mount, enableAutoUnmount } from "@vue/test-utils";
+import { nextTick } from "vue";
 
 import OInput from "@/components/input/Input.vue";
 
@@ -28,25 +29,26 @@ describe("OInput", () => {
             props: { icon: "placeholder", iconClickable: true },
         });
 
-        const target = wrapper.find("input");
-        expect(target.exists()).toBeTruthy();
-        expect(target.classes()).toContain("o-input");
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+        expect(input.classes()).toContain("o-input");
 
         const value = "some value";
-        await target.setValue(value);
+        await input.setValue(value);
         await vi.runAllTimers(); // await debounce timer
 
         expect(wrapper.emitted("input")).toHaveLength(1);
         expect(wrapper.emitted("update:modelValue")).toHaveLength(1);
+        expect(wrapper.vm.value).toEqual(value);
     });
 
     test("render textarea element when type is textarea", () => {
         const wrapper = mount(OInput, { props: { type: "textarea" } });
 
-        const target = wrapper.find("textarea");
-        expect(target.exists()).toBeTruthy();
-        expect(target.classes()).toContain("o-input");
-        expect(target.attributes().style).toBeFalsy();
+        const input = wrapper.find("textarea");
+        expect(input.exists()).toBeTruthy();
+        expect(input.classes()).toContain("o-input");
+        expect(input.attributes().style).toBeFalsy();
     });
 
     test("add inline style and call resize for textarea when autosize is true", async () => {
@@ -197,4 +199,16 @@ describe("OInput", () => {
 
         expect(emitted).toEqual([[11], [12], [13], [12], [11]]);
     });
+
+    test("react accordingly when method focus() is called", async () => {
+        const wrapper = mount(OInput);
+
+        const input = wrapper.find("input");
+        input.element.focus = vi.fn();
+
+        wrapper.vm.focus();
+        await nextTick(() => {
+            expect(input.element.focus).toHaveBeenCalled();
+        });
+    });
 });

packages/oruga/src/components/radio/tests/radio.test.ts

@@ -96,7 +96,6 @@ describe("ORadio tests", () => {
         let emits = wrapper1.emitted("update:modelValue");
         expect(emits).toHaveLength(1);
         expect(emits[0]).toContainEqual(value1);
-        await nextTick();
         expect(wrapper1.vm.value).toEqual(value1);
         expect(wrapper2.vm.value).toEqual(value1);
 
@@ -144,7 +143,6 @@ describe("ORadio tests", () => {
         let emits = wrapper1.emitted("update:modelValue");
         expect(emits).toHaveLength(1);
         expect(emits[0]).toContainEqual(value1);
-        await nextTick();
         expect(wrapper1.vm.value).toEqual(value1);
         expect(wrapper2.vm.value).toEqual(value1);
 
@@ -192,7 +190,6 @@ describe("ORadio tests", () => {
         let emits = wrapper1.emitted("update:modelValue");
         expect(emits).toHaveLength(1);
         expect(emits[0]).toContainEqual(value1);
-        await nextTick();
         expect(wrapper1.vm.value).toEqual(value1);
         expect(wrapper2.vm.value).toEqual(value1);
 

packages/oruga/src/components/switch/tests/switch.test.ts

@@ -1,5 +1,6 @@
-import { describe, test, expect, afterEach } from "vitest";
+import { describe, test, expect, afterEach, vi } from "vitest";
 import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { nextTick } from "vue";
 
 import OSwitch from "@/components/switch/Switch.vue";
 
@@ -11,6 +12,151 @@ describe("OSwitch tests", () => {
         expect(!!wrapper.vm).toBeTruthy();
         expect(wrapper.exists()).toBeTruthy();
         expect(wrapper.attributes("data-oruga")).toBe("switch");
+        expect(
+            wrapper.find("label input[type=checkbox]").exists(),
+        ).toBeTruthy(); // has an input checkbox
         expect(wrapper.html()).toMatchSnapshot();
     });
+
+    test("render accordingly when has native attributes", () => {
+        const wrapper = mount(OSwitch, {
+            props: {
+                autocomplete: "on",
+                nativeValue: true,
+                required: true,
+            },
+        });
+
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+        expect(input.attributes("value")).toBe("true");
+        expect(input.attributes("autocomplete")).toBe("on");
+        expect(input.attributes("required")).not.toBeUndefined();
+    });
+
+    test("render accordingly when has size prop", () => {
+        const wrapper = mount(OSwitch, {
+            props: { size: "large" },
+        });
+
+        expect(wrapper.classes("o-switch--large")).toBeTruthy();
+    });
+
+    test("render accordingly when has variant prop", () => {
+        const wrapper = mount(OSwitch, {
+            props: { variant: "danger" },
+        });
+
+        expect(wrapper.classes("o-switch--danger")).toBeTruthy();
+    });
+
+    test("render accordingly when has passiveVariant prop", () => {
+        const wrapper = mount(OSwitch, {
+            props: { passiveVariant: "danger" },
+        });
+
+        expect(wrapper.classes("o-switch--danger-passive")).toBeTruthy();
+    });
+
+    test("render accordingly when has rounded prop", () => {
+        const wrapper = mount(OSwitch, {
+            props: { rounded: true },
+        });
+
+        const span1 = wrapper.find("span.o-switch__check");
+        expect(span1.exists()).toBeTruthy();
+        expect(span1.classes("o-switch--rounded")).not.toBeUndefined();
+
+        const span2 = wrapper.find("span.o-switch__check-switch");
+        expect(span2.exists()).toBeTruthy();
+        expect(span2.classes("o-switch--rounded")).not.toBeUndefined();
+    });
+
+    test("render accordingly when is disabled", () => {
+        const wrapper = mount(OSwitch, {
+            props: { disabled: true },
+        });
+
+        expect(wrapper.classes("o-switch--disabled")).toBeTruthy();
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+        expect(input.attributes("disabled")).not.toBeUndefined();
+    });
+
+    test("react accordingly when value change ", async () => {
+        const wrapper = mount(OSwitch);
+
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+
+        await input.setValue(true);
+        let emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(1);
+        expect(emits[0]).toContainEqual(true);
+        expect(wrapper.vm.value).toEqual(true);
+
+        await input.setValue(false);
+        emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(2);
+        expect(emits[1]).toContainEqual(false);
+        expect(wrapper.vm.value).toEqual(false);
+    });
+
+    test("react accordingly when custom string values are given", async () => {
+        const trueValue = "Yes";
+        const falseValue = "No";
+        const wrapper = mount<typeof OSwitch<string>>(OSwitch, {
+            props: { trueValue, falseValue },
+        });
+
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+
+        await input.setValue(true);
+        let emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(1);
+        expect(emits[0]).toContainEqual(trueValue);
+        expect(wrapper.vm.value).toEqual(trueValue);
+
+        await input.setValue(false);
+        emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(2);
+        expect(emits[1]).toContainEqual(falseValue);
+        expect(wrapper.vm.value).toEqual(falseValue);
+    });
+
+    test("react accordingly when custom object values are given", async () => {
+        const trueValue = { a: "a", b: "b" };
+        const falseValue = { y: "y", x: "X" };
+        const wrapper = mount<typeof OSwitch<object>>(OSwitch, {
+            props: { modelValue: falseValue, trueValue, falseValue },
+        });
+
+        const input = wrapper.find("input");
+        expect(input.exists()).toBeTruthy();
+
+        await input.setValue(true);
+        let emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(1);
+        expect(emits[0]).toContainEqual(trueValue);
+        expect(wrapper.vm.value).toEqual(trueValue);
+
+        await input.setValue(false);
+        emits = wrapper.emitted("update:modelValue");
+        expect(emits).toHaveLength(2);
+        expect(emits[1]).toContainEqual(falseValue);
+        expect(wrapper.vm.value).toEqual(falseValue);
+    });
+
+    test("react accordingly when method focus() is called", async () => {
+        const wrapper = mount(OSwitch);
+
+        const input = wrapper.find("input");
+        input.element.focus = vi.fn();
+
+        wrapper.vm.focus();
+        await nextTick(() => {
+            expect(input.element.focus).toHaveBeenCalled();
+        });
+    });
 });