test: SketchyBtn tests completed

Author: brimmann

docs/unit-tests/sketchy-btn.md

@@ -0,0 +1,27 @@
+# SketchyDiv Component Tests
+
+These are some unit test cases for SketchyBtn component
+
+## Rendering
+
+- render on the screen
+
+## Props
+
+- label is rendered
+
+## Events
+
+- emit `click` event when clicked
+
+## Methods
+
+- _no tests specified_
+
+## Slots
+
+- _no tests specified_
+
+## Accessibility
+
+- _no tests specified_

docs/unit-tests/sketchy-div.md

@@ -1,22 +1,28 @@
 # SketchyDiv Component Tests
+
 These are some unit test cases for SketchyDiv component
 
 ## Rendering
+
 - container div exist
 - canvas size is not 0 if container is greator then 0
 
-
 ## Props
+
 - classes passed to it are classes of the container div
 
 ## Events
+
 - emit `click` event when clicked
 
 ## Methods
-- *no tests specified*
+
+- _no tests specified_
 
 ## Slots
+
 - render a div that is passed in the slot
 
 ## Accessibility
-- *no tests specified*
+
+- _no tests specified_

lib/package.json

@@ -44,7 +44,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:unit": "vitest"
+    "test:unit": "vitest run"
   },
   "dependencies": {
     "roughjs": "^4.6.6",

lib/src/components/sketchybtn/SketchyBtn.test.js

@@ -0,0 +1,27 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import SketchyBtn from "./SketchyBtn.vue";
+import { render } from "@testing-library/vue";
+
+describe("SketchyBtn", () => {
+  test("render on the scree", () => {
+    const wrapper = shallowMount(SketchyBtn);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test("label is rendered", () => {
+    const label = "Button";
+    const wrapper = mount(SketchyBtn, {
+      props: {
+        label: label,
+      },
+    });
+    expect(wrapper.text()).toContain(label);
+  });
+
+  test("emit `click` event when clicked", async () => {
+    const wrapper = shallowMount(SketchyBtn);
+    await wrapper.trigger("click");
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+});

lib/src/components/sketchydiv/SketchyDiv.test.js

@@ -8,6 +8,7 @@ describe("SketchyDiv", () => {
     const wrapper = render(SketchyDiv);
     expect(wrapper.container.firstChild.tagName).toBe("DIV");
   });
+
   test("canvas size is not 0 if container is greator then 0", () => {
     const wrapper = render(SketchyDiv, {
       attrs: {
@@ -18,6 +19,7 @@ describe("SketchyDiv", () => {
     expect(canvas.width).toBeGreaterThan(0);
     expect(canvas.height).toBeGreaterThan(0);
   });
+
   test("classes passed to it are classes of the container div", () => {
     const wrapper = render(SketchyDiv, {
       attrs: {
@@ -27,6 +29,7 @@ describe("SketchyDiv", () => {
     const containerDiv = wrapper.container.firstChild;
     expect(containerDiv).toHaveClass("cls1");
   });
+
   test("emit `click` event when clicked", async () => {
     const wrapper = render(SketchyDiv, {
       attrs: {
@@ -37,6 +40,7 @@ describe("SketchyDiv", () => {
     await fireEvent.click(containerDiv);
     expect(wrapper.emitted().click).toBeTruthy();
   });
+  
   test("render a div that is passed in the slot", () => {
     const slotContent =
       '<div data-testid="slot-div">This is inside SketchyDiv</div>';

lib/src/components/sketchydiv/SketchyDiv.vue

@@ -87,18 +87,14 @@ export default {
     }
 
     onMounted(() => {
-      console.log("onMounted, outNext", containerRef.value.clientHeight)
       nextTick(() => {
-        console.log("onMounted, inNext", containerRef.value.clientHeight)
         size.value.width = containerRef.value.clientWidth;
         size.value.height = containerRef.value.clientHeight;
         drawDiv();
       });
     });
     onUpdated(() => {
-      console.log("onUpdated, outNext", containerRef.value.clientHeight)
       nextTick(() => {
-        console.log("onUpdated, inNext", containerRef.value.clientHeight)
         size.value.width = containerRef.value.clientWidth;
         size.value.height = containerRef.value.clientHeight;
         clearCanvas();

lib/vite.config.js

@@ -10,7 +10,7 @@ export default defineConfig({
     browser: {
       enabled: true,
       name: "firefox",
-      // headless: true,
+      headless: true,
       provider: "playwright",
       // https://playwright.dev
       providerOptions: {},