@oruga-ui/oruga-next/src/components/switch/tests/switch.unit.test.ts

UI components for Vue.js and CSS framework agnostic

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";

describe("OSwitch tests", () => {
    enableAutoUnmount(afterEach);

    test("render correctly", () => {
        const wrapper = mount(OSwitch, { props: { label: "My input" } });
        expect(!!wrapper.vm).toBeTruthy();
        expect(wrapper.exists()).toBeTruthy();
        expect(wrapper.attributes("data-oruga")).toBe("switch");
        expect(wrapper.find("input[type=checkbox]").exists()).toBeTruthy();
        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 },
        });

        expect(wrapper.classes("o-switch--rounded")).toBeDefined();
    });

    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")).toBeDefined();
    });

    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(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(OSwitch, {
            props: {
                modelValue: falseValue,
                trueValue,
                falseValue,
                "onUpdate:modelValue": (modelValue) =>
                    wrapper.setProps({ modelValue }),
            },
        });

        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?.[0]).toContainEqual(trueValue);
        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");
        const dummyFocus = vi.fn();
        input.element.focus = dummyFocus;

        wrapper.vm.focus();
        await nextTick(() => {
            expect(dummyFocus).toHaveBeenCalled();
        });
    });
});