chore(deps): upgrade Vue+Vite+Vitest

package.json

@@ -71,14 +71,13 @@
     "@storybook/addon-links": "^7.5.3",
     "@storybook/builder-vite": "^7.5.3",
     "@storybook/vue3-vite": "^7.5.3",
-    "@vitejs/plugin-vue": "^4.4.1",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vitest/coverage-v8": "^0.34.6",
-    "@vue/babel-plugin-jsx": "^1.1.5",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/babel-plugin-jsx": "^1.2.2",
     "@vue/babel-preset-jsx": "^1.4.0",
-    "@vue/compat": "^3.3.8",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/test-utils": "2.0.2",
+    "@vue/compat": "^3.4.31",
+    "@vue/test-utils": "2.4.6",
     "@vuepress/plugin-register-components": "^2.0.0-beta.61",
     "babel-core": "^7.0.0-bridge.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
@@ -102,7 +101,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.18.1",
-    "happy-dom": "^12.10.3",
+    "happy-dom": "^14.12.3",
     "husky": "^4.2.3",
     "jest-serializer-vue": "^3.1.0",
     "lint-staged": "^10.0.7",
@@ -121,9 +120,9 @@
     "semantic-release": "^17.0.4",
     "storybook": "^7.5.3",
     "uglify-es": "^3.3.4",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.8",
+    "vite": "^5.3.3",
+    "vitest": "^1.6.0",
+    "vue": "^3.4.31",
     "vue-docgen-cli": "^4.44.29",
     "vuepress": "2.0.0-beta.68"
   },

src/components/__tests__/FinderItem.test.js

@@ -4,7 +4,6 @@ import { h } from "vue";
 import TreeModel from "@/utils/tree-model";
 import FinderItem from "../FinderItem.vue";
 
-vi.mock("@/utils/tree-model");
 vi.useFakeTimers();
 
 describe("FinderItem", () => {
@@ -49,17 +48,18 @@ describe("FinderItem", () => {
 
   describe("Expand", () => {
     it("should match snapshot if expanded", () => {
-      treeModel.isNodeExpanded.mockReturnValue(true);
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
           node,
         },
       });
+      treeModel.expandNode("test1");
       expect(wrapper.html()).toMatchSnapshot();
     });
 
     it("should call treeModel.expandNode on focus", async () => {
+      vi.spyOn(treeModel, "expandNode");
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
@@ -77,6 +77,7 @@ describe("FinderItem", () => {
     });
 
     it("should call treeModel.expandNode on click", async () => {
+      vi.spyOn(treeModel, "expandNode");
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
@@ -89,6 +90,7 @@ describe("FinderItem", () => {
     });
 
     it("should not call treeModel.expandNode on mousedown", async () => {
+      vi.spyOn(treeModel, "expandNode");
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
@@ -120,6 +122,7 @@ describe("FinderItem", () => {
     });
 
     it("should call treeModel.selectNode on click on checkbox", async () => {
+      vi.spyOn(treeModel, "selectNode");
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
@@ -134,7 +137,8 @@ describe("FinderItem", () => {
     });
 
     it("should call treeModel.selectNode on click on checked checkbox", async () => {
-      treeModel.isNodeSelected.mockReturnValue(true);
+      treeModel.selectNode("test111", true);
+      vi.spyOn(treeModel, "selectNode");
       const wrapper = mount(FinderItem, {
         props: {
           treeModel,
@@ -196,6 +200,7 @@ describe("FinderItem", () => {
             dragEnabled: true,
           },
         });
+        vi.spyOn(treeModel, "startDrag");
 
         await wrapper.find(".item").trigger("dragstart", {
           dataTransfer,
@@ -221,6 +226,7 @@ describe("FinderItem", () => {
             dragEnabled: (node) => node.id === "test111",
           },
         });
+        vi.spyOn(treeModel, "startDrag");
 
         await wrapper.find(".item").trigger("dragstart", {
           dataTransfer,
@@ -242,6 +248,7 @@ describe("FinderItem", () => {
             dragEnabled: false,
           },
         });
+        vi.spyOn(treeModel, "startDrag");
 
         await wrapper.find(".item").trigger("dragstart");
         expect(treeModel.startDrag).not.toHaveBeenCalled();
@@ -255,6 +262,7 @@ describe("FinderItem", () => {
             dragEnabled: (node) => node.is === "test",
           },
         });
+        vi.spyOn(treeModel, "startDrag");
 
         await wrapper.find(".item").trigger("dragstart");
         expect(treeModel.startDrag).not.toHaveBeenCalled();
@@ -297,7 +305,8 @@ describe("FinderItem", () => {
 
     describe("dragenter", () => {
       beforeEach(() => {
-        treeModel.isDragging.mockReturnValue(true);
+        treeModel.startDrag("test12");
+        vi.spyOn(treeModel, "expandNode");
       });
 
       it("should call treeModel.expandNode", async () => {
@@ -369,7 +378,6 @@ describe("FinderItem", () => {
 
         expect(treeModel.expandNode).not.toHaveBeenCalled();
       });
-
       it("should not call treeModel.expandNode if node has changed in the interval", async () => {
         const wrapper = mount(FinderItem, {
           props: {
@@ -452,6 +460,10 @@ describe("FinderItem", () => {
     });
 
     describe("dragend", () => {
+      beforeEach(() => {
+        vi.spyOn(treeModel, "stopDrag");
+      });
+
       it("should call treeModel.stopDrag", async () => {
         const wrapper = mount(FinderItem, {
           props: {

src/components/__tests__/FinderList.test.js

@@ -1,10 +1,8 @@
-import { vi, describe, it, beforeEach, expect } from "vitest";
+import { describe, it, beforeEach, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import TreeModel from "@/utils/tree-model";
 import FinderList from "../FinderList.vue";
 
-vi.mock("@/utils/tree-model");
-
 describe("FinderList", () => {
   let treeModel;
   const tree = {

src/components/__tests__/FinderListDropZone.test.js

@@ -3,8 +3,6 @@ import { mount } from "@vue/test-utils";
 import TreeModel from "@/utils/tree-model";
 import FinderListDropZone from "../FinderListDropZone.vue";
 
-vi.mock("@/utils/tree-model");
-
 describe("FinderListDropZone", () => {
   let treeModel;
   let node;
@@ -46,7 +44,7 @@ describe("FinderListDropZone", () => {
   });
 
   it("should match if drag enter and is dragging", async () => {
-    treeModel.isDragging.mockReturnValue(true);
+    treeModel.startDrag("test12");
     const wrapper = mount(FinderListDropZone, {
       props: {
         treeModel,
@@ -60,7 +58,8 @@ describe("FinderListDropZone", () => {
   });
 
   it("should match if drag leave and is dragging", async () => {
-    treeModel.isDragging.mockReturnValue(true);
+    treeModel.startDrag("test12");
+
     const wrapper = mount(FinderListDropZone, {
       props: {
         treeModel,
@@ -75,7 +74,6 @@ describe("FinderListDropZone", () => {
   });
 
   it("should match if drag enter and not dragging", async () => {
-    treeModel.isDragging.mockReturnValue(false);
     const wrapper = mount(FinderListDropZone, {
       props: {
         treeModel,
@@ -88,7 +86,6 @@ describe("FinderListDropZone", () => {
   });
 
   it("should match if drag leave and not dragging", async () => {
-    treeModel.isDragging.mockReturnValue(false);
     const wrapper = mount(FinderListDropZone, {
       props: {
         treeModel,
@@ -102,8 +99,13 @@ describe("FinderListDropZone", () => {
   });
 
   describe("#onDrop", () => {
+    beforeEach(() => {
+      vi.spyOn(treeModel, "dropOnNode");
+    });
+
     it("should call `treeModel.dropOnNode`", async () => {
-      treeModel.isDragging.mockReturnValue(true);
+      treeModel.startDrag("test12");
+
       const wrapper = mount(FinderListDropZone, {
         props: {
           treeModel,
@@ -116,7 +118,8 @@ describe("FinderListDropZone", () => {
     });
 
     it("should call `treeModel.dropOnNode` with index", async () => {
-      treeModel.isDragging.mockReturnValue(true);
+      treeModel.startDrag("test12");
+
       const wrapper = mount(FinderListDropZone, {
         props: {
           treeModel,
@@ -130,7 +133,6 @@ describe("FinderListDropZone", () => {
     });
 
     it("should not call `treeModel.dropOnNode` if not dragging", async () => {
-      treeModel.isDragging.mockReturnValue(false);
       const wrapper = mount(FinderListDropZone, {
         props: {
           treeModel,

src/components/__tests__/__snapshots__/Finder.test.js.snap

@@ -6,7 +6,7 @@ exports[`Finder > API > #expand > should accept a 'sourceEvent' argument 1`] = `
     <div data-v-af535168="" data-v-08e2b0ac="" class="list">
       <!--v-if-->
       <div data-v-2a66825e="" role="button" draggable="false" tabindex="0" class="item expanded" aria-expanded="true">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 11">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 11">
         <div data-v-2a66825e="" class="inner-item" dragged="false" item="[object Object]" expanded="true">Test 11</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>
@@ -30,7 +30,7 @@ exports[`Finder > API > #expand > should accept a 'sourceEvent' argument 1`] = `
       <!--teleport end-->
       <!--v-if-->
       <div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false" tabindex="-1">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 14">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 14">
         <div data-v-2a66825e="" class="inner-item" expanded="false" dragged="false" item="[object Object]">Test 14</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>
@@ -70,7 +70,7 @@ exports[`Finder > API > #expand > should expand the given item and emit the 'exp
     <div data-v-af535168="" data-v-08e2b0ac="" class="list">
       <!--v-if-->
       <div data-v-2a66825e="" role="button" draggable="false" tabindex="0" class="item expanded" aria-expanded="true">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 11">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 11">
         <div data-v-2a66825e="" class="inner-item" dragged="false" item="[object Object]" expanded="true">Test 11</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>
@@ -94,7 +94,7 @@ exports[`Finder > API > #expand > should expand the given item and emit the 'exp
       <!--teleport end-->
       <!--v-if-->
       <div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false" tabindex="-1">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 14">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 14">
         <div data-v-2a66825e="" class="inner-item" expanded="false" dragged="false" item="[object Object]">Test 14</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>
@@ -191,7 +191,7 @@ exports[`Finder > Selection > should match snapshot 1`] = `
     <div data-v-af535168="" data-v-08e2b0ac="" class="list">
       <!--v-if-->
       <div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false" tabindex="0">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 11">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 11">
         <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false">Test 11</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>
@@ -215,7 +215,7 @@ exports[`Finder > Selection > should match snapshot 1`] = `
       <!--teleport end-->
       <!--v-if-->
       <div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false" tabindex="-1">
-        <!--v-if--><input data-v-2a66825e="" type="checkbox" aria-label="Test 14">
+        <!--v-if--><input data-v-2a66825e="" type="checkbox" checked="" aria-label="Test 14">
         <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false">Test 14</div>
         <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
       </div>

src/components/__tests__/__snapshots__/FinderItem.test.js.snap

@@ -1,64 +1,64 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FinderItem > Drag & drop > should match snapshot if dragEnabled is \`true\` 1`] = `
-<div data-v-2a66825e="" class="item expanded draggable" role="button" draggable="true" aria-expanded="true">
+<div data-v-2a66825e="" class="item draggable" role="button" draggable="true" aria-expanded="false">
   <!--v-if-->
   <!--v-if-->
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="true"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->
 <!--teleport end-->
 `;
 
 exports[`FinderItem > Drag & drop > should match snapshot if dragEnabled is a function returning \`false\` 1`] = `
-<div data-v-2a66825e="" class="item expanded draggable" role="button" draggable="true" aria-expanded="true">
+<div data-v-2a66825e="" class="item draggable" role="button" draggable="true" aria-expanded="false">
   <!--v-if-->
   <!--v-if-->
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="true"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->
 <!--teleport end-->
 `;
 
 exports[`FinderItem > Drag & drop > should match snapshot if dragEnabled is a function returning \`true\` 1`] = `
-<div data-v-2a66825e="" class="item expanded" role="button" draggable="false" aria-expanded="true">
+<div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false">
   <!--v-if-->
   <!--v-if-->
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="true"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->
 <!--teleport end-->
 `;
 
 exports[`FinderItem > Expand > should match snapshot if expanded 1`] = `
-<div data-v-2a66825e="" class="item expanded" role="button" draggable="false" aria-expanded="true">
+<div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false">
   <!--v-if-->
   <!--v-if-->
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="true"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->
 <!--teleport end-->
 `;
 
 exports[`FinderItem > Selection > should match snapshot if selectable 1`] = `
-<div data-v-2a66825e="" class="item expanded" role="button" draggable="false" aria-expanded="true">
+<div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false">
   <!--v-if--><input data-v-2a66825e="" type="checkbox">
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="true"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->
 <!--teleport end-->
 `;
 
 exports[`FinderItem > should match snapshot 1`] = `
-<div data-v-2a66825e="" class="item" role="button" draggable="false">
+<div data-v-2a66825e="" class="item" role="button" draggable="false" aria-expanded="false">
   <!--v-if-->
   <!--v-if-->
-  <div data-v-2a66825e="" class="inner-item" item="[object Object]"></div>
+  <div data-v-2a66825e="" class="inner-item" item="[object Object]" expanded="false" dragged="false"></div>
   <div data-v-25a3a149="" data-v-2a66825e="" class="arrow"></div>
 </div>
 <!--teleport start-->