timelineCursor.spec.tsx 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import {
  2. fireEvent,
  3. render,
  4. screen,
  5. waitFor,
  6. waitForElementToBeRemoved,
  7. } from 'sentry-test/reactTestingLibrary';
  8. import {useTimelineCursor} from './timelineCursor';
  9. function TestComponent() {
  10. const {timelineCursor, cursorContainerRef} = useTimelineCursor<HTMLDivElement>({
  11. enabled: true,
  12. labelText: p => p.toFixed(2),
  13. });
  14. return (
  15. <div data-test-id="body">
  16. <div data-test-id="container" ref={cursorContainerRef}>
  17. {timelineCursor}
  18. </div>
  19. </div>
  20. );
  21. }
  22. describe('TimelineCursor', function () {
  23. it('renders', async function () {
  24. render(<TestComponent />);
  25. const body = screen.getByTestId('body');
  26. const container = screen.getByTestId('container');
  27. container.getBoundingClientRect = jest.fn(() => ({
  28. x: 10,
  29. y: 10,
  30. width: 100,
  31. height: 100,
  32. left: 10,
  33. top: 10,
  34. right: 110,
  35. bottom: 110,
  36. toJSON: jest.fn(),
  37. }));
  38. // Cursor has not appeared
  39. expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
  40. // Move cursor into the container, cursor is visible
  41. fireEvent.mouseMove(body, {clientX: 20, clientY: 20});
  42. const cursor = await screen.findByRole('presentation');
  43. expect(cursor).toBeInTheDocument();
  44. // Cursor is 10px into the container
  45. waitFor(() => {
  46. expect(container.style.getPropertyValue('--cursorOffset')).toBe('10px');
  47. expect(container.style.getPropertyValue('--cursorMax')).toBe('100px');
  48. });
  49. // move cursor outside it is not visible
  50. fireEvent.mouseMove(body, {clientX: 120, clientY: 20});
  51. await waitForElementToBeRemoved(() => screen.getByRole('presentation'));
  52. });
  53. });