fix: unit tests

src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts

@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -84,11 +84,15 @@ describe('EssentialNodesPanel', () => {
     root = createMockRoot(),
     expandedKeys: string[] = []
   ) {
-    return mount(EssentialNodesPanel, {
-      props: {
-        root,
-        expandedKeys
-      },
+    const WrapperComponent = {
+      template: `<EssentialNodesPanel :root="root" v-model:expandedKeys="keys" />`,
+      components: { EssentialNodesPanel },
+      setup() {
+        const keys = ref(expandedKeys)
+        return { root, keys }
+      }
+    }
+    return mount(WrapperComponent, {
       global: {
         stubs: {
           Teleport: true,
@@ -132,6 +136,8 @@ describe('EssentialNodesPanel', () => {
     it('should expand first two folders by default when expandedKeys is empty', async () => {
       const wrapper = mountComponent(createMockRoot(), [])
       await nextTick()
+      await flushPromises()
+      await nextTick()
 
       const roots = wrapper.findAll('.collapsible-root')
       expect(roots[0].attributes('data-state')).toBe('open')
@@ -182,6 +188,8 @@ describe('EssentialNodesPanel', () => {
 
       const wrapper = mountComponent(root, [])
       await nextTick()
+      await flushPromises()
+      await nextTick()
 
       const roots = wrapper.findAll('.collapsible-root')
       expect(roots).toHaveLength(1)

src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue

@@ -24,7 +24,9 @@
         <CollapsibleContent
           class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
         >
-          <div class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3">
+          <div
+            class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3"
+          >
             <EssentialNodeCard
               v-for="node in folder.children"
               :key="node.key"
@@ -92,10 +94,16 @@ function toggleFolder(key: string, open: boolean) {
 
 const hasAutoExpanded = ref(false)
 
-watch(folders, (value) => {
-  if (!hasAutoExpanded.value && value.length > 0) {
-    hasAutoExpanded.value = true
-    expandedKeys.value = value.map((folder) => folder.key)
-  }
-})
+watch(
+  folders,
+  (value) => {
+    if (!hasAutoExpanded.value && value.length > 0) {
+      hasAutoExpanded.value = true
+      if (expandedKeys.value.length === 0) {
+        expandedKeys.value = value.slice(0, 2).map((folder) => folder.key)
+      }
+    }
+  },
+  { immediate: true }
+)
 </script>