test: add first test

packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.spec.ts

@@ -0,0 +1,40 @@
+import { mount } from "@vue/test-utils";
+import userEvent from "@testing-library/user-event";
+import MtColorpicker from "./mt-colorpicker.vue";
+
+async function createWrapper(customOptions = {}) {
+  return mount(MtColorpicker, {
+    ...customOptions,
+  });
+}
+
+describe("src/app/component/form/mt-datepicker", () => {
+  let wrapper: undefined | Awaited<ReturnType<typeof createWrapper>>;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+ it("opens with keyboard", async () => {
+   const user = userEvent.setup();
+   wrapper = await createWrapper({ attachTo: document.body });
+
+   // Simulate tabbing to focus the input element
+   await user.tab();
+   const colorPickerInput = wrapper.find(".mt-colorpicker__input");
+   const inputElement = colorPickerInput.element as HTMLElement;
+
+   // Assert the input has focus
+   expect(inputElement).toHaveFocus();
+
+   // Simulate pressing Enter
+   await user.keyboard("{Enter}");
+
+   // Wait for the dropdown to appear
+   const dropdown = document.querySelector(".mt-floating-ui__content");
+   expect(dropdown).toBeTruthy();
+ });
+
+});

packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue

@@ -783,6 +783,7 @@ export default defineComponent({
             escapeDeactivates: true,
             clickOutsideDeactivates: true,
             initialFocus: false,
+            displayCheck: 'none',
           });
           this.trap.activate();
         }