How to use the @dynatrace/barista-components/testing.typeInElement function in @dynatrace/barista-components

zone.simulateZoneExit();

      // Filter down the option list to a subset of original options ('Alabama', 'California')
      typeInElement('al', input);
      fixture.detectChanges();
      tick();

      let options = overlayContainerElement.querySelectorAll(
        'dt-option',
      );
      options[0].click();

      // Changing value from 'Alabama' to 'al' to re-populate the option list,
      // ensuring that 'California' is created new.
      dispatchFakeEvent(input, 'focusin');
      typeInElement('al', input);
      fixture.detectChanges();
      tick();

      options = overlayContainerElement.querySelectorAll(
        'dt-option',
      );
      options[1].click();
      fixture.detectChanges();

      // Expected clicking a new option to set the panel state to closed.
      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
      // Expected clicking a new option to close the panel.
      expect(overlayContainerElement.textContent).toEqual('');
    }));

it('should toggle the visibility when typing and closing the panel', fakeAsync(() => {
      fixture.componentInstance.trigger.openPanel();
      tick();
      fixture.detectChanges();

      // Expected panel to be visible.
      expect(
        overlayContainerElement.querySelector('.dt-autocomplete-panel')!
          .classList,
      ).toContain('dt-autocomplete-visible');

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

      // Expected panel to be hidden.
      expect(
        overlayContainerElement.querySelector('.dt-autocomplete-panel')!
          .classList,
      ).toContain('dt-autocomplete-hidden');

      fixture.componentInstance.trigger.closePanel();
      fixture.detectChanges();

      fixture.componentInstance.trigger.openPanel();
      fixture.detectChanges();

it('should reset the input value when editing the freetext, typing something (but not commiting the filter) and then cancelling', () => {
      const tags = fixture.debugElement.queryAll(
        By.css('.dt-filter-field-tag-label'),
      );
      tags[1].nativeElement.click();
      fixture.detectChanges();
      zone.simulateZoneExit();
      zone.simulateMicrotasksEmpty();

      const inputfield = getInput(fixture);
      typeInElement('something else', inputfield);
      fixture.detectChanges();

      dispatchFakeEvent(document, 'click');
      fixture.detectChanges();
      zone.simulateMicrotasksEmpty();
      zone.simulateZoneExit();

      // Read the filters again and make expectations
      const filterTags = getFilterTags(fixture);

      expect(filterTags[0].key).toBe('AUT');
      expect(filterTags[0].separator).toBe(':');
      expect(filterTags[0].value).toBe('Linz');

      expect(filterTags[1].key).toBe('Free');
      expect(filterTags[1].separator).toBe('~');

it('should handle autocomplete being attached to number inputs', fakeAsync(() => {
      const fixture = createComponent(AutocompleteWithNumberInputAndNgModel);
      fixture.detectChanges();
      const input = fixture.debugElement.query(By.css('input')).nativeElement;

      typeInElement('1337', input);
      fixture.detectChanges();

      expect(fixture.componentInstance.selectedValue).toBe(1337);
    }));

it('should close the range after the range-filter is submitted', () => {
        const inputFieldsElements = getRangeInputFields(
          overlayContainerElement,
        );

        typeInElement('15', inputFieldsElements[0]);
        typeInElement('25', inputFieldsElements[1]);
        fixture.detectChanges();

        const rangeApplyButton = getRangeApplyButton(
          overlayContainerElement,
        )[0];
        rangeApplyButton.click();

        const rangeOverlay = getFilterFieldRange(overlayContainerElement);
        expect(rangeOverlay.length).toBe(0);
      });

const spy = jest.fn();
      const subscription = filterField.filterChanges.subscribe(spy);
      filterField.focus();
      zone.simulateMicrotasksEmpty();
      zone.simulateZoneExit();
      fixture.detectChanges();

      const options = getOptions(overlayContainerElement);

      const freeTextOption = options[2];
      freeTextOption.click();
      zone.simulateMicrotasksEmpty();
      fixture.detectChanges();

      const inputEl = getInput(fixture);
      typeInElement('abc', inputEl);
      tick(DT_FILTER_FIELD_TYPING_DEBOUNCE);

      fixture.detectChanges();
      dispatchKeyboardEvent(inputEl, 'keyup', ENTER);
      fixture.detectChanges();

      const tags = getFilterTags(fixture);
      expect(tags.length).toBe(1);
      expect(tags[0].key).toBe('Free');
      expect(tags[0].separator).toBe('~');
      expect(tags[0].value).toBe('abc');
      expect(spy).toHaveBeenCalledTimes(1);
      subscription.unsubscribe();
    }));

it('should emit the inputChange event when typing into the input field with autocomplete', fakeAsync(() => {
      const spy = jest.fn();
      const subscription = filterField.inputChange.subscribe(spy);
      const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;

      typeInElement('x', inputEl);
      tick(DT_FILTER_FIELD_TYPING_DEBOUNCE);
      fixture.detectChanges();

      expect(spy).toHaveBeenCalledWith('x');

      typeInElement('xy', inputEl);
      tick(DT_FILTER_FIELD_TYPING_DEBOUNCE);
      fixture.detectChanges();

      expect(spy).toHaveBeenCalledWith('xy');
      subscription.unsubscribe();
    }));

it('should emit the inputChange event when typing into the input field with autocomplete', fakeAsync(() => {
      const spy = jest.fn();
      const subscription = filterField.inputChange.subscribe(spy);
      const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;

      typeInElement('x', inputEl);
      tick(DT_FILTER_FIELD_TYPING_DEBOUNCE);
      fixture.detectChanges();

      expect(spy).toHaveBeenCalledWith('x');

      typeInElement('xy', inputEl);
      tick(DT_FILTER_FIELD_TYPING_DEBOUNCE);
      fixture.detectChanges();

      expect(spy).toHaveBeenCalledWith('xy');
      subscription.unsubscribe();
    }));

it('should reapply previously set greater-equal operator and value when editing a range filter', () => {
        const operatorButtonElements = getOperatorButtonGroupItems(
          overlayContainerElement,
        );
        operatorButtonElements[2].click();
        fixture.detectChanges();

        const inputFieldsElements = getRangeInputFields(
          overlayContainerElement,
        );
        typeInElement('27', inputFieldsElements[0]);
        fixture.detectChanges();

        const rangeApplyButton = getRangeApplyButton(
          overlayContainerElement,
        )[0];
        rangeApplyButton.click();
        fixture.detectChanges();

        const tagLabel = fixture.debugElement.queryAll(
          By.css('.dt-filter-field-tag-label'),
        )[0];
        tagLabel.nativeElement.click();

        zone.simulateMicrotasksEmpty();
        fixture.detectChanges();

expect(() => {
        const fixture = createComponent(AutocompleteWithoutForms);
        fixture.detectChanges();

        const input = fixture.debugElement.query(By.css('input')).nativeElement;
        typeInElement('d', input);
        fixture.detectChanges();

        const options = overlayContainerElement.querySelectorAll(
          'dt-option',
        );
        expect(options.length).toBe(1);
      }).not.toThrowError();
    });