How to use ng-zorro-antd - 10 common examples

it('test click event', fakeAsync(() => {
      fixture.detectChanges();
      // To avoid *ngIf to hide nodes
      treeInstance.expandAll = true;
      fixture.detectChanges();
      const clickSpy = spyOn(treeInstance, 'nzEvent');
      // click 0-0-0 to select
      let targetNode = treeElement.querySelectorAll('nz-tree-node')[1];
      dispatchMouseEvent(targetNode, 'click');
      fixture.detectChanges();
      // 0-0-0 / 0-0-0-0 are selected
      expect(treeElement.querySelectorAll('.ant-tree-node-selected').length).toEqual(2);
      expect(treeInstance.treeComponent.getSelectedNodeList().length).toEqual(2);
      expect(clickSpy).toHaveBeenCalledTimes(1);
      // cancel 0-0-0 selected
      dispatchMouseEvent(targetNode, 'click');
      fixture.detectChanges();
      expect(treeInstance.treeComponent.getSelectedNodeList().length).toEqual(1);
      expect(clickSpy).toHaveBeenCalledTimes(2);

      // double click 0-0-0, only response once
      targetNode = treeElement.querySelectorAll('nz-tree-node')[1];
      dispatchMouseEvent(targetNode, 'dblclick');
      fixture.detectChanges();
      // 0-0-0-0 are selected

it('should support nzOnChange', fakeAsync(() => {
      fixtureInstance.nzValue = new Date('2018-11');
      const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
      fixture.detectChanges();
      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();

      const cell = getSecondYearCell(); // Use the second cell
      const cellText = cell.textContent!.trim();
      dispatchMouseEvent(cell, 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(nzOnChange).toHaveBeenCalled();
      const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
      expect(result.getFullYear()).toBe(parseInt(cellText, 10));
    }));
  }); // /general api testing

ngOnInit(): void {
    if (!this.value) {
      this.value = new CandyDate(); // Show today by default
    }
    this.render();
  }

it('should support keydown events to open and close select panel', fakeAsync(() => {
      fixture.detectChanges();
      dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', SPACE);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(testComponent.open).toBe(true);
      // #2201, space should not close select panel
      dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(testComponent.open).toBe(false);
      dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', DOWN_ARROW);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(testComponent.open).toBe(true);
      dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(testComponent.open).toBe(false);
      testComponent.disabled = true;
      fixture.detectChanges();
      dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', TAB);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(testComponent.open).toBe(false);

it('should select option when press ENTER', fakeAsync(() => {
      fixture.detectChanges();
      expect(testComponent.values).toBeNull();
      testComponent.cascader.setMenuVisible(true);
      fixture.detectChanges();
      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', DOWN_ARROW); // active 1
      fixture.detectChanges();
      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);
      fixture.detectChanges();
      expect(testComponent.values).toBeNull(); // not select yet

      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', RIGHT_ARROW); // active 2
      fixture.detectChanges();
      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);
      fixture.detectChanges();
      expect(testComponent.values).toBeNull(); // not select yet

      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', RIGHT_ARROW); // active 3
      fixture.detectChanges();
      expect(testComponent.values).toBeNull(); // not select yet

      dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ENTER);

it('should auto sort range value when start is after end', fakeAsync(() => {
      fixture.detectChanges();
      openPickerByClickTrigger();
      const leftInput = getPickerPanelLeftInput();
      const rightInput = getPickerPanelRightInput();
      typeInElement('2019-08-10', leftInput);
      fixture.detectChanges();
      typeInElement('2018-02-06', rightInput);
      fixture.detectChanges();
      expect(leftInput.value).toBe('2018-02-06');
      expect(rightInput.value).toBe('2019-08-10');
    }));
  }); // /specified date picker testing

it('should not change value when click ESC', fakeAsync(() => {
      fixtureInstance.modelValue = [new Date('2018-09-11'), new Date('2020-09-12')];
      fixture.detectChanges();
      tick(); // Wait writeValue() tobe done
      fixture.detectChanges();
      openPickerByClickTrigger();
      const leftInput = getPickerPanelLeftInput();
      const rightInput = getPickerPanelRightInput();

      typeInElement('2019-11-05', leftInput);
      fixture.detectChanges();
      // value should be change
      expect(getFirstSelectedDayCell().textContent!.trim()).toBe('5');
      typeInElement('2019-12-08', rightInput);
      fixture.detectChanges();
      tick(500);
      expect(getSecondSelectedDayCell().textContent!.trim()).toBe('8');
      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
      fixture.detectChanges();
      tick(500);
      expect(getRangePickerLeftInput()!.value).toBe('2018-09-11');
    }));

it('should custom input date', fakeAsync(() => {
      const nzOnChange = spyOn(fixtureInstance, 'nzOnChange');
      fixture.detectChanges();
      openPickerByClickTrigger();
      const input = queryFromOverlay('.ant-calendar-date-input-wrap input.ant-calendar-input') as HTMLInputElement;

      // Wrong inputing support
      typeInElement('wrong', input);
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(input.classList.contains('ant-calendar-input-invalid')).toBeTruthy();

      // Correct inputing
      input.value = '2018-11-22';
      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
      // dispatchKeyboardEvent(input, 'keyup', ENTER); // Not working?
      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect(nzOnChange).toHaveBeenCalled();
      const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
      expect(result.getDate()).toBe(22);
    }));

it('test drag drop with dragPos', () => {
      // init selected node
      let treeNodes = treeInstance.treeComponent.getTreeNodes();
      treeService = treeNodes[1].treeService;

      const dragNode = treeElement.querySelectorAll('li')[1]; // 0-0-0
      treeService!.setSelectedNode(treeInstance.treeComponent.getTreeNodeByKey('000')!); // set 0-0-0
      dispatchTouchEvent(dragNode, 'dragstart');
      fixture.detectChanges();
      // drop 0-0-0 to 0-0 pre
      let targetNode = treeNodes[0]; // 0-0

      treeService!.dropAndApply(targetNode, -1);
      // get treeNodes again
      treeNodes = treeInstance.treeComponent.getTreeNodes();
      // now ['0-0-0', '0-0', '0-1', '0-2']
      expect(treeNodes[0].title).toEqual('0-0-0');
      expect(treeNodes[0].level).toEqual(0);

      fixture.detectChanges();
      // drop 0-0-0 to 0-0-1 next
      treeService!.selectedNode = treeNodes[0];
      targetNode = treeNodes[1].getChildren()[0]; // 0-0-1
      treeService!.dropAndApply(targetNode, 1);

it('test drag event nzBeforeDrop', () => {
      const dragNode = treeElement.querySelector("[title='0-2']") as HTMLElement;
      let dropNode = treeElement.querySelector("[title='0-1']") as HTMLElement;
      treeInstance.beforeDrop = (): Observable => {
        return of(true);
      };
      fixture.detectChanges();

      dispatchTouchEvent(dragNode, 'dragstart');
      dispatchTouchEvent(dropNode, 'dragover');
      // drop 0-2 to 0-1
      dispatchTouchEvent(dropNode, 'drop');
      fixture.detectChanges();
      dropNode = treeElement.querySelector("[title='0-1']") as HTMLElement;
      expect(dropNode.parentElement!.querySelector("[title='0-2']")).toBeDefined();
    });
  });