fix(tests): update indicators tests due to structure refactoring

TotomInc · TotomInc · commit ac8886a508df · 2025-05-07T16:16:38.000+02:00
diff --git a/src/Indicators.spec.ts b/src/Indicators.spec.ts
@@ -1,23 +1,35 @@
+import type { ComponentProps } from "vue-component-type-helpers";
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 import ChevronDownIcon from "./icons/ChevronDownIcon.vue";
 import XMarkIcon from "./icons/XMarkIcon.vue";
 import Indicators from "./Indicators.vue";
+import Select from "./Select.vue";
 import Spinner from "./Spinner.vue";
 
-const defaultProps = {
-  hasSelectedOption: false,
-  isMenuOpen: false,
+const options = [
+  { label: "France", value: "FR" },
+  { label: "United Kingdom", value: "GB" },
+  { label: "United States", value: "US" },
+  { label: "Germany", value: "DE" },
+];
+
+const defaultProps: ComponentProps<typeof Select> = {
+  options,
+  modelValue: null,
   isClearable: true,
   isLoading: false,
   isDisabled: false,
 };
 
+async function dispatchEvent(wrapper: ReturnType<typeof mount>, event: Event) {
+  document.dispatchEvent(event);
+  await wrapper.vm.$nextTick();
+};
+
 describe("component setup and initialization", () => {
   it("should render with default imports", () => {
-    const wrapper = mount(Indicators, {
-      props: defaultProps,
-    });
+    const wrapper = mount(Select, { props: defaultProps });
 
     expect(wrapper.findComponent(ChevronDownIcon).exists()).toBe(true);
     expect(wrapper.findComponent(XMarkIcon).exists()).toBe(false);
@@ -27,92 +39,56 @@ describe("component setup and initialization", () => {
 
 describe("dropdown button rendering", () => {
   it("should render dropdown button when not loading", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isLoading: false,
-      },
-    });
+    const wrapper = mount(Select, { props: { ...defaultProps, isLoading: false } });
 
     expect(wrapper.find(".dropdown-icon").exists()).toBe(true);
   });
 
   it("should not render dropdown button when loading", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isLoading: true,
-      },
-    });
+    const wrapper = mount(Select, { props: { ...defaultProps, isLoading: true } });
 
     expect(wrapper.find(".dropdown-icon").exists()).toBe(false);
   });
 
-  it("should add active class to dropdown button when menu is open", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isMenuOpen: true,
-      },
-    });
+  it("should add active class to dropdown button when menu is open", async () => {
+    const wrapper = mount(Select, { props: { ...defaultProps } });
 
+    await wrapper.get("input").trigger("mousedown");
     expect(wrapper.find(".dropdown-icon").classes()).toContain("active");
   });
 
   it("should disable dropdown button when component is disabled", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isDisabled: true,
-      },
-    });
+    const wrapper = mount(Select, { props: { ...defaultProps, isDisabled: true } });
 
     expect(wrapper.find(".dropdown-icon").attributes("disabled")).toBe("");
   });
 
   it("should emit toggle event when dropdown button is clicked", async () => {
-    const wrapper = mount(Indicators, {
-      props: defaultProps,
-    });
+    const wrapper = mount(Select, { props: defaultProps });
+    const indicators = wrapper.findComponent(Indicators);
 
     await wrapper.find(".dropdown-icon").trigger("click");
-    expect(wrapper.emitted("toggle")).toBeTruthy();
-    expect(wrapper.emitted("toggle")!.length).toBe(1);
+    expect(indicators.emitted("toggle")).toStrictEqual([[]]);
   });
 });
 
 describe("loading state handling", () => {
   it("should render spinner when loading", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isLoading: true,
-      },
-    });
+    const wrapper = mount(Select, { props: { ...defaultProps, isLoading: true } });
 
     expect(wrapper.findComponent(Spinner).exists()).toBe(true);
   });
 
   it("should not render spinner when not loading", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isLoading: false,
-      },
-    });
+    const wrapper = mount(Select, { props: { ...defaultProps, isLoading: false } });
 
     expect(wrapper.findComponent(Spinner).exists()).toBe(false);
   });
 
   it("should use custom loading slot content when provided", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        isLoading: true,
-      },
-      slots: {
-        loading: "<div class=\"custom-loader\">Loading...</div>",
-      },
+    const wrapper = mount(Select, {
+      props: { ...defaultProps, isLoading: true },
+      slots: { loading: "<div class=\"custom-loader\">Loading...</div>" },
     });
 
     expect(wrapper.find(".custom-loader").exists()).toBe(true);
@@ -121,106 +97,85 @@ describe("loading state handling", () => {
 });
 
 describe("clear button behavior", () => {
-  it("should render clear button when there is a selected option and isClearable is true", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-        isClearable: true,
-      },
-    });
+  it("should render clear button when there is a selected option and isClearable is true", async () => {
+    const wrapper = mount(Select, { props: { ...defaultProps } });
+
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
 
     expect(wrapper.find(".clear-button").exists()).toBe(true);
   });
 
   it("should not render clear button when there is no selected option", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: false,
-        isClearable: true,
-      },
+    const wrapper = mount(Select, {
+      props: { ...defaultProps, isClearable: true },
     });
 
     expect(wrapper.find(".clear-button").exists()).toBe(false);
   });
 
-  it("should not render clear button when isClearable is false", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-        isClearable: false,
-      },
+  it("should not render clear button when isClearable is false", async () => {
+    const wrapper = mount(Select, {
+      props: { ...defaultProps, isClearable: false },
     });
 
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
+
     expect(wrapper.find(".clear-button").exists()).toBe(false);
   });
 
-  it("should not render clear button when loading", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-        isClearable: true,
-        isLoading: true,
-      },
+  it("should not render clear button when loading", async () => {
+    const wrapper = mount(Select, {
+      props: { ...defaultProps, isClearable: true, isLoading: true },
     });
 
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
+
     expect(wrapper.find(".clear-button").exists()).toBe(false);
   });
 
   it("should emit clear event when clear button is clicked", async () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-      },
-    });
+    const wrapper = mount(Select, { props: defaultProps });
+    const indicators = wrapper.findComponent(Indicators);
 
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
     await wrapper.find(".clear-button").trigger("click");
-    expect(wrapper.emitted("clear")).toBeTruthy();
-    expect(wrapper.emitted("clear")!.length).toBe(1);
-  });
 
-  it("should not be clickable when disabled", async () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-        isDisabled: true,
-      },
-    });
-
-    const clearButton = wrapper.find(".clear-button");
-    expect(clearButton.attributes("disabled")).toBe("");
+    expect(indicators.emitted("clear")).toBeTruthy();
+    expect(indicators.emitted("clear")!.length).toBe(1);
   });
 });
 
 describe("custom slots", () => {
-  it("should use custom clear button slot content when provided", () => {
-    const wrapper = mount(Indicators, {
-      props: {
-        ...defaultProps,
-        hasSelectedOption: true,
-      },
+  it("should use custom clear button slot content when provided", async () => {
+    const wrapper = mount(Select, {
+      props: { ...defaultProps },
       slots: {
         clear: "<span class=\"custom-clear\">✕</span>",
       },
     });
 
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
+
     expect(wrapper.find(".custom-clear").exists()).toBe(true);
     expect(wrapper.findComponent(XMarkIcon).exists()).toBe(false);
   });
 
-  it("should use custom dropdown slot content when provided", () => {
-    const wrapper = mount(Indicators, {
+  it("should use custom dropdown slot content when provided", async () => {
+    const wrapper = mount(Select, {
       props: defaultProps,
       slots: {
         dropdown: "<span class=\"custom-dropdown\">▼</span>",
       },
     });
 
+    await wrapper.get("input").trigger("mousedown");
+    await dispatchEvent(wrapper, new KeyboardEvent("keydown", { key: "Enter" }));
+
     expect(wrapper.find(".custom-dropdown").exists()).toBe(true);
     expect(wrapper.findComponent(ChevronDownIcon).exists()).toBe(false);
   });
