fix(comp:tree): fix tree unit tests (#1106)

IDuxFE · Sep 1, 2022 · 8507a51 · 8507a51
1 parent 79d23ea
commit 8507a51
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -918,38 +918,48 @@ exports[`Tree > searchValue work 2`] = `
 `;
 
 exports[`Tree > searchValue work 3`] = `
-"<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
-  <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"ix-empty\\">
-    <div class=\\"ix-empty-image\\"><i class=\\"ix-icon ix-icon-empty\\" role=\\"img\\" aria-label=\\"empty\\"></i></div>
-    <div class=\\"ix-empty-description\\">暂无数据</div>
-    <!---->
-  </div>
-</div>"
-`;
-
-exports[`Tree > searchValue work 4`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
   <div class=\\"cdk-virtual-scroll\\">
     <div class=\\"cdk-virtual-scroll-holder\\">
       <div class=\\"cdk-virtual-scroll-filler\\">
         <div class=\\"cdk-virtual-scroll-content\\">
-          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-            <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+          <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
+            <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
               <!---->
               <!---->
             </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
             <!----></span>
           </div>
+          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0</span>
+            <!----></span>
+          </div>
+          <div class=\\"ix-tree-node ix-tree-node-active ix-tree-node-selected\\" aria-label=\\"Node 0-1\\" aria-selected=\\"true\\" title=\\"Node 0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1</span>
+            <!----></span>
+          </div>
+          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-2\\" aria-selected=\\"false\\" title=\\"Node 0-2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
+            <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-2</span>
+            <!----></span>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </div>"
 `;
 
-exports[`Tree > searchValue work 5`] = `
+exports[`Tree > searchValue work 4`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
   <div class=\\"cdk-virtual-scroll\\">
@@ -990,3 +1000,24 @@ exports[`Tree > searchValue work 5`] = `
   </div>
 </div>"
 `;
+
+exports[`Tree > searchValue work 5`] = `
+"<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
+  <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
+  <div class=\\"cdk-virtual-scroll\\">
+    <div class=\\"cdk-virtual-scroll-holder\\">
+      <div class=\\"cdk-virtual-scroll-filler\\">
+        <div class=\\"cdk-virtual-scroll-content\\">
+          <div class=\\"ix-tree-node\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
+            <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+              <!---->
+              <!---->
+            </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
+            <!----></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts
@@ -916,20 +916,20 @@ describe('Tree', () => {
     await wrapper.setProps({ searchValue: '0-0-0-0' })
 
     allNodes = wrapper.findAll('.ix-tree-node')
-    expect(allNodes.length).toBe(0)
+    expect(allNodes.length).toBe(4)
     expect(wrapper.html()).toMatchSnapshot()
 
     // setValue = ''
     await wrapper.setProps({ searchValue: '' })
 
     allNodes = wrapper.findAll('.ix-tree-node')
-    expect(allNodes.length).toBe(1)
+    expect(allNodes.length).toBe(4)
     expect(wrapper.html()).toMatchSnapshot()
 
     await allNodes[0].find('.ix-tree-node-expand').trigger('click')
 
     allNodes = wrapper.findAll('.ix-tree-node')
-    expect(allNodes.length).toBe(4)
+    expect(allNodes.length).toBe(1)
     expect(wrapper.html()).toMatchSnapshot()
   })