How to use the ng-zorro-antd/core.dispatchMouseEvent function in ng-zorro-antd

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

// drop 0-1 to 0-0
      dispatchMouseEvent(dropNode, 'drop');
      fixture.detectChanges();
      dropNode = treeElement.querySelector("[title='0-0']") as HTMLElement;
      expect(dropSpy).toHaveBeenCalledTimes(1);
      expect(dropNode.parentElement!.querySelector("[title='0-1']")).toBeDefined();

      // dragend
      dispatchMouseEvent(dropNode, 'dragend');
      fixture.detectChanges();
      expect(dragEndSpy).toHaveBeenCalledTimes(1);

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

tick(500);
      fixture.detectChanges();
      expect(queryFromOverlay('.ant-calendar-decade-panel')).toBeDefined();
      // Goto previous decade
      dispatchMouseEvent(queryFromOverlay('.ant-calendar-decade-panel-prev-century-btn'), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(queryFromOverlay('.ant-calendar-decade-panel-century').textContent).toContain('1900');
      expect(queryFromOverlay('.ant-calendar-decade-panel-century').textContent).toContain('1999');
      // Goto next decade * 2
      dispatchMouseEvent(queryFromOverlay('.ant-calendar-decade-panel-next-century-btn'), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      dispatchMouseEvent(queryFromOverlay('.ant-calendar-decade-panel-next-century-btn'), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(queryFromOverlay('.ant-calendar-decade-panel-century').textContent).toContain('2100');
      expect(queryFromOverlay('.ant-calendar-decade-panel-century').textContent).toContain('2199');
    }));
  }); // /panel switch and move forward/afterward

fixture.detectChanges();
      dropNode = treeElement.querySelector("[title='0-2']") as HTMLElement;
      expect(dropSpy).toHaveBeenCalledTimes(0);
      expect(dropNode.parentElement!.querySelector("[title='0-1']")).toBeNull();
      // dragend
      dispatchMouseEvent(dropNode, 'dragend');
      fixture.detectChanges();
      expect(dragEndSpy).toHaveBeenCalledTimes(1);
      // drop to itself
      dispatchMouseEvent(dragNode, 'dragstart');
      dispatchMouseEvent(dragNode, 'dragover');
      dispatchMouseEvent(dragNode, 'drop');
      fixture.detectChanges();
      expect(dropSpy).toHaveBeenCalledTimes(0);
      // dragend
      dispatchMouseEvent(dropNode, 'dragend');
      fixture.detectChanges();
      expect(dragEndSpy).toHaveBeenCalledTimes(2);
    }));

it('should support nzPopupStyle', fakeAsync(() => {
      fixtureInstance.nzPopupStyle = { color: 'red' };
      fixture.detectChanges();
      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(getPickerContainer().style.color).toBe('red');
    }));

it('should preview work', fakeAsync(() => {
      const rect = resizableEle.getBoundingClientRect();
      const handle = resizableEle.querySelector('.nz-resizable-handle-bottomRight') as HTMLElement;
      dispatchMouseEvent(handle, 'mousedown', rect.right, rect.bottom);
      dispatchMouseEvent(window.document, 'mousemove', rect.right + 20, rect.bottom + 20);
      fixture.detectChanges();
      const preview = resizableEle.querySelector('.nz-resizable-preview') as HTMLElement;
      expect(preview).toBeTruthy();
      dispatchMouseEvent(window.document, 'mouseup');
      fixture.detectChanges();
      tick(16);
      fixture.detectChanges();
    }));
  });

it('should not reset time', fakeAsync(() => {
      fixtureInstance.nzValue = new Date('2019-08-02 13:03:33');
      fixtureInstance.nzShowTime = true;
      fixture.detectChanges();
      openPickerByClickTrigger();

      dispatchMouseEvent(getFirstCell(), 'click');

      fixture.detectChanges();
      flush();
      fixture.detectChanges();
      expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('2019-07-29 13:03:33');
    }));

it('should support nzOnOpenChange', fakeAsync(() => {
      const nzOnOpenChange = spyOn(fixtureInstance, 'nzOnOpenChange');
      fixture.detectChanges();
      dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(nzOnOpenChange).toHaveBeenCalledWith(true);

      dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click');
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(nzOnOpenChange).toHaveBeenCalledWith(false);
      expect(nzOnOpenChange).toHaveBeenCalledTimes(2);
    }));

function mouseMoveTrigger(el: HTMLElement, from: { x: number; y: number }, to: { x: number; y: number }): void {
  dispatchMouseEvent(el, 'mousedown', from.x, from.y);
  dispatchMouseEvent(window.document, 'mousemove', to.x, to.y);
  dispatchMouseEvent(window.document, 'mouseup');
}