@code-coaching/vuetiful 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/components/atoms/VButton.test.ts

@@ -1,27 +1,122 @@
 import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { VButton } from ".";
 
-test("VButton using prop", async () => {
+test("VButton", () => {
   expect(VButton).toBeTruthy();
+});
 
+test("VButton using slot", () => {
   const vButtonElement = mount(VButton, {
-    props: {
-      msg: "John Duck",
+    slots: {
+      default: "John Duck",
     },
   });
 
   expect(vButtonElement.text()).toContain("John Duck");
 });
 
-test("VButton using slot", async () => {
-  expect(VButton).toBeTruthy();
+describe("VButton props", () => {
+  describe("given icon is true", () => {
+    test("should have btn-icon class, not have btn class", () => {
+      const vButtonElement = mount(VButton, {
+        props: {
+          icon: true,
+        },
+      });
+      expect(vButtonElement.classes()).toContain("btn-icon");
+      expect(vButtonElement.classes()).not.toContain("btn");
+    });
+  });
+  describe("given icon is false", () => {
+    test("should have btn class, not have btn-icon class", () => {
+      const vButtonElement = mount(VButton, {
+        props: {
+          icon: false,
+        },
+      });
+      expect(vButtonElement.classes()).not.toContain("btn-icon");
+      expect(vButtonElement.classes()).toContain("btn");
+    });
+  });
+});
 
-  const vButtonElement = mount(VButton, {
-    slots: {
-      default: "John Duck",
-    },
+describe("VButton events", () => {
+  describe("given click event", () => {
+    test("should preventDefault and emit click event", async () => {
+      const vButtonElement = mount(VButton);
+      const clickEvent = { preventDefault: () => {} };
+      const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
+      vButtonElement.trigger("click", clickEvent);
+      await vButtonElement.vm.$nextTick();
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(vButtonElement.emitted("click")).toBeTruthy();
+    });
   });
+});
 
-  expect(vButtonElement.text()).toContain("John Duck");
+describe("VButton a11y", () => {
+  describe("a11y role", () => {
+    test("should have role button", () => {
+      const vButtonElement = mount(VButton);
+      expect(vButtonElement.attributes("role")).toBe("button");
+    });
+  });
+  describe("a11y tabindex", () => {
+    test("should have tabindex 0", () => {
+      const vButtonElement = mount(VButton);
+      expect(vButtonElement.attributes("tabindex")).toBe("0");
+    });
+  });
+  describe("given keydown event", () => {
+    describe("given key is Enter", () => {
+      test("should preventDefault and emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: "Enter", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeTruthy();
+      });
+    });
+
+    describe("given key is Space", () => {
+      test("should preventDefault and not emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: " ", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeFalsy();
+      });
+    });
+
+    describe("given key is not Enter or Space", () => {
+      test("should not preventDefault and not emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keydownEvent = { key: "a", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
+        vButtonElement.trigger("keydown", keydownEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).not.toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeFalsy();
+      });
+    });
+  });
+
+  describe("given keyup event", () => {
+    describe("given key is Space", () => {
+      test("should preventDefault and emit click event", async () => {
+        const vButtonElement = mount(VButton);
+        const keyupEvent = { key: " ", preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keyupEvent, "preventDefault");
+        vButtonElement.trigger("keyup", keyupEvent);
+        await vButtonElement.vm.$nextTick();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(vButtonElement.emitted("click")).toBeTruthy();
+      });
+    });
+  });
 });

package/src/components/atoms/VButton.vue

@@ -2,18 +2,51 @@
 import { useAttrs } from "vue";
 
 defineProps({
+  icon: {
+    type: Boolean as () => boolean,
+    default: false,
+  },
   tag: {
     type: String as () => string,
     default: "button",
   },
 });
 const attrs = useAttrs();
+const emit = defineEmits<{ (event: "click"): void }>();
+
+const activate = () => {
+  emit("click");
+};
+
+const clickHandler = (event: MouseEvent) => {
+  event.preventDefault();
+  activate();
+};
+
+const keydownHandler = (event: KeyboardEvent) => {
+  if (["Enter", " "].includes(event.key)) event.preventDefault();
+  if (event.key === "Enter") activate();
+};
+
+const keyupHandler = (event: KeyboardEvent) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    activate();
+  }
+};
 </script>
 
 <template>
   <component
+    tabindex="0"
+    role="button"
     :is="tag"
-    :class="`vuetiful-button btn border-token hover:cursor-pointer ${attrs.class ?? ''}`"
+    :class="`vuetiful-button ${icon ? 'btn-icon' : 'btn'} border-token hover:cursor-pointer ${
+      attrs.class ?? ''
+    }`"
+    @click="clickHandler"
+    @keydown="keydownHandler"
+    @keyup="keyupHandler"
   >
     <slot />
   </component>

package/src/components/molecules/VRailTile.vue

@@ -37,21 +37,31 @@ const { selectedRailTile } = useRail();
 const active = inject("active");
 const hover = inject("hover");
 
-const onClickHandler = () => {
-  if (!props.value) return;
+const activate = () => {
   selectedRailTile.value = props.value;
   emit("click");
 };
-const onKeyHandler = (event: KeyboardEvent) => {
-  if (!props.value) return;
-  if (!["Enter", "Space"].includes(event.key)) return;
-  selectedRailTile.value = props.value;
-  emit("click");
+
+const clickHandler = (event: MouseEvent) => {
+  event.preventDefault();
+  activate();
+};
+
+const keydownHandler = (event: KeyboardEvent) => {
+  if (["Enter", " "].includes(event.key)) event.preventDefault();
+  if (event.key === "Enter") activate();
+};
+
+const keyupHandler = (event: KeyboardEvent) => {
+  if (event.key === " ") {
+    event.preventDefault();
+    activate();
+  }
 };
 </script>
 
 <template>
-  <div @click="onClickHandler" @keydown="onKeyHandler">
+  <div @click="clickHandler" @keydown="keydownHandler" @keyup="keyupHandler">
     <component
       :is="tag"
       v-bind="attrs"

package/src/services/drawer.service.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { useDrawer } from "./drawer.service";
+
+const { drawer, open, close } = useDrawer();
+
+describe("useDrawer", () => {
+  describe("defaults", () => {
+    it("should have the default values", () => {
+      expect(drawer.id).toBe("default");
+      expect(drawer.open).toBe(false);
+      expect(drawer.position).toBe("left");
+      expect(drawer.duration).toBe(300);
+      expect(drawer.regionBackdrop).toBe("");
+      expect(drawer.regionDrawer).toBe("");
+    });
+  });
+
+  describe("open", () => {
+    it("should use the settings", () => {
+      open({
+        id: "test",
+        open: true,
+        position: "right",
+        duration: 150,
+        regionBackdrop: "backdrop",
+        regionDrawer: "drawer",
+      });
+      expect(drawer.id).toBe("test");
+      expect(drawer.open).toBe(true);
+      expect(drawer.position).toBe("right");
+      expect(drawer.duration).toBe(150);
+      expect(drawer.regionBackdrop).toBe("backdrop");
+      expect(drawer.regionDrawer).toBe("drawer");
+    });
+  });
+
+  describe("close", () => {
+    it("should set the drawer to close", () => {
+      open();
+      expect(drawer.open).toBe(true);
+      close();
+      expect(drawer.open).toBe(false);
+    });
+  });
+});

package/src/services/rail.service.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { useRail } from "./rail.service";
+
+const { selectedRailTile } = useRail();
+
+describe("useRail", () => {
+  describe("selectedRailTile", () => {
+    it("should expose selectedRailTile", () => {
+      selectedRailTile.value = "John Duck";
+      expect(selectedRailTile.value).toBe("John Duck");
+    });
+  });
+});