How to use the @testing-library/react.fireEvent.mouseMove function in @testing-library/react

To help you get started, we’ve selected a few @testing-library/react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github atlassian / react-beautiful-dnd / test / unit / integration / drag-handle / mouse-sensor / cancel-while-pending.spec.js View on Github external
it('should abort when there is a window scroll', () => {
  const { getByText } = render();
  const handle: HTMLElement = getByText('item: 0');

  fireEvent.mouseDown(handle);

  // abort
  const event: Event = new Event('scroll', {
    target: window,
    bubbles: true,
    cancelable: true,
  });
  fireEvent(window, event);

  // would normally start
  fireEvent.mouseMove(handle, {
    clientX: 0,
    clientY: sloppyClickThreshold,
  });

  // event not consumed as it is an indirect cancel
  expect(event.defaultPrevented).toBe(false);
  // drag not started
  expect(isDragging(handle)).toBe(false);
});
github albizures / react-dynamic-layout / src / components / Float / __tests__ / index.spec.tsx View on Github external
dragbar: ,
      });

      const dragbar = container.getElementsByClassName(
        'rdl-float__drag-bar',
      )[0];

      fireEvent.mouseDown(dragbar, { clientX: 10, clientY: 10 });
      fireEvent.mouseMove(window, { clientX: 11, clientY: 11 });

      expect(container).toHaveStyle(`
        top: 1px;
        left: 1px;
      `);

      fireEvent.mouseMove(window, { clientX: 20, clientY: 20 });

      expect(container).toHaveStyle(`
        top: 10px;
        left: 10px;
      `);

      fireEvent.mouseUp(window, { clientX: 20, clientY: 20 });

      // this last event shouldn't have any effect
      fireEvent.mouseMove(window, { clientX: 25, clientY: 25 });

      expect(container).toHaveStyle(`
        top: 10px;
        left: 10px;
      `);
    });
github ifiokjr / remirror / packages / multishift / src / __tests__ / multishift.spec.tsx View on Github external
const { getByTestId, getByRole, getByText, getAllByTestId } = render();
  expect(getByRole('listbox')).toHaveAttribute('aria-multiselectable', 'true');

  const button = getByRole('button');
  fireEvent.click(button);

  const alphaItem = getByText('Alpha');
  const betaItem = getByText('Beta');
  const gammaItem = getByText('Gamma');
  const deltaItem = getByText('Delta');
  fireEvent.click(alphaItem);
  fireEvent.click(betaItem);

  fireEvent.mouseMove(gammaItem);
  expect(gammaItem).toHaveAttribute('aria-selected', 'true');
  fireEvent.mouseMove(deltaItem);
  expect(deltaItem).toHaveAttribute('aria-selected', 'false');

  const alphaDisplay = getByTestId('a');
  fireEvent.click(alphaDisplay);
  expect(alphaDisplay).not.toBeInTheDocument();

  // Previous item should lose hover once another item is selected / removed
  expect(gammaItem).toHaveAttribute('aria-selected', 'false');

  fireEvent.mouseMove(betaItem);
  expect(betaItem).toHaveAttribute('aria-selected', 'true');
  fireEvent.mouseLeave(betaItem);
  expect(betaItem).toHaveAttribute('aria-selected', 'false');

  fireEvent.click(betaItem);
  expect(() => getAllByTestId('b')).toThrow();
github atlassian / react-beautiful-dnd / test / unit / integration / util / expanded-mouse.js View on Github external
move: (handle: HTMLElement, point: Position) => {
    fireEvent.mouseMove(handle, { clientX: point.x, clientY: point.y });
    // movements are throttled by raf
    act(() => {
      requestAnimationFrame.step();
    });
  },
  startDrop: (handle: HTMLElement) => {
github downshift-js / downshift / src / __tests__ / downshift.misc-with-utils-mocked.js View on Github external
>
          {({getInputProps, getItemProps}) => (
            <div>
              <input data-testid="input">
              <div>
              <div>
            </div>
          )}
        
      )
    }
  }
  const {queryByTestId} = render()
  const input = queryByTestId('input')
  const item = queryByTestId('item-2')
  fireEvent.mouseMove(item)
  jest.runAllTimers()
  expect(scrollIntoView).not.toHaveBeenCalled()
  // now let's make sure that we can still scroll items into view
  // ↓
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(scrollIntoView).toHaveBeenCalledWith(item, undefined)
})
</div></div>
github sandstreamdev / react-swipeable-list / src / __tests__ / helpers.js View on Github external
export const swipeRightMouse = container => {
  fireEvent.mouseDown(container, { clientX: 250, clientY: 20 });
  fireEvent.mouseMove(container, { clientX: 350, clientY: 20 });
  fireEvent.mouseUp(container, { clientX: 350, clientY: 20 });
};
github atlassian / react-beautiful-dnd / test / unit / integration / util / controls.js View on Github external
lift: (handle: HTMLElement) => {
    fireEvent.mouseMove(handle, { clientX: 0, clientY: sloppyClickThreshold });
  },
  move: (handle: HTMLElement) => {
github mohsinulhaq / react-popper-tooltip / tests / TooltipTrigger.spec.tsx View on Github external
beforeEach(() =&gt; {
    ({container, queryByText} = render(
      
        {Trigger}
      
    ));
    fireEvent.mouseMove(container.firstChild as HTMLElement);
    jest.runAllTimers();
  });
github zendeskgarden / react-containers / packages / focusvisible / src / FocusVisibleContainer.spec.tsx View on Github external
it('retains current focus treatment if html is initial pointer movement', () =&gt; {
      const { getByTestId } = render();
      const button = getByTestId('button');

      fireEvent.keyDown(button);
      fireEvent.mouseMove(document.documentElement);
      fireEvent.focus(button);

      expect(button).toHaveAttribute('data-garden-focus-visible');
    });