chore(): use playwright test for e2e

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
     'no-console': ['error', { allow: ['warn', 'error'] }],
   },
 }

.gitignore

@@ -3,6 +3,6 @@
 node_modules
 .cache
 dist
-e2e/__examples.jsx
-e2e/__examples.html
+examples/__examples.jsx
+examples/__examples.html
 

e2e/collapsible-long-item.test.ts

@@ -1,13 +1,15 @@
-describe('list with scroll seek placeholders', () => {
-  beforeEach(async () => {
-    await page.goto('http://localhost:1234/collapsible-long-item')
-    await page.waitForSelector('#test-root div')
+import { test, expect } from '@playwright/test'
+
+test.describe('list with scroll seek placeholders', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await page.goto(`${baseURL}/collapsible-long-item`)
+    await page.waitForSelector('[data-test-id=virtuoso-scroller]')
     await page.waitForTimeout(100)
   })
 
-  it('compensates correctly when collapsing an item', async () => {
+  test('compensates correctly when collapsing an item', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('#test-root > div')!
+      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
       scroller.scrollBy({ top: -400 })
     })
 
@@ -21,7 +23,7 @@ describe('list with scroll seek placeholders', () => {
     await page.waitForTimeout(200)
 
     const scrollTop = await page.evaluate(() => {
-      const scroller = document.querySelector('#test-root > div')!
+      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
       return scroller.scrollTop
     })
 

e2e/data.test.ts

@@ -1,33 +1,35 @@
-describe('list with hundred items', () => {
-  beforeEach(async () => {
-    await page.goto('http://localhost:1234/data')
-    await page.waitForSelector('#test-root > div')
+import { test, expect } from '@playwright/test'
+
+test.describe('list with hundred items', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await page.goto(`${baseURL}/data`)
+    await page.waitForSelector('[data-test-id=virtuoso-scroller]')
     await page.waitForTimeout(100)
   })
 
-  it('renders 10 items', async () => {
+  test('renders 10 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('#test-root > div > div > div > div')!
+      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
       return listContainer.childElementCount
     })
     expect(itemCount).toBe(10)
   })
 
-  it('fills in the scroller', async () => {
+  test('fills in the scroller', async ({ page }) => {
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('#test-root > div > div')!
+      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
     expect(scrollHeight).toBe(100 * 30)
   })
 
-  it('increases the items', async () => {
+  test('increases the items', async ({ page }) => {
     await page.evaluate(() => {
       document.querySelector('button')!.click()
     })
 
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('#test-root > div > div')!
+      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
 

e2e/grid-scroll-seek-placeholder.test.ts

@@ -1,11 +1,13 @@
-describe('list with scroll seek placeholders', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('list with scroll seek placeholders', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/grid-scroll-seek-placeholder')
     await page.waitForSelector('#test-root div')
     await page.waitForTimeout(100)
   })
 
-  it('renders grid placeholders when scrolled', async () => {
+  test('renders grid placeholders when scrolled', async ({ page }) => {
     await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div')!
       setInterval(() => {

e2e/grid.test.ts

@@ -1,23 +1,26 @@
-describe('list with hundred items', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('list with hundred items', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/grid')
     await page.waitForSelector('#test-root')
     await page.waitForTimeout(100)
   })
 
-  it('renders 20 items', async () => {
+  test('renders 16 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
       const listContainer = document.querySelector('#test-root > div > div > div')
       return listContainer!.childElementCount
     })
-    expect(itemCount).toBe(20)
+    expect(itemCount).toBe(16)
   })
 
-  it('fills in the scroller', async () => {
+  test('fills in the scroller', async ({ page }) => {
+    await page.waitForTimeout(100)
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('#test-root > div')
+      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')
       return scroller!.scrollHeight
     })
-    expect(scrollHeight).toBe(1625)
+    expect(scrollHeight).toBe(2000)
   })
 })

e2e/grouped-topmost-item.test.ts

@@ -1,11 +1,13 @@
-describe('jagged grouped list', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('jagged grouped list', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/grouped-topmost-item')
     await page.waitForSelector('#test-root > div')
     await page.waitForTimeout(100)
   })
 
-  it('puts the specified item below the group', async () => {
+  test('puts the specified item below the group', async ({ page }) => {
     // we pick the second item, the first should remain under the group header
     const stickyItemIndex = await page.evaluate(() => {
       const stickyItem = document.querySelector('#test-root > div > div:first-child > div > div:nth-child(2)') as HTMLDivElement

e2e/grouped.test.ts

@@ -1,11 +1,13 @@
-describe('jagged grouped list', () => {
-  beforeAll(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('jagged grouped list', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/grouped')
     await page.waitForSelector('#test-root > div')
     await page.waitForTimeout(100)
   })
 
-  it('renders correct sizing', async () => {
+  test('renders correct sizing', async ({ page }) => {
     const [paddingTop, paddingBottom] = await page.evaluate(() => {
       const listContainer = document.querySelector('#test-root > div > div > div:first-child') as HTMLElement
       return [listContainer.style.paddingTop, listContainer.style.paddingBottom]
@@ -15,7 +17,7 @@ describe('jagged grouped list', () => {
     expect(paddingBottom).toBe('1500px')
   })
 
-  it('renders correct state when scrolled', async () => {
+  test('renders correct state when scrolled', async ({ page }) => {
     await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div') as HTMLElement
       scroller.scrollTo({ top: 500 })

e2e/hello.test.ts

@@ -1,19 +1,21 @@
-describe('list with hundred items', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('list with hundred items', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/hello')
     await page.waitForSelector('#test-root')
     await page.waitForTimeout(100)
   })
 
-  it('renders only 10 items', async () => {
+  test('renders only 10 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
       const listContainer = document.querySelector('#test-root > div > div > div')!
       return listContainer.childElementCount
     })
     expect(itemCount).toBe(10)
   })
 
-  it('fills in the scroller', async () => {
+  test('fills in the scroller', async ({ page }) => {
     const scrollHeight = await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div')!
       return scroller.scrollHeight

e2e/initial-scroll-top.test.ts

@@ -1,14 +1,12 @@
-describe('initial scroll top', () => {
-  beforeAll(async () => {
-    await page.goto('http://localhost:1234/initial-scroll-top')
-  })
+import { test, expect } from '@playwright/test'
 
-  beforeEach(async () => {
-    await page.reload()
+test.describe('initial scroll top', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:1234/initial-scroll-top')
     await page.waitForTimeout(500) // :(
   })
 
-  it('starts from 50px', async () => {
+  test('starts from 50px', async ({ page }) => {
     const scrollTop = await page.evaluate(() => {
       const listContainer = document.querySelectorAll('#test-root > div')[0]
       return listContainer.scrollTop

e2e/initial-topmost-item.test.ts

@@ -1,13 +1,15 @@
-describe('jagged list with initial topmost item', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('jagged list with initial topmost item', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/initial-topmost-item')
     await page.waitForSelector('#test-root > div')
     await page.waitForTimeout(100)
   })
 
   // the real position here would be 1500, but the calc is based on the
   // first item size, which is 20px
-  it('scrolls to the correct position', async () => {
+  test('scrolls to the correct position', async ({ page }) => {
     const scrollTop = await page.evaluate(() => {
       const listContainer = document.querySelector('#test-root > div')
       return listContainer!.scrollTop
@@ -23,7 +25,7 @@ describe('jagged list with initial topmost item', () => {
     expect(paddingTop).toBe('1200px')
   })
 
-  it('sticks the item to the top', async () => {
+  test('sticks the item to the top', async ({ page }) => {
     const firstChildIndex = await page.evaluate(() => {
       const firstChild = document.querySelector('#test-root > div > div > div > div') as HTMLElement
       return firstChild.dataset['index']

e2e/long-last-item.test.ts

@@ -1,19 +1,21 @@
-describe('list with a long last item', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('list with a long last item', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/long-last-item')
     await page.waitForSelector('#test-root')
     await page.waitForTimeout(300)
   })
 
-  it('starts from the last item', async () => {
+  test('starts from the last item', async ({ page }) => {
     const paddingTop = await page.evaluate(() => {
       const listContainer = document.querySelector('#test-root > div > div > div')
       return (listContainer as HTMLElement).style.paddingTop
     })
     expect(paddingTop).toBe('7200px')
   })
 
-  it.skip('compensates on upwards scrolling correctly', async () => {
+  test('compensates on upwards scrolling correctly', async ({ page }) => {
     await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div')!
       scroller.scrollBy({ top: -2 })

e2e/prepend-items.test.ts

@@ -1,31 +1,33 @@
-describe('list with prependable items', () => {
-  beforeEach(async () => {
+import { test, expect, Page } from '@playwright/test'
+
+test.describe('list with prependable items', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/prepend-items')
     await page.waitForSelector('#test-root')
     await page.waitForTimeout(100)
   })
 
-  async function getScrollTop() {
+  async function getScrollTop(page: Page) {
     await page.waitForTimeout(100)
     return await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div > div')
       return scroller!.scrollTop
     })
   }
 
-  it('keeps the location at where it should be', async () => {
-    expect(await getScrollTop()).toBe(0)
+  test('keeps the location at where it should be', async ({ page }) => {
+    expect(await getScrollTop(page)).toBe(0)
 
     await page.evaluate(() => {
       document.querySelector('button')!.click()
     })
 
-    expect(await getScrollTop()).toBe(2 * 55)
+    expect(await getScrollTop(page)).toBe(2 * 55)
 
     await page.evaluate(() => {
       document.querySelector('button')!.click()
     })
 
-    expect(await getScrollTop()).toBe(4 * 55)
+    expect(await getScrollTop(page)).toBe(4 * 55)
   })
 })

e2e/scroll-seek-placeholder.test.ts

@@ -1,11 +1,13 @@
-describe('list with scroll seek placeholders', () => {
-  beforeEach(async () => {
+import { test, expect } from '@playwright/test'
+
+test.describe('list with scroll seek placeholders', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:1234/scroll-seek-placeholder')
     await page.waitForSelector('#test-root div')
     await page.waitForTimeout(100)
   })
 
-  it('renders placeholders when scrolled', async () => {
+  test('renders placeholders when scrolled', async ({ page }) => {
     await page.evaluate(() => {
       const scroller = document.querySelector('#test-root > div')!
       setInterval(() => {