@fiscozen/checkbox 0.2.0 → 1.0.0

package/src/__test__/FzCheckbox.test.ts

@@ -1,206 +0,0 @@
-// FzCheckbox.test.ts
-import { mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
-import FzCheckbox from "../FzCheckbox.vue";
-
-const MAX_CHECKBOX = 200;
-
-describe("FzCheckbox", () => {
-  it("renders correctly", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.html()).toContain("Test Checkbox");
-  });
-
-  it("is checked when v-model is true", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.checked).toBe(true);
-  });
-
-  it("is unchecked when v-model is false", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.checked).toBe(false);
-  });
-
-  it("should be emphasized", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        emphasis: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("label").classes()).toContain(
-      "peer-checked:[&_div]:text-blue-500",
-    );
-  });
-
-  it("should be disabled", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        disabled: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.disabled).toBe(true);
-  });
-
-  it(`should render ${MAX_CHECKBOX} checkbox all with different ids`, async () => {
-    const checkboxes = Array.from({ length: MAX_CHECKBOX }).map((_) => {
-      return mount(FzCheckbox, {
-        props: {
-          label: "Test Checkbox",
-          value: "test",
-          modelValue: false,
-          disabled: true,
-        },
-      });
-    });
-    await Promise.all(checkboxes.map((c) => c.vm.$nextTick()));
-    const ids = checkboxes.map((c) => c.find("input").attributes("id"));
-    const labelFor = checkboxes.map((c) => c.find("label").attributes("for"));
-    expect(new Set(ids).size).toBe(MAX_CHECKBOX);
-    expect(new Set(labelFor).size).toBe(MAX_CHECKBOX);
-  });
-
-  it("should not throw error when modelValue is undefined", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: undefined,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.checked).toBe(false);
-  });
-
-  it("should not throw error when modelValue is null", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: null,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.checked).toBe(false);
-  });
-
-  it("has correct ARIA attributes (not standalone, no error)", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        required: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const input = wrapper.find("input[type='checkbox']");
-    const id = input.attributes("id");
-    expect(input.attributes("aria-checked")).toBe("false");
-    expect(input.attributes("aria-label")).toBeUndefined();
-    expect(input.attributes("aria-required")).toBe("true");
-    expect(input.attributes("aria-invalid")).toBe("false");
-    expect(input.attributes("aria-describedby")).toBeUndefined();
-    expect(input.attributes("aria-labelledby")).toBe(`${id}-label`);
-    expect(wrapper.find(`#${id}-label`).exists()).toBe(true);
-  });
-
-  it("has correct ARIA attributes (standalone)", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        standalone: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const input = wrapper.find("input[type='checkbox']");
-    expect(input.attributes("aria-labelledby")).toBeUndefined();
-    expect(input.attributes("aria-label")).toBe("Test Checkbox");
-  });
-
-  it("has correct ARIA attributes when error is present", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        error: true,
-      },
-      slots: {
-        error: "Test error message",
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const input = wrapper.find("input[type='checkbox']");
-    const id = input.attributes("id");
-    expect(input.attributes("aria-invalid")).toBe("true");
-    expect(input.attributes("aria-describedby")).toBe(`${id}-error`);
-    expect(wrapper.find(`#${id}-error`).exists()).toBe(true);
-  });
-
-  it("has correct ARIA attributes when error is present but no error message slot", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        error: true,
-      },
-      // No error slot provided
-    });
-    await wrapper.vm.$nextTick();
-    const input = wrapper.find("input[type='checkbox']");
-    // Error state must still be indicated via aria-invalid
-    expect(input.attributes("aria-invalid")).toBe("true");
-    // But aria-describedby should not reference an error element when no error slot is present
-    expect(input.attributes("aria-describedby")).toBeUndefined();
-    // ErrorAlert should not be rendered when no error slot is provided
-    expect(wrapper.find("[role='alert']").exists()).toBe(false);
-  });
-
-  it("has aria-checked='mixed' when indeterminate", async () => {
-    const wrapper = mount(FzCheckbox, {
-      props: {
-        label: "Test Checkbox",
-        value: "test",
-        modelValue: false,
-        indeterminate: true,
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const input = wrapper.find("input[type='checkbox']");
-    expect(input.attributes("aria-checked")).toBe("mixed");
-  });
-});

package/src/__test__/FzCheckboxGroup.test.ts

@@ -1,263 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
-import FzCheckboxGroup from "../FzCheckboxGroup.vue";
-import FzCheckbox from "../FzCheckbox.vue";
-
-describe("FzCheckboxGroup", () => {
-  it("renders correctly", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.html()).toContain("Test Checkbox Group");
-    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
-  });
-
-  it("displays error text when error prop is true", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        error: true,
-      },
-      slots: {
-        error: "Test error message",
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.html()).toContain("Test error message");
-    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
-    expect(wrapper.props("error")).toBe(true);
-
-    // Verify error prop is propagated to individual checkboxes
-    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("error")).toBe(
-      true,
-    );
-    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("error")).toBe(
-      true,
-    );
-  });
-
-  it("has disabled checkboxes when disabled prop is true", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        disabled: true,
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
-    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("disabled")).toBe(
-      true,
-    );
-    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("disabled")).toBe(
-      true,
-    );
-  });
-
-  it("display emphasized checkboxes when emphasis prop is true", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        emphasis: true,
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
-    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("emphasis")).toBe(
-      true,
-    );
-    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("emphasis")).toBe(
-      true,
-    );
-  });
-
-  it("has correct ARIA attributes for accessibility", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const groupId = wrapper.find("[role='group']").attributes("id");
-    const labelId = groupId + "-label";
-    expect(wrapper.find("[role='group']").exists()).toBe(true);
-    expect(wrapper.find("[role='group']").attributes("aria-labelledby")).toBe(
-      labelId,
-    );
-    expect(wrapper.find(`#${labelId}`).exists()).toBe(true);
-    expect(
-      wrapper.find("[role='group']").attributes("aria-describedby"),
-    ).toBeUndefined();
-  });
-
-  it("has aria-describedby when error is present", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        error: true,
-      },
-      slots: {
-        error: "Test error message",
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const groupId = wrapper.find("[role='group']").attributes("id");
-    const errorId = groupId + "-error";
-    expect(wrapper.find("[role='group']").attributes("aria-describedby")).toBe(
-      errorId,
-    );
-    expect(wrapper.find(`#${errorId}`).exists()).toBe(true);
-  });
-
-  it("has aria-invalid but no aria-describedby when error is present but no error message slot", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        error: true,
-      },
-      // No error slot provided
-    });
-    await wrapper.vm.$nextTick();
-    const group = wrapper.find("[role='group']");
-    // Error state should still be indicated via aria-invalid
-    expect(group.attributes("aria-invalid")).toBe("true");
-    // But aria-describedby should not reference an error element when no error slot is present
-    expect(group.attributes("aria-describedby")).toBeUndefined();
-    // ErrorAlert should not be rendered when no error slot is provided
-    expect(wrapper.find("[role='alert']").exists()).toBe(false);
-    // Verify error prop is still propagated to individual checkboxes
-    const checkboxes = wrapper.findAllComponents(FzCheckbox);
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox.props("error")).toBe(true);
-    });
-  });
-
-  it("has aria-describedby when help text is present", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-      },
-      slots: {
-        help: "This is help text",
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const groupId = wrapper.find("[role='group']").attributes("id");
-    const helpId = groupId + "-help";
-    expect(wrapper.find("[role='group']").attributes("aria-describedby")).toBe(
-      helpId,
-    );
-    expect(wrapper.find(`#${helpId}`).exists()).toBe(true);
-    expect(wrapper.find(`#${helpId}`).text()).toBe("This is help text");
-  });
-
-  it("has aria-describedby with both help and error", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          { label: "Option 1", value: "option1" },
-          { label: "Option 2", value: "option2" },
-        ],
-        error: true,
-      },
-      slots: {
-        help: "This is help text",
-        error: "This is an error",
-      },
-    });
-    await wrapper.vm.$nextTick();
-    const groupId = wrapper.find("[role='group']").attributes("id");
-    const helpId = groupId + "-help";
-    const errorId = groupId + "-error";
-    const describedby = wrapper
-      .find("[role='group']")
-      .attributes("aria-describedby");
-
-    // Should contain both IDs separated by space
-    expect(describedby).toContain(helpId);
-    expect(describedby).toContain(errorId);
-    expect(describedby).toBe(`${helpId} ${errorId}`);
-  });
-
-  it("propagates error prop to child checkboxes in hierarchical structure", async () => {
-    const wrapper = mount(FzCheckboxGroup, {
-      props: {
-        label: "Test Checkbox Group",
-        modelValue: [],
-        options: [
-          {
-            label: "Parent Option",
-            value: "parent",
-            children: [
-              { label: "Child 1", value: "child1" },
-              { label: "Child 2", value: "child2" },
-            ],
-          },
-        ],
-        error: true,
-      },
-      slots: {
-        error: "Test error message",
-      },
-    });
-
-    await wrapper.vm.$nextTick();
-    const allCheckboxes = wrapper.findAllComponents(FzCheckbox);
-
-    // Should have parent + 2 children = 3 checkboxes
-    expect(allCheckboxes.length).toBe(3);
-
-    // All checkboxes should have error prop set to true
-    allCheckboxes.forEach((checkbox) => {
-      expect(checkbox.props("error")).toBe(true);
-    });
-  });
-});