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

it('should create a mouseOut stream that is outside the bounding client rect', () => {
    const fakeMouseOut = createMouseEvent('mouseout', 200, 100);

    const fakeOut = {
      x: 600,
      y: 300,
    };

    // mock the capture and merge events to return our faked mousemove
    const captureSpy = jest
      .spyOn(utils, 'captureAndMergeEvents')
      .mockReturnValue(of(fakeMouseOut));
    const utilaSpy = jest
      .spyOn(utils, 'getRelativeMousePosition')
      .mockReturnValue(fakeOut);

    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(

it('should not create a click stream when there is a mousemove between mousedown and mouseup', () => {
    const clickEndEvent = createMouseEvent('mouseup', 20, 20);

    const clickStart$ = of(createMouseEvent('mousedown'));
    const clickEnd$ = of(clickEndEvent).pipe(delay(5));
    const mouseMove$ = of(createMouseEvent('mousemove')).pipe(delay(3));

    jest.spyOn(utils, 'getRelativeMousePosition');

    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(
        getClickStream(selectionArea, clickStart$, clickEnd$, mouseMove$),
      ).toBe('-----|'); // delay clickEnd$ for 5ms
      // need to execute all side effects before expecting
      flush();

      expect(utils.getRelativeMousePosition).not.toHaveBeenCalled();
    });

it('should create a click stream out of a mousedown and mouse up', () => {
    const clickEndEvent = createMouseEvent('mouseup', 20, 20);

    const clickStart$ = of(createMouseEvent('mousedown'));
    const clickEnd$ = of(clickEndEvent).pipe(delay(2));

    const utilSpy = jest
      .spyOn(utils, 'getRelativeMousePosition')
      .mockReturnValue({
        x: 100,
        y: 100,
      });

    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(
        getClickStream(selectionArea, clickStart$, clickEnd$),
      ).toBe('--(a)', { a: { x: 100, y: 100 } });
      // need to execute all side effects before expecting

it('should create a mousedown stream', () => {
    const fakeMouseDown = createMouseEvent('mousedown', 200, 100);

    // mock the capture and merge events to return our faked mousemove
    const captureSpy = jest
      .spyOn(utils, 'captureAndMergeEvents')
      .mockReturnValue(of(fakeMouseDown));
    const coreSpy = jest.spyOn(core, 'removeCssClass');

    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(getMouseDownStream(selectionArea, [selectionArea])).toBe(
        '(a|)',
        { a: fakeMouseDown },
      );
      // need to execute all side effects before expecting
      flush();

      expect(core.removeCssClass).toHaveBeenCalledTimes(1);

it('should not create a click stream when the mouseup starts before the mouse down', () => {
    const clickStart$ = of(createMouseEvent('mousedown')).pipe(delay(1));
    const clickEnd$ = of(createMouseEvent('mouseup'));
    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(
        getClickStream(selectionArea, clickStart$, clickEnd$),
      ).toBe('');
      // need to execute all side effects before expecting
      flush();

      expect(utils.getRelativeMousePosition).not.toHaveBeenCalled();
    });
  });

it(`should bubble the event if ${key} key is pressed`, () => {
          const event = createMouseEvent('click');
          const spied = jest
            .spyOn(event, key as any, 'get')
            .mockImplementation(() => true);

          jest.spyOn(router, 'navigateByUrl');

          const fixture = TestBed.createComponent(TestBreadcrumbsItem);
          const component = fixture.componentInstance;

          component.href = 'test1/test2';
          fixture.detectChanges();

          // when
          const bubbled = component.click(event);

          // then

it('should filter a mouseOut stream that is not outside the bounding client rect', () => {
    const fakeMouseOut = createMouseEvent('mouseout');

    const inside = {
      x: 300,
      y: 150,
    };

    // mock the capture and merge events to return our faked mousemove
    const captureSpy = jest
      .spyOn(utils, 'captureAndMergeEvents')
      .mockReturnValue(of(fakeMouseOut));
    const utilaSpy = jest
      .spyOn(utils, 'getRelativeMousePosition')
      .mockReturnValue(inside);

    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(

it('should not create a click stream when the mouseup starts before the mouse down', () => {
    const clickStart$ = of(createMouseEvent('mousedown')).pipe(delay(1));
    const clickEnd$ = of(createMouseEvent('mouseup'));
    testScheduler.run(({ expectObservable, flush }) => {
      expectObservable(
        getClickStream(selectionArea, clickStart$, clickEnd$),
      ).toBe('');
      // need to execute all side effects before expecting
      flush();

      expect(utils.getRelativeMousePosition).not.toHaveBeenCalled();
    });
  });

it('should creat a drag stream', () => {
    const dragStart$ = of(DtSelectionAreaEventTarget.LeftHandle);
    const dragEnd$ = timer(5).pipe(mapTo(createMouseEvent('mouseup')));

    const mouseMoveInterval = interval(1).pipe(
      map(curX => createMouseEvent('mousemove', curX + 201, 100)),
      take(4),
    );

    testScheduler.run(({ expectObservable }) => {
      expectObservable(
        getDragStream(selectionArea, dragStart$, dragEnd$, mouseMoveInterval),
      ).toBe('-abc(d|)', MOVE_VALUES);
    });
  });

      map(curX => createMouseEvent('mousemove', curX + 201, 100)),
      take(4),