Janady13/llms-txt-hub / apps/web/components/ui/__tests__/back-to-top.test.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/ui/__tests__/back-to-top.test.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/ui/__tests__/back-to-top.test.tsx
Original SHA-256	6bc1da17fb5804a7ada1f31697860d3a3b8c701a83c6d4ce6995a8ecd41e2448
Git blob SHA	d9c51cbe183b89f40dc6397a3f57f3af023271ef
Reading-copy SHA-256	6bc1da17fb5804a7ada1f31697860d3a3b8c701a83c6d4ce6995a8ecd41e2448

Original source ↗

Recovered source transcript

Download complete source text ↓100 lines · 2.8 KB

import { fireEvent, render, screen } from '@testing-library/react'
import { BackToTop } from '@/components/ui/back-to-top'

// Mock window.scrollTo
const mockScrollTo = jest.fn()
Object.defineProperty(window, 'scrollTo', {
  value: mockScrollTo,
  writable: true
})

/**
 * Helper to trigger scroll events and mock document/window properties
 * @param scrollY - Current scroll position
 * @param pageHeight - Total page height
 * @param viewportHeight - Viewport height
 */
const mockScrollEvent = (scrollY: number, pageHeight: number, viewportHeight: number) => {
  Object.defineProperty(window, 'scrollY', { value: scrollY, configurable: true })
  Object.defineProperty(document.documentElement, 'scrollHeight', {
    value: pageHeight,
    configurable: true
  })
  Object.defineProperty(window, 'innerHeight', { value: viewportHeight, configurable: true })

  fireEvent.scroll(window)
}

describe('BackToTop', () => {
  beforeEach(() => {
    jest.clearAllMocks()
    // Reset scroll position
    Object.defineProperty(window, 'scrollY', { value: 0, configurable: true })
  })

  it('should not render when page is short', () => {
    render(<BackToTop />)

    // Simulate short page (not 1.5x viewport height)
    mockScrollEvent(500, 800, 800)

    expect(screen.queryByRole('button')).not.toBeInTheDocument()
  })

  it('should not render when user has not scrolled enough', () => {
    render(<BackToTop />)

    // Simulate long page but low scroll position
    mockScrollEvent(200, 2000, 800)

    expect(screen.queryByRole('button')).not.toBeInTheDocument()
  })

  it('should render when page is long and user has scrolled past threshold', () => {
    render(<BackToTop />)

    // Simulate long page and sufficient scroll
    mockScrollEvent(500, 2000, 800)

    expect(screen.getByRole('button')).toBeInTheDocument()
    expect(screen.getByLabelText('Back to top')).toBeInTheDocument()
  })

  it('should scroll to top when clicked', () => {
    render(<BackToTop />)

    // Make button visible
    mockScrollEvent(500, 2000, 800)

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

    expect(mockScrollTo).toHaveBeenCalledWith({
      top: 0,
      behavior: 'smooth'
    })
  })

  it('should hide when scrolling back up', () => {
    render(<BackToTop />)

    // Make button visible
    mockScrollEvent(500, 2000, 800)
    expect(screen.getByRole('button')).toBeInTheDocument()

    // Scroll back up
    mockScrollEvent(200, 2000, 800)
    expect(screen.queryByRole('button')).not.toBeInTheDocument()
  })

  it('should have correct accessibility attributes', () => {
    render(<BackToTop />)

    // Make button visible
    mockScrollEvent(500, 2000, 800)

    const button = screen.getByRole('button')
    expect(button).toHaveAttribute('aria-label', 'Back to top')
  })
})