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

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('should hide the panel when the options list is empty', fakeAsync(() => {
      dispatchFakeEvent(input, 'focusin');
      fixture.detectChanges();
      tick(150);
      const panel = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement;

      typeInElement('B', input);
      fixture.detectChanges();
      tick(150);
      fixture.detectChanges();

      expect(panel.classList).not.toContain('ant-select-dropdown-hidden');

      typeInElement('x', input);
      fixture.detectChanges();
      tick(150);
      fixture.detectChanges();

      expect(panel.classList).toContain('ant-select-dropdown-hidden');
    }));
  });

it('should custom input time range', fakeAsync(() => {
      const nzOnChange = spyOn(fixtureInstance, 'modelValueChange');
      fixtureInstance.modelValue = [new Date('2019-11-11 11:22:33'), new Date('2019-12-12 11:22:33')];
      fixtureInstance.nzShowTime = true;
      fixture.detectChanges();
      openPickerByClickTrigger();

      const leftInput = getPickerPanelLeftInput();
      const rightInput = getPickerPanelRightInput();
      const newDateString = ['2019-09-15 11:08:22', '2020-10-10 11:08:22'];
      typeInElement(newDateString[0], leftInput);
      fixture.detectChanges();
      typeInElement(newDateString[1], rightInput);
      rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
      fixture.detectChanges();
      tick(500);
      expect(nzOnChange).toHaveBeenCalledWith([new Date(newDateString[0]), new Date(newDateString[1])]);
    }));

it('should update input width', fakeAsync(() => {
      treeSelect.nativeElement.click();
      fixture.detectChanges();
      testComponent.showSearch = true;
      fixture.detectChanges();
      flush();
      const input = treeSelect.nativeElement.querySelector('input') as HTMLInputElement;
      typeInElement('test', input);
      fixture.detectChanges();
      flush();
      typeInElement('test test test', input);
      fixture.detectChanges();
      flush();
      treeSelectComponent.inputValue = '';
      fixture.detectChanges();
      flush();
      typeInElement('', input);
      fixture.detectChanges();
      flush();
      zone.simulateZoneExit();
      fixture.detectChanges();
      expect(input.style.width === '').toBe(true);
    }));

it('should custom input date range', fakeAsync(() => {
      const nzOnChange = spyOn(fixtureInstance, 'modelValueChange');
      fixture.detectChanges();
      openPickerByClickTrigger();
      const leftInput = getPickerPanelLeftInput();
      const rightInput = getPickerPanelRightInput();

      typeInElement('2018-11-11', leftInput);
      fixture.detectChanges();
      typeInElement('2018-12-12', rightInput);
      rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();
      expect(nzOnChange).toHaveBeenCalled();
      const result = (nzOnChange.calls.allArgs()[0] as Date[][])[0];
      expect(result[0].getDate()).toBe(11);
      expect(result[1].getDate()).toBe(12);
    }));

it('should open the dropdown when the type in @ prefix', () => {
      fixture.componentInstance.setArrayPrefix();
      dispatchFakeEvent(textarea, 'click');
      fixture.detectChanges();
      typeInElement('@', textarea);
      fixture.detectChanges();

      const mention = fixture.componentInstance.mention;

      expect(mention.isOpen).toBe(true);
    });

it('should edit work', () => {
      const editButton = componentElement.querySelector('.ant-typography-edit');
      editButton!.click();
      fixture.detectChanges();
      expect(testComponent.str).toBe('This is an editable text.');
      const textarea = componentElement.querySelector('textarea')!;
      typeInElement('test', textarea);
      fixture.detectChanges();
      dispatchFakeEvent(textarea, 'blur');
      fixture.detectChanges();
      expect(testComponent.str).toBe('test');
    });

it('should correct parsing the trigger content', () => {
      fixture.componentInstance.setArrayPrefix();
      typeInElement('ABC @Angular 123 @ant-design @你好 foo ant@gmail.com @@ng 123 .@.@ /@hello \\@hello #ng', textarea);
      fixture.detectChanges();
      expect(fixture.componentInstance.mention.getMentions().join(',')).toBe('@Angular,@ant-design,@你好,@@ng,#ng');
    });
  });