@code-coaching/vuetiful 0.8.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.8.1",
+  "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,10 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { VButton } from ".";
 
-test("VButton using slot", async () => {
+test("VButton", () => {
   expect(VButton).toBeTruthy();
+});
 
+test("VButton using slot", () => {
   const vButtonElement = mount(VButton, {
     slots: {
       default: "John Duck",
@@ -13,3 +15,108 @@ test("VButton using slot", async () => {
 
   expect(vButtonElement.text()).toContain("John Duck");
 });
+
+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");
+    });
+  });
+});
+
+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();
+    });
+  });
+});
+
+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,19 +2,51 @@
 import { useAttrs } from "vue";
 
 defineProps({
+  icon: {
+    type: Boolean as () => boolean,
+    default: false,
+  },
   tag: {
     type: String as () => string,
     default: "button",
   },
 });
 const attrs = useAttrs();
-defineEmits(["click"]);
+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/rail.service.test.ts

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