fix(module:tree): fix search case sensitivity (#4766)

Fixes #1996, Fixes #4765
NG-ZORRO · Mar 31, 2020 · 828b13e · 828b13e
1 parent d8a2594
commit 828b13e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 2 deletions.
diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -118,7 +118,7 @@ import { takeUntil } from 'rxjs/operators';
               <i nz-icon *ngIf="nzIcon" [nzType]="nzIcon"></i>
             </span>
           </span>
-          <span class="ant-tree-title" [innerHTML]="nzTreeNode.title | nzHighlight: matchedValue:'':'font-highlight'"> </span>
+          <span class="ant-tree-title" [innerHTML]="nzTreeNode.title | nzHighlight: matchedValue:'i':'font-highlight'"> </span>
         </ng-container>
       </span>
     </div>

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -316,7 +316,7 @@ export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, Co
       if (searchFunc) {
         return searchFunc(node.origin);
       }
-      return !value || !node.title.includes(value) ? false : true;
+      return !value || !node.title.toLowerCase().includes(value.toLowerCase()) ? false : true;
     };
     dataList.forEach(v => {
       v.isMatched = checkIfMatched(v);

diff --git a/components/tree/nz-tree.spec.ts b/components/tree/nz-tree.spec.ts
@@ -488,6 +488,63 @@ describe('NzTestTreeDraggableComponent', () => {
   });
 });
 
+describe('NzTestTreeBasicSearchComponent', () => {
+  let testBed: ComponentBed<NzTestTreeBasicSearchComponent>;
+
+  const getVisibleNodes = (title?: string) => {
+    const isNodeVisible = (el: Element) => el.getClientRects().length !== 0;
+    const selector = title ? `[title='${title}']` : '[title]';
+    const nodes = testBed.nativeElement.querySelectorAll(selector);
+    return Array.from(nodes).filter(isNodeVisible);
+  };
+
+  beforeEach(() => {
+    testBed = prepareTest(NzTestTreeBasicSearchComponent);
+  });
+
+  describe('search case-insensitive', () => {
+    it('should list matches independent on casing', fakeAsync(() => {
+      const { component, fixture } = testBed;
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(3);
+
+      component.searchValue = 'foo';
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(2);
+      expect(getVisibleNodes('Foo').length).toEqual(1);
+      expect(getVisibleNodes('foo').length).toEqual(1);
+
+      component.searchValue = 'Foo';
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(2);
+      expect(getVisibleNodes('Foo').length).toEqual(1);
+      expect(getVisibleNodes('foo').length).toEqual(1);
+
+      component.searchValue = 'baz';
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(2);
+      expect(getVisibleNodes('Foo').length).toEqual(1);
+      expect(getVisibleNodes('Baz Bar').length).toEqual(1);
+    }));
+  });
+
+  describe('highlight case-insensitive', () => {
+    it('should highlight matched node', fakeAsync(() => {
+      const { component, fixture } = testBed;
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(3);
+
+      component.searchValue = 'baz';
+      fixture.detectChanges();
+      expect(getVisibleNodes().length).toEqual(2);
+      expect(getVisibleNodes('Foo').length).toEqual(1);
+      expect(getVisibleNodes('Baz Bar').length).toEqual(1);
+      const highlightedNode = getVisibleNodes('Baz Bar')[0].querySelector('.font-highlight');
+      expect(highlightedNode?.textContent).toEqual('Baz');
+    }));
+  });
+});
+
 /**
  * Basic controlled tree
  */
@@ -650,3 +707,38 @@ export class NzTestTreeDraggableComponent {
 
   onDragEnd(): void {}
 }
+
+/**
+ * Basic searchable tree
+ */
+@Component({
+  template: `
+    <nz-tree
+      [nzData]="nodes"
+      [nzSearchValue]="searchValue"
+      [nzExpandAll]="expandAll"
+      [nzAsyncData]="asyncData"
+      [nzHideUnMatched]="hideUnMatched"
+    >
+    </nz-tree>
+  `
+})
+export class NzTestTreeBasicSearchComponent {
+  @ViewChild(NzTreeComponent, { static: true }) treeComponent: NzTreeComponent;
+  searchValue: string;
+  expandAll = true;
+  asyncData = false;
+  hideUnMatched = true;
+  nodes: NzTreeNodeOptions[] | NzTreeNode[] = [
+    {
+      title: 'Foo',
+      key: '0-1',
+      children: [{ title: 'Baz Bar', key: '0-1-0', isLeaf: true }]
+    },
+    {
+      title: 'foo',
+      key: '0-2',
+      isLeaf: true
+    }
+  ];
+}