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

it('should call bound function when selecting an eventBubble', () => {
      jest.spyOn(fixture.componentInstance, 'logSelected');
      const firstBubble = fixture.debugElement.query(
        By.css('.dt-event-chart-event'),
      );
      dispatchFakeEvent(firstBubble.nativeElement, 'click');

      expect(fixture.componentInstance.logSelected).toHaveBeenCalledWith(
        expect.any(DtEventChartSelectedEvent),
      );
      // Check if the now selected element fits the elements
      expect(fixture.componentInstance.selected.sources).toHaveLength(1);
      expect(fixture.componentInstance.selected.sources[0]).toMatchObject({
        _duration: 0,
        _value: 0,
        lane: 'xhr',
        data: '1',
      });
    });

it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
      dispatchFakeEvent(input, 'focus');
      fixture.detectChanges();
      flush();
      dispatchFakeEvent(document, 'touchend');

      // Expected tapping outside the panel to set its state to closed.
      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
      // Expected tapping outside the panel to close the panel.
      expect(overlayContainerElement.textContent).toEqual('');
    }));

it('should display an error message when the parent form is submitted', fakeAsync(() => {
      // Expected form not to have been submitted
      expect(testComponent.form.submitted).toBe(false);
      // Expected form control to be invalid
      expect(testComponent.formControl.invalid).toBe(true);
      // Expected no error message
      expect(containerEl.querySelectorAll('dt-error').length).toBe(0);

      dispatchFakeEvent(
        fixture.debugElement.query(By.css('form')).nativeElement,
        'submit',
      );
      fixture.detectChanges();
      flush();

      // Expected form to have been submitted
      expect(testComponent.form.submitted).toBe(true);
      // Expected container to have the invalid CSS class.
      expect(containerEl.classList).toContain('dt-form-field-invalid');
      // Expected one error message to have been rendered.
      expect(containerEl.querySelectorAll('dt-error').length).toBe(1);
      // Expected aria-invalid to be set to "true".
      expect(inputEl.getAttribute('aria-invalid')).toBe('true');
    }));

it('should navigate with the click on the numbers', () => {
      const fixture = createComponent(PaginationTestComponent);
      const instance = fixture.componentInstance;
      instance.length = 120;
      instance.pageSize = 10;
      fixture.detectChanges();

      expect(instance.pagination.currentPage).toBe(1);
      const page1 = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-item button',
      );
      dispatchFakeEvent(page1, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(2);

      // 4th element is the page 3
      const page2 = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-item:nth-child(4) button',
      );
      dispatchFakeEvent(page2, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(3);
    });

const prevButton = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-previous button',
      );
      const nextButton = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-next button',
      );

      dispatchFakeEvent(prevButton, 'click');
      fixture.detectChanges();
      // nothing should happen the prev button is disabled!
      expect(instance.pagination.currentPage).toBe(1);
      dispatchFakeEvent(nextButton, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(2);
      dispatchFakeEvent(prevButton, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(1);

      instance.currentPage = 12;
      fixture.detectChanges();
      dispatchFakeEvent(nextButton, 'click');
      fixture.detectChanges();
      // nothing should happen the next button is disabled!
      expect(instance.pagination.currentPage).toBe(12);
    });

dispatchFakeEvent(input, 'focusin');
      typeInElement('A', input);
      fixture.detectChanges();
      tick();

      expect(trigger.panelOpen).toBe(true);

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

      expect(trigger.panelOpen).toBe(false);

      // Dispatch the event without actually changing the value
      // to simulate what happen in some cases on IE.
      dispatchFakeEvent(input, 'input');
      fixture.detectChanges();
      tick();

      expect(trigger.panelOpen).toBe(false);
    }));

it('should work when input is wrapped in ngIf', () => {
      const fixture = createComponent(NgIfAutocomplete);
      fixture.detectChanges();

      dispatchFakeEvent(
        fixture.debugElement.query(By.css('input')).nativeElement,
        'focusin',
      );
      fixture.detectChanges();
      expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
      expect(overlayContainerElement.textContent).toContain('One');
      expect(overlayContainerElement.textContent).toContain('Two');
    });

it('should pause dismissing the toast when hovering', fakeAsync(() => {
    const longMsg = new Array(DT_TOAST_CHAR_LIMIT + 10).map(() => '.').join();
    const toastRef = dtToast.create(longMsg);
    const afterDismissSpy = jest.fn();
    toastRef!.afterDismissed().subscribe(afterDismissSpy);

    fixture.detectChanges();

    const messageElement = overlayContainerElement.querySelector(
      '.dt-toast-container',
    )!;
    expect(messageElement.textContent!.length).toBe(DT_TOAST_CHAR_LIMIT);

    tick(toastRef!.duration / 2);
    dispatchFakeEvent(messageElement, 'mouseenter');
    expect(afterDismissSpy).not.toHaveBeenCalled();

    tick(toastRef!.duration);
    fixture.detectChanges();
    expect(afterDismissSpy).not.toHaveBeenCalled();
    dispatchFakeEvent(messageElement, 'mouseleave');
    fixture.detectChanges();
    expect(afterDismissSpy).not.toHaveBeenCalled();

    tick(toastRef!.duration / 2);
    fixture.detectChanges();
    flushMicrotasks();
    expect(afterDismissSpy).toHaveBeenCalled();
  }));
});

it('should trigger dragHandle funciton when the left or right handle gets clicked', () => {
      jest.spyOn(range, '_dragHandle').mockImplementation(() => {});
      expect(range._dragHandle).not.toHaveBeenCalled();

      const leftHandle = fixture.debugElement.query(
        By.css('.dt-chart-left-handle'),
      ).nativeElement;
      const rightHandle = fixture.debugElement.query(
        By.css('.dt-chart-right-handle'),
      ).nativeElement;

      dispatchFakeEvent(leftHandle, 'mousedown');
      expect(range._dragHandle).toHaveBeenCalledTimes(1);

      dispatchFakeEvent(rightHandle, 'mousedown');
      expect(range._dragHandle).toHaveBeenCalledTimes(2);
    });

fixture.detectChanges();

    const messageElement = overlayContainerElement.querySelector(
      '.dt-toast-container',
    )!;
    expect(messageElement.textContent!.length).toBe(DT_TOAST_CHAR_LIMIT);

    tick(toastRef!.duration / 2);
    dispatchFakeEvent(messageElement, 'mouseenter');
    expect(afterDismissSpy).not.toHaveBeenCalled();

    tick(toastRef!.duration);
    fixture.detectChanges();
    expect(afterDismissSpy).not.toHaveBeenCalled();
    dispatchFakeEvent(messageElement, 'mouseleave');
    fixture.detectChanges();
    expect(afterDismissSpy).not.toHaveBeenCalled();

    tick(toastRef!.duration / 2);
    fixture.detectChanges();
    flushMicrotasks();
    expect(afterDismissSpy).toHaveBeenCalled();
  }));
});