test: add tag and text area tests

Author: skaptox

src/components/primitives/Tag/__tests__/Tag.spec.ts

@@ -0,0 +1,141 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import Tag from "../Tag.vue";
+
+describe("Tag", () => {
+  it("renders with default props", () => {
+    const wrapper = mount(Tag, {
+      slots: {
+        default: "Tag Text",
+      },
+    });
+    expect(wrapper.find(".tag").exists()).toBe(true);
+    expect(wrapper.text()).toBe("Tag Text");
+  });
+
+  it("applies style props correctly", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        type: "is-primary",
+        size: "is-medium",
+        rounded: true,
+      },
+    });
+    const tag = wrapper.find(".tag");
+    expect(tag.classes()).toContain("is-primary");
+    expect(tag.classes()).toContain("is-medium");
+    expect(tag.classes()).toContain("is-rounded");
+  });
+
+  it("handles closable prop", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+      },
+    });
+    expect(wrapper.find(".delete").exists()).toBe(true);
+  });
+
+  it("emits close event when delete button is clicked", async () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+      },
+    });
+    await wrapper.find(".delete").trigger("click");
+    expect(wrapper.emitted("close")).toBeTruthy();
+  });
+
+  it("does not emit close event when disabled", async () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+        disabled: true,
+      },
+    });
+    await wrapper.find(".delete").trigger("click");
+    expect(wrapper.emitted("close")).toBeFalsy();
+  });
+
+  it("handles attached mode correctly", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        attached: true,
+        closable: true,
+      },
+    });
+    expect(wrapper.find(".tags.has-addons").exists()).toBe(true);
+    expect(wrapper.find(".is-delete").exists()).toBe(true);
+  });
+
+  it("shows ellipsis when ellipsis prop is true", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        ellipsis: true,
+      },
+      slots: {
+        default: "Long text that should be ellipsized",
+      },
+    });
+    expect(wrapper.find(".has-ellipsis").exists()).toBe(true);
+  });
+
+  it("handles tabstop correctly", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+        tabstop: false,
+      },
+    });
+    expect(wrapper.find(".delete").attributes("tabindex")).toBe("false");
+
+    const wrapperWithTabstop = mount(Tag, {
+      props: {
+        closable: true,
+        tabstop: true,
+      },
+    });
+    expect(wrapperWithTabstop.find(".delete").attributes("tabindex")).toBe("0");
+  });
+
+  it("applies aria-label to close button", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+        ariaCloseLabel: "Close tag",
+      },
+    });
+    expect(wrapper.find(".delete").attributes("aria-label")).toBe("Close tag");
+  });
+
+  it("applies close type class", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+        closeType: "is-danger",
+      },
+    });
+    expect(wrapper.find(".delete").classes()).toContain("is-danger");
+  });
+
+  it("shows custom close icon when provided", () => {
+    const wrapper = mount(Tag, {
+      props: {
+        attached: true,
+        closable: true,
+        closeIcon: "custom-icon",
+      },
+    });
+    expect(wrapper.find(".has-delete-icon").exists()).toBe(true);
+  });
+
+  it("handles keyboard delete event", async () => {
+    const wrapper = mount(Tag, {
+      props: {
+        closable: true,
+      },
+    });
+    await wrapper.find(".delete").trigger("keyup.delete");
+    expect(wrapper.emitted("close")).toBeTruthy();
+  });
+});

src/components/primitives/Textarea/__tests__/Textarea.spec.ts

@@ -0,0 +1,131 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import Textarea from "../Textarea.vue";
+
+describe("Textarea", () => {
+  it("renders with default props", () => {
+    const wrapper = mount(Textarea);
+    expect(wrapper.find(".control").exists()).toBe(true);
+    expect(wrapper.find("textarea").exists()).toBe(true);
+  });
+
+  it("handles v-model correctly", async () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        modelValue: "Initial text",
+      },
+    });
+    expect(wrapper.find("textarea").element.value).toBe("Initial text");
+
+    await wrapper.find("textarea").setValue("New text");
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0]).toEqual(["Initial text"]);
+    expect(emitted?.[1]).toEqual(["New text"]);
+  });
+
+  it("applies style props correctly", () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        color: "is-primary",
+        size: "is-large",
+      },
+    });
+    const textarea = wrapper.find("textarea");
+    expect(textarea.classes()).toContain("is-primary");
+    expect(textarea.classes()).toContain("is-large");
+    expect(wrapper.find(".control").classes()).toContain("is-large");
+  });
+
+  it("shows loading state", () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        loading: true,
+      },
+    });
+    expect(wrapper.find(".control").classes()).toContain("is-loading");
+  });
+
+  it("applies hover state", () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        hovered: true,
+      },
+    });
+    expect(wrapper.find("textarea").classes()).toContain("is-hovered");
+  });
+
+  it("applies focus state", () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        focused: true,
+      },
+    });
+    expect(wrapper.find("textarea").classes()).toContain("is-focused");
+  });
+
+  it("handles focus and blur events", async () => {
+    const wrapper = mount(Textarea);
+    const textarea = wrapper.find("textarea");
+
+    await textarea.trigger("focus");
+    expect(wrapper.vm.isFocused).toBe(true);
+
+    await textarea.trigger("blur");
+    expect(wrapper.vm.isFocused).toBe(false);
+  });
+
+  it("shows character counter when hasCounter and maxlength are set", () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        hasCounter: true,
+        maxlength: "100",
+        modelValue: "Hello",
+      },
+    });
+    expect(wrapper.find("small").exists()).toBe(true);
+    expect(wrapper.find("small").text()).toBe("5 / 100");
+  });
+
+  it("hides counter when not focused", async () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        hasCounter: true,
+        maxlength: "100",
+        modelValue: "Hello",
+      },
+    });
+    expect(wrapper.find("small").classes()).toContain("is-invisible");
+
+    await wrapper.find("textarea").trigger("focus");
+    expect(wrapper.find("small").classes()).not.toContain("is-invisible");
+
+    await wrapper.find("textarea").trigger("blur");
+    expect(wrapper.find("small").classes()).toContain("is-invisible");
+  });
+
+  it("inherits HTML attributes", () => {
+    const wrapper = mount(Textarea, {
+      attrs: {
+        placeholder: "Enter text here",
+        rows: "5",
+        name: "description",
+      },
+    });
+    const textarea = wrapper.find("textarea");
+    expect(textarea.attributes("placeholder")).toBe("Enter text here");
+    expect(textarea.attributes("rows")).toBe("5");
+    expect(textarea.attributes("name")).toBe("description");
+  });
+
+  it("updates value when modelValue prop changes", async () => {
+    const wrapper = mount(Textarea, {
+      props: {
+        modelValue: "Initial",
+      },
+    });
+    // @ts-expect-error
+    await wrapper.setProps({ modelValue: "Updated" });
+    expect(wrapper.find("textarea").element.value).toBe("Updated");
+  });
+});