virtual/packages/react-virtual/e2e/app/test/smooth-scroll.spec.ts at 1cd67a0871a0084cc42669fac41eee88f3cb4509 · TanStack/virtual · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { expect, test } from './fixtures'

test('smooth scrolls to index 1000', async ({ page }) => {
  await page.goto('/smooth-scroll/')
  await page.click('#scroll-to-1000')

  // Smooth scroll animation is 500ms + reconciliation time
  await page.waitForTimeout(2000)

  await expect(page.locator('[data-testid="item-1000"]')).toBeVisible()

  const delta = await page.evaluate(() => {
    const item = document.querySelector('[data-testid="item-1000"]')
    const container = document.querySelector('#scroll-container')
    if (!item || !container) throw new Error('Elements not found')

    const itemRect = item.getBoundingClientRect()
    const containerRect = container.getBoundingClientRect()
    const scrollTop = container.scrollTop
    const top = itemRect.top + scrollTop - containerRect.top
    const bottom = top + itemRect.height
    const containerBottom = scrollTop + container.clientHeight
    return Math.abs(bottom - containerBottom)
  })
  expect(delta).toBeLessThan(1.01)
})

test('smooth scrolls to index 100', async ({ page }) => {
  await page.goto('/smooth-scroll/')
  await page.click('#scroll-to-100')

  await page.waitForTimeout(2000)

  await expect(page.locator('[data-testid="item-100"]')).toBeVisible()
})

test('smooth scrolls to index 0 after scrolling away', async ({ page }) => {
  await page.goto('/smooth-scroll/')

  // First scroll down
  await page.click('#scroll-to-500')
  await page.waitForTimeout(2000)
  await expect(page.locator('[data-testid="item-500"]')).toBeVisible()

  // Then smooth scroll back to top
  await page.click('#scroll-to-0')
  await page.waitForTimeout(2000)

  await expect(page.locator('[data-testid="item-0"]')).toBeVisible()

  const scrollTop = await page.evaluate(() => {
    const container = document.querySelector('#scroll-container')
    return container?.scrollTop ?? -1
  })
  expect(scrollTop).toBeLessThan(1.01)
})

test('smooth scrolls to index 500 with start alignment', async ({ page }) => {
  await page.goto('/smooth-scroll/')
  await page.click('#scroll-to-500-start')

  await page.waitForTimeout(2000)

  await expect(page.locator('[data-testid="item-500"]')).toBeVisible()

  const delta = await page.evaluate(
    ([idx, align]) => {
      const item = document.querySelector(`[data-testid="item-${idx}"]`)
      const container = document.querySelector('#scroll-container')
      if (!item || !container) throw new Error('Elements not found')
      const itemRect = item.getBoundingClientRect()
      const containerRect = container.getBoundingClientRect()
      if (align === 'start') {
        return Math.abs(itemRect.top - containerRect.top)
      }
      return 0
    },
    [500, 'start'] as const,
  )
  expect(delta).toBeLessThan(1.01)
})

test('smooth scrolls to index 500 with center alignment', async ({ page }) => {
  await page.goto('/smooth-scroll/')
  await page.click('#scroll-to-500-center')

  await page.waitForTimeout(2000)

  await expect(page.locator('[data-testid="item-500"]')).toBeVisible()

  const delta = await page.evaluate(
    ([idx]) => {
      const item = document.querySelector(`[data-testid="item-${idx}"]`)
      const container = document.querySelector('#scroll-container')
      if (!item || !container) throw new Error('Elements not found')
      const itemRect = item.getBoundingClientRect()
      const containerRect = container.getBoundingClientRect()
      const containerCenter = containerRect.top + containerRect.height / 2
      const itemCenter = itemRect.top + itemRect.height / 2
      return Math.abs(itemCenter - containerCenter)
    },
    [500] as const,
  )
  // Center alignment has slightly more tolerance due to rounding
  expect(delta).toBeLessThan(50)
})

test('smooth scrolls sequentially to multiple targets', async ({ page }) => {
  await page.goto('/smooth-scroll/')

  // Scroll to 100 first
  await page.click('#scroll-to-100')
  await page.waitForTimeout(2000)
  await expect(page.locator('[data-testid="item-100"]')).toBeVisible()

  // Then scroll to 500
  await page.click('#scroll-to-500')
  await page.waitForTimeout(2000)
  await expect(page.locator('[data-testid="item-500"]')).toBeVisible()

  // Then scroll to 1000
  await page.click('#scroll-to-1000')
  await page.waitForTimeout(2000)
  await expect(page.locator('[data-testid="item-1000"]')).toBeVisible()
})

test('interrupting smooth scroll with another smooth scroll', async ({
  page,
}) => {
  await page.goto('/smooth-scroll/')

  // Start scrolling to 1000
  await page.click('#scroll-to-1000')
  // Interrupt mid-animation (before the 500ms animation completes)
  await page.waitForTimeout(200)
  await page.click('#scroll-to-100')

  // Wait for the second scroll to complete
  await page.waitForTimeout(2000)

  // Should have ended at 100, not 1000
  await expect(page.locator('[data-testid="item-100"]')).toBeVisible()
})