chore: more conventional test attribute

e2e/collapsible-long-item.test.ts

@@ -5,13 +5,13 @@ import { navigateToExample } from './utils.ts'
 test.describe('list with collapsible long items', () => {
   test.beforeEach(async ({ page, baseURL }) => {
     await navigateToExample(page, baseURL, 'collapsible-long-item')
-    await page.waitForSelector('[data-test-id=virtuoso-scroller]')
+    await page.waitForSelector('[data-testid=virtuoso-scroller]')
     await page.waitForTimeout(200)
   })
 
   test('compensates correctly when collapsing an item', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       scroller.scrollBy({ top: -400 })
     })
 
@@ -25,7 +25,7 @@ test.describe('list with collapsible long items', () => {
     await page.waitForTimeout(200)
 
     const scrollTop = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       return scroller.scrollTop
     })
 

e2e/data.test.ts

@@ -5,21 +5,21 @@ import { navigateToExample } from './utils.ts'
 test.describe('list with hundred items', () => {
   test.beforeEach(async ({ page, baseURL }) => {
     await navigateToExample(page, baseURL, 'data')
-    await page.waitForSelector('[data-test-id=virtuoso-scroller]')
+    await page.waitForSelector('[data-testid=virtuoso-scroller]')
     await page.waitForTimeout(100)
   })
 
   test('renders 10 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
       return listContainer.childElementCount
     })
     expect(itemCount).toBe(10)
   })
 
   test('fills in the scroller', async ({ page }) => {
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
     expect(scrollHeight).toBe(100 * 30)
@@ -31,7 +31,7 @@ test.describe('list with hundred items', () => {
     })
 
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
 

e2e/follow-output-loading-image.test.ts

@@ -9,9 +9,9 @@ test.describe('list with hundred items', () => {
   })
 
   test('scrolls to bottom when image is loaded', async ({ page }) => {
-    await page.locator('data-test-id=add-image').click()
+    await page.locator('data-testid=add-image').click()
     await page.waitForTimeout(800)
-    const scrollTop = await page.locator('data-test-id=virtuoso-scroller').evaluate((el) => el.scrollTop)
+    const scrollTop = await page.locator('data-testid=virtuoso-scroller').evaluate((el) => el.scrollTop)
     expect(scrollTop).toBe(2800)
   })
 })

e2e/gap.test.ts

@@ -10,15 +10,15 @@ test.describe('list with hundred items', () => {
 
   test('renders only 6 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
       return listContainer.childElementCount
     })
     expect(itemCount).toBe(6)
   })
 
   test('fills in the scroller', async ({ page }) => {
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
     expect(scrollHeight).toBe(100 * 32 + 99 * 20)

e2e/grid-gap.test.ts

@@ -10,7 +10,7 @@ test.describe('grid with gaps', () => {
 
   test('renders 16 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')
       return listContainer!.childElementCount
     })
     expect(itemCount).toBe(16)
@@ -19,7 +19,7 @@ test.describe('grid with gaps', () => {
   test('fills in the scroller', async ({ page }) => {
     await page.waitForTimeout(100)
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')
       return scroller!.scrollHeight
     })
     expect(scrollHeight).toBe(2480)

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

@@ -10,7 +10,7 @@ test.describe('list with scroll seek placeholders', () => {
 
   test('renders grid placeholders when scrolled', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       setInterval(() => {
         scroller.scrollBy({ top: 30 })
       }, 10)
@@ -19,7 +19,7 @@ test.describe('list with scroll seek placeholders', () => {
     await page.waitForSelector('div[aria-label=placeholder]')
 
     const [width, height, containerPaddingTop, text, color] = await page.evaluate(() => {
-      const container = document.querySelector('[data-test-id=virtuoso-item-list]') as HTMLElement
+      const container = document.querySelector('[data-testid=virtuoso-item-list]') as HTMLElement
       const item = container.getElementsByTagName('div')[0] as HTMLElement
       return [item.offsetWidth, item.offsetHeight, container.style.paddingTop, item.textContent, item.style.color]
     })

e2e/grid.test.ts

@@ -10,7 +10,7 @@ test.describe('list with hundred items', () => {
 
   test('renders 16 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')
       return listContainer!.childElementCount
     })
     expect(itemCount).toBe(16)
@@ -19,7 +19,7 @@ test.describe('list with hundred items', () => {
   test('fills in the scroller', async ({ page }) => {
     await page.waitForTimeout(100)
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')
       return scroller!.scrollHeight
     })
     expect(scrollHeight).toBe(2000)

e2e/grouped-topmost-item.test.ts

@@ -11,7 +11,7 @@ test.describe('jagged grouped list', () => {
   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('[data-test-id=virtuoso-item-list] > div:nth-child(2)') as HTMLDivElement
+      const stickyItem = document.querySelector('[data-testid=virtuoso-item-list] > div:nth-child(2)') as HTMLDivElement
       return stickyItem.dataset['itemIndex']
     })
 

e2e/grouped.test.ts

@@ -10,7 +10,7 @@ test.describe('jagged grouped list', () => {
 
   test('renders correct sizing', async ({ page }) => {
     const [paddingTop, paddingBottom] = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]') as HTMLElement
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]') as HTMLElement
       return [listContainer.style.paddingTop, listContainer.style.paddingBottom]
     })
 
@@ -20,14 +20,14 @@ test.describe('jagged grouped list', () => {
 
   test('renders correct state when scrolled', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]') as HTMLElement
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]') as HTMLElement
       scroller.scrollTo({ top: 500 })
     })
 
     await page.waitForTimeout(100)
 
     const stickyItemIndex = await page.evaluate(() => {
-      const stickyItem = document.querySelector('[data-test-id=virtuoso-top-item-list] > div') as HTMLElement
+      const stickyItem = document.querySelector('[data-testid=virtuoso-top-item-list] > div') as HTMLElement
       return stickyItem.dataset['index']
     })
 
@@ -42,10 +42,10 @@ test.describe('scroll into view for grouped list', () => {
   })
 
   test('goes to correct location', async ({ page }) => {
-    await page.click('data-test-id=scroll-into-view-button')
+    await page.click('data-testid=scroll-into-view-button')
     await page.waitForTimeout(100)
 
-    const scrollTop = await page.locator('data-test-id=virtuoso-scroller').evaluate((element) => {
+    const scrollTop = await page.locator('data-testid=virtuoso-scroller').evaluate((element) => {
       return element.scrollTop
     })
 

e2e/hello.test.ts

@@ -10,15 +10,15 @@ test.describe('list with hundred items', () => {
 
   test('renders only 10 items', async ({ page }) => {
     const itemCount = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
       return listContainer.childElementCount
     })
     expect(itemCount).toBe(10)
   })
 
   test('fills in the scroller', async ({ page }) => {
     const scrollHeight = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       return scroller.scrollHeight
     })
     expect(scrollHeight).toBe(100 * 30)

e2e/initial-scroll-top.test.ts

@@ -10,7 +10,7 @@ test.describe('initial scroll top', () => {
   test('starts from 50px', async ({ page }) => {
     await page.waitForTimeout(100)
     const scrollTop = await page.evaluate(() => {
-      const scroller = document.querySelectorAll('[data-test-id=virtuoso-scroller]')[0]
+      const scroller = document.querySelectorAll('[data-testid=virtuoso-scroller]')[0]
       return scroller.scrollTop
     })
 

e2e/initial-topmost-item.test.ts

@@ -12,14 +12,14 @@ test.describe('jagged list with initial topmost item', () => {
   // first item size, which is 20px
   test('scrolls to the correct position', async ({ page }) => {
     const scrollTop = await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')
       return scroller!.scrollTop
     })
 
     expect(scrollTop).toBe(1200)
 
     const paddingTop = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]') as HTMLElement
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]') as HTMLElement
       return listContainer.style.paddingTop
     })
 
@@ -28,7 +28,7 @@ test.describe('jagged list with initial topmost item', () => {
 
   test('sticks the item to the top', async ({ page }) => {
     const firstChildIndex = await page.evaluate(() => {
-      const firstChild = document.querySelector('[data-test-id=virtuoso-item-list] > div') as HTMLElement
+      const firstChild = document.querySelector('[data-testid=virtuoso-item-list] > div') as HTMLElement
       return firstChild.dataset['index']
     })
 
@@ -41,21 +41,21 @@ test.describe('jagged list with initial topmost item', () => {
     await page.waitForTimeout(200)
 
     const scrollTop = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-scroller]') as HTMLElement
+      const listContainer = document.querySelector('[data-testid=virtuoso-scroller]') as HTMLElement
       return listContainer.scrollTop
     })
 
     expect(Math.ceil(scrollTop)).toBe(1390)
 
     const paddingTop = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]') as HTMLElement
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]') as HTMLElement
       return listContainer.style.paddingTop
     })
 
     expect(paddingTop).toBe('1390px')
 
     const lastChildIndex = await page.evaluate(() => {
-      const lastChildIndex = document.querySelector('[data-test-id=virtuoso-item-list] > div:last-child') as HTMLElement
+      const lastChildIndex = document.querySelector('[data-testid=virtuoso-item-list] > div:last-child') as HTMLElement
       return lastChildIndex.dataset['index']
     })
 

e2e/long-last-item.test.ts

@@ -10,22 +10,22 @@ test.describe('list with a long last item', () => {
 
   test('starts from the last item', async ({ page }) => {
     const paddingTop: string = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
       return (listContainer as HTMLElement).style.paddingTop
     })
     expect(paddingTop).toBe('7200px')
   })
 
   test('compensates on upwards scrolling correctly', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       scroller.scrollBy({ top: -2 })
     })
 
     await page.waitForTimeout(200)
 
     const scrollTop = await page.evaluate(() => {
-      return document.querySelector('[data-test-id=virtuoso-scroller]')!.scrollTop
+      return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop
     })
 
     // items are 800 and 100px tall.

e2e/prepend-items.test.ts

@@ -10,25 +10,25 @@ test.describe('list with prependable items', () => {
 
   async function getScrollTop(page: Page) {
     await page.waitForTimeout(100)
-    return page.locator('data-test-id=virtuoso-scroller').evaluate((el) => el.scrollTop)
+    return page.locator('data-testid=virtuoso-scroller').evaluate((el) => el.scrollTop)
   }
 
   test('keeps the location at where it should be (2 items)', async ({ page }) => {
     expect(await getScrollTop(page)).toBe(0)
 
-    await page.locator('data-test-id=prepend-2').click()
+    await page.locator('data-testid=prepend-2').click()
 
     expect(await getScrollTop(page)).toBe(2 * 55)
 
-    await page.locator('data-test-id=prepend-2').click()
+    await page.locator('data-testid=prepend-2').click()
 
     expect(await getScrollTop(page)).toBe(4 * 55)
   })
 
   test('keeps the location at where it should be (200 items)', async ({ page }) => {
     expect(await getScrollTop(page)).toBe(0)
 
-    await page.locator('data-test-id=prepend-200').click()
+    await page.locator('data-testid=prepend-200').click()
 
     expect(await getScrollTop(page)).toBe(200 * 55)
   })

e2e/reverse-taller-than-viewport.test.ts

@@ -15,7 +15,7 @@ test.describe('reverse taller than viewport', () => {
   })
 
   test('compensates for the tall 90th item', async ({ page }) => {
-    const scroller = page.locator('[data-test-id=virtuoso-scroller]')
+    const scroller = page.locator('[data-testid=virtuoso-scroller]')
     await scroller.evaluate((el) => el.scrollBy(0, -50))
     await page.waitForTimeout(300)
     const scrollTop = await scroller.evaluate((el) => el.scrollTop)

e2e/scroll-seek-placeholder.test.ts

@@ -10,7 +10,7 @@ test.describe('list with scroll seek placeholders', () => {
 
   test('renders placeholders when scrolled', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       setInterval(() => {
         scroller.scrollBy({ top: 30 })
       }, 10)
@@ -19,7 +19,7 @@ test.describe('list with scroll seek placeholders', () => {
     await page.waitForSelector('div[aria-label=placeholder]')
 
     const color = await page.evaluate(() => {
-      const placeholderItem = document.querySelector('[data-test-id=virtuoso-item-list] > div') as HTMLElement
+      const placeholderItem = document.querySelector('[data-testid=virtuoso-item-list] > div') as HTMLElement
       return placeholderItem.style.color
     })
 

e2e/scroll-to-index.test.ts

@@ -18,7 +18,7 @@ test.describe('scroll to index', () => {
     await page.waitForTimeout(100)
 
     const scrollTop = await page.evaluate(() => {
-      return document.querySelector('[data-test-id=virtuoso-scroller]')!.scrollTop
+      return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop
     })
 
     expect(scrollTop).toBe((30 - 7) * 20 + 7 * 30)
@@ -30,7 +30,7 @@ test.describe('scroll to index', () => {
     await page.waitForTimeout(100)
 
     const scrollTop = await page.evaluate(() => {
-      return document.querySelector('[data-test-id=virtuoso-scroller]')!.scrollTop
+      return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop
     })
 
     expect(scrollTop).toBe((30 - 7) * 20 + 7 * 30 + 5)
@@ -42,7 +42,7 @@ test.describe('scroll to index', () => {
     await page.waitForTimeout(100)
 
     const scrollTop = await page.evaluate(() => {
-      return document.querySelector('[data-test-id=virtuoso-scroller]')!.scrollTop
+      return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop
     })
     const rendered30s = 11
     expect(scrollTop).toBe((50 - rendered30s) * 20 + rendered30s * 30 - 300 / 2 + 20 / 2)
@@ -54,7 +54,7 @@ test.describe('scroll to index', () => {
     await page.waitForTimeout(100)
 
     const scrollTop = await page.evaluate(() => {
-      return document.querySelector('[data-test-id=virtuoso-scroller]')!.scrollTop
+      return document.querySelector('[data-testid=virtuoso-scroller]')!.scrollTop
     })
 
     const rendered30s = 14

e2e/test-case-446.test.ts

@@ -11,7 +11,7 @@ test.describe('list with a long last item', () => {
   // the float height was causing a load of item 9
   test('starts from item with index 10', async ({ page }) => {
     const firstItemIndex = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-item-list]')!
       return (listContainer as HTMLElement).firstElementChild!.getAttribute('data-item-index')
     })
     expect(firstItemIndex).toBe('10')