test: SketchyDiv tests completed

Author: brimmann

demo-app/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <SketchyDiv class="pd" style="margin-bottom: 10px">INsied</SketchyDiv>
+  <SketchyDiv style="padding: 80px;"></SketchyDiv>
   <SketchyBtn
     label="Click"
     style="padding: 10px 5px; font-size: 18px; margin-bottom: 100px"
@@ -15,7 +15,8 @@
 </template>
 
 <script setup>
-import { SketchyDiv, SketchyBtn, SketchyHLine, SketchyTab, SketchyTabs } from "codeglynuikit";
+import {  SketchyBtn, SketchyHLine, SketchyTab, SketchyTabs } from "codeglynuikit";
+import SketchyDiv from "../../lib/src/components/sketchydiv/SketchyDiv.vue";
 import { ref } from "vue";
 
 const tab = ref("focuz")

docs/unit-tests/sketchy-div.md

@@ -2,11 +2,12 @@
 These are some unit test cases for SketchyDiv component
 
 ## Rendering
-- div and convas dimensions matches
+- container div exist
+- canvas size is not 0 if container is greator then 0
 
 
 ## Props
-- classes passed to it are part of the container div
+- classes passed to it are classes of the container div
 
 ## Events
 - emit `click` event when clicked
@@ -15,9 +16,7 @@ These are some unit test cases for SketchyDiv component
 - *no tests specified*
 
 ## Slots
-- render a div in the dom
-- contain the text passed to it
-- contain the element passed to it
+- render a div that is passed in the slot
 
 ## Accessibility
 - *no tests specified*

lib/package.json

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

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

@@ -1,11 +1,52 @@
-import { mount } from "@vue/test-utils";
-import { render } from "@testing-library/vue"
+import { flushPromises, mount } from "@vue/test-utils";
+import { fireEvent, render } from "@testing-library/vue";
 import { describe, test, expect } from "vitest";
 import SketchyDiv from "./SketchyDiv.vue";
 
 describe("SketchyDiv", () => {
-  test("div and convas dimension matches", () => {
-    const wrapper = mount(SketchyDiv)
-    console.log("Something is happening");
+  test("container div exists", () => {
+    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: {
+        style: "padding: 80px",
+      },
+    });
+    const canvas = wrapper.container.querySelector("canvas");
+    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: {
+        class: "cls1 cls2",
+      },
+    });
+    const containerDiv = wrapper.container.firstChild;
+    expect(containerDiv).toHaveClass("cls1");
+  });
+  test("emit `click` event when clicked", async () => {
+    const wrapper = render(SketchyDiv, {
+      attrs: {
+        class: "cls1 cls2",
+      },
+    });
+    const containerDiv = wrapper.container.firstChild;
+    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>';
+    const wrapper = mount(SketchyDiv, {
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    const slotDiv = wrapper.find('[data-testid="slot-div"]');
+    expect(slotDiv.exists()).toBe(true);
   });
 });

lib/src/components/sketchydiv/SketchyDiv.vue

@@ -87,14 +87,18 @@ 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();
@@ -110,7 +114,7 @@ export default {
           height: size.value.height,
           class: style.boxCanvas,
         }),
-        slots.default ? slots.default() : () => [],
+        slots.default ? slots.default() : [],
       ];
 
       return h("div", nodeProps.value, { default: () => child });

lib/src/components/test/MyTest.js

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