From 461a5c9cc077484ebb49e2df9104303d9b5421e2 Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Thu, 18 Apr 2024 09:01:26 +0300
Subject: [PATCH] chore: more conventional test attribute

---
 e2e/collapsible-long-item.test.ts        |  6 +++---
 e2e/data.test.ts                         |  8 ++++----
 e2e/follow-output-loading-image.test.ts  |  4 ++--
 e2e/gap.test.ts                          |  4 ++--
 e2e/grid-gap.test.ts                     |  4 ++--
 e2e/grid-scroll-seek-placeholder.test.ts |  4 ++--
 e2e/grid.test.ts                         |  4 ++--
 e2e/grouped-topmost-item.test.ts         |  2 +-
 e2e/grouped.test.ts                      | 10 +++++-----
 e2e/hello.test.ts                        |  4 ++--
 e2e/initial-scroll-top.test.ts           |  2 +-
 e2e/initial-topmost-item.test.ts         | 12 ++++++------
 e2e/long-last-item.test.ts               |  6 +++---
 e2e/prepend-items.test.ts                |  8 ++++----
 e2e/reverse-taller-than-viewport.test.ts |  2 +-
 e2e/scroll-seek-placeholder.test.ts      |  4 ++--
 e2e/scroll-to-index.test.ts              |  8 ++++----
 e2e/test-case-446.test.ts                |  2 +-
 e2e/toggle.test.ts                       |  6 +++---
 e2e/top-items.test.ts                    | 10 +++++-----
 examples/follow-output-loading-image.tsx |  2 +-
 examples/group-scroll-into-view.tsx      |  4 ++--
 examples/grouped.tsx                     |  4 ++--
 examples/prepend-items.tsx               |  6 +++---
 examples/toggle.tsx                      |  2 +-
 25 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/e2e/collapsible-long-item.test.ts b/e2e/collapsible-long-item.test.ts
index a1e7c8e7f..95da8a461 100644
--- a/e2e/collapsible-long-item.test.ts
+++ b/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
     })
 
diff --git a/e2e/data.test.ts b/e2e/data.test.ts
index df95d485e..3d4830a7b 100644
--- a/e2e/data.test.ts
+++ b/e2e/data.test.ts
@@ -5,13 +5,13 @@ 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)
@@ -19,7 +19,7 @@ test.describe('list with hundred items', () => {
 
   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
     })
 
diff --git a/e2e/follow-output-loading-image.test.ts b/e2e/follow-output-loading-image.test.ts
index 57c994e95..edd53753a 100644
--- a/e2e/follow-output-loading-image.test.ts
+++ b/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)
   })
 })
diff --git a/e2e/gap.test.ts b/e2e/gap.test.ts
index 5e82e2bb2..69ddcf7e3 100644
--- a/e2e/gap.test.ts
+++ b/e2e/gap.test.ts
@@ -10,7 +10,7 @@ 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)
@@ -18,7 +18,7 @@ test.describe('list with hundred items', () => {
 
   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)
diff --git a/e2e/grid-gap.test.ts b/e2e/grid-gap.test.ts
index 22915906d..eeed1f783 100644
--- a/e2e/grid-gap.test.ts
+++ b/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)
diff --git a/e2e/grid-scroll-seek-placeholder.test.ts b/e2e/grid-scroll-seek-placeholder.test.ts
index e583e073e..99d0aea4b 100644
--- a/e2e/grid-scroll-seek-placeholder.test.ts
+++ b/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]
     })
diff --git a/e2e/grid.test.ts b/e2e/grid.test.ts
index 16833f4e1..27f575f2e 100644
--- a/e2e/grid.test.ts
+++ b/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)
diff --git a/e2e/grouped-topmost-item.test.ts b/e2e/grouped-topmost-item.test.ts
index b76f675ef..c2b311ff1 100644
--- a/e2e/grouped-topmost-item.test.ts
+++ b/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']
     })
 
diff --git a/e2e/grouped.test.ts b/e2e/grouped.test.ts
index 3e62d8785..b567464af 100644
--- a/e2e/grouped.test.ts
+++ b/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
     })
 
diff --git a/e2e/hello.test.ts b/e2e/hello.test.ts
index 7502783b6..cd39dc8e0 100644
--- a/e2e/hello.test.ts
+++ b/e2e/hello.test.ts
@@ -10,7 +10,7 @@ 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)
@@ -18,7 +18,7 @@ test.describe('list with hundred items', () => {
 
   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)
diff --git a/e2e/initial-scroll-top.test.ts b/e2e/initial-scroll-top.test.ts
index 95e765ad2..84051411f 100644
--- a/e2e/initial-scroll-top.test.ts
+++ b/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
     })
 
diff --git a/e2e/initial-topmost-item.test.ts b/e2e/initial-topmost-item.test.ts
index 33ff1a2ca..f966312ef 100644
--- a/e2e/initial-topmost-item.test.ts
+++ b/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']
     })
 
diff --git a/e2e/long-last-item.test.ts b/e2e/long-last-item.test.ts
index e00959767..49da781b4 100644
--- a/e2e/long-last-item.test.ts
+++ b/e2e/long-last-item.test.ts
@@ -10,7 +10,7 @@ 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')
@@ -18,14 +18,14 @@ test.describe('list with a long last item', () => {
 
   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.
diff --git a/e2e/prepend-items.test.ts b/e2e/prepend-items.test.ts
index 0f6e46c00..7b05fa36b 100644
--- a/e2e/prepend-items.test.ts
+++ b/e2e/prepend-items.test.ts
@@ -10,17 +10,17 @@ 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)
   })
@@ -28,7 +28,7 @@ test.describe('list with prependable items', () => {
   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)
   })
diff --git a/e2e/reverse-taller-than-viewport.test.ts b/e2e/reverse-taller-than-viewport.test.ts
index ca1763eb9..c7cf05436 100644
--- a/e2e/reverse-taller-than-viewport.test.ts
+++ b/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)
diff --git a/e2e/scroll-seek-placeholder.test.ts b/e2e/scroll-seek-placeholder.test.ts
index 01333b1ab..50b893653 100644
--- a/e2e/scroll-seek-placeholder.test.ts
+++ b/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
     })
 
diff --git a/e2e/scroll-to-index.test.ts b/e2e/scroll-to-index.test.ts
index c6a9caaf3..a9600d84f 100644
--- a/e2e/scroll-to-index.test.ts
+++ b/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
diff --git a/e2e/test-case-446.test.ts b/e2e/test-case-446.test.ts
index eee7a2fc2..6da53cf62 100644
--- a/e2e/test-case-446.test.ts
+++ b/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')
diff --git a/e2e/toggle.test.ts b/e2e/toggle.test.ts
index b17c3bdd0..83ba0cb32 100644
--- a/e2e/toggle.test.ts
+++ b/e2e/toggle.test.ts
@@ -10,14 +10,14 @@ 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) => Math.round(el.scrollTop))
+    return page.locator('data-testid=virtuoso-scroller').evaluate((el) => Math.round(el.scrollTop))
   }
 
   test('keeps the location at where it should be (toggle)', async ({ page }) => {
     const iniitalScrollTop = await getScrollTop(page)
-    await page.locator('data-test-id=toggle-last-two').click()
+    await page.locator('data-testid=toggle-last-two').click()
     expect(await getScrollTop(page)).toBe(iniitalScrollTop + 100)
-    await page.locator('data-test-id=toggle-last-two').click()
+    await page.locator('data-testid=toggle-last-two').click()
     expect(await getScrollTop(page)).toBe(iniitalScrollTop)
   })
 })
diff --git a/e2e/top-items.test.ts b/e2e/top-items.test.ts
index f677e9f0a..57ed842af 100644
--- a/e2e/top-items.test.ts
+++ b/e2e/top-items.test.ts
@@ -10,14 +10,14 @@ test.describe('jagged list with 2 top items', () => {
 
   test('stays at top at start', async ({ page }) => {
     const scrollTop = await page.evaluate(() => {
-      const listContainer = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const listContainer = document.querySelector('[data-testid=virtuoso-scroller]')!
       return listContainer.scrollTop
     })
 
     expect(scrollTop).toBe(0)
 
     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
     })
 
@@ -26,7 +26,7 @@ test.describe('jagged list with 2 top items', () => {
 
   test('renders correct amount of items', async ({ page }) => {
     const childElementCount = 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 || 0
     })
     expect(childElementCount).toBe(9)
@@ -34,14 +34,14 @@ test.describe('jagged list with 2 top items', () => {
 
   test('renders the full list correctly', async ({ page }) => {
     await page.evaluate(() => {
-      const scroller = document.querySelector('[data-test-id=virtuoso-scroller]')!
+      const scroller = document.querySelector('[data-testid=virtuoso-scroller]')!
       scroller.scrollTo({ top: 2000 })
     })
 
     await page.waitForTimeout(100)
 
     const firstChildIndex: string = 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']!
     })
 
diff --git a/examples/follow-output-loading-image.tsx b/examples/follow-output-loading-image.tsx
index a1b440dd3..abc2b7c3a 100644
--- a/examples/follow-output-loading-image.tsx
+++ b/examples/follow-output-loading-image.tsx
@@ -35,7 +35,7 @@ export function Example() {
   return (
     <div ref={ref}>
       <div>
-        <button data-test-id="add-image" onClick={() => setCount((count) => count + 1)}>
+        <button data-testid="add-image" onClick={() => setCount((count) => count + 1)}>
           Append Image
         </button>{' '}
         |{' '}
diff --git a/examples/group-scroll-into-view.tsx b/examples/group-scroll-into-view.tsx
index 2b51967c3..18feeeb9a 100644
--- a/examples/group-scroll-into-view.tsx
+++ b/examples/group-scroll-into-view.tsx
@@ -11,10 +11,10 @@ export function Example() {
   }, [])
   return (
     <div>
-      <button data-test-id="scroll-into-view-button" onClick={() => virutoso.current.scrollIntoView({ index: 9 })}>
+      <button data-testid="scroll-into-view-button" onClick={() => virutoso.current.scrollIntoView({ index: 9 })}>
         Scroll index 10 into view
       </button>
-      <button data-test-id="scroll-to-group" onClick={() => virutoso.current.scrollIntoView({ groupIndex: ++g.current })}>
+      <button data-testid="scroll-to-group" onClick={() => virutoso.current.scrollIntoView({ groupIndex: ++g.current })}>
         Scroll to next group
       </button>
       <GroupedVirtuoso
diff --git a/examples/grouped.tsx b/examples/grouped.tsx
index 32e41bb17..1c3c67c44 100644
--- a/examples/grouped.tsx
+++ b/examples/grouped.tsx
@@ -56,10 +56,10 @@ export function Unshifting() {
 
   return (
     <div>
-      <button data-test-id="prepend-10" onClick={prepend(10)}>
+      <button data-testid="prepend-10" onClick={prepend(10)}>
         Prepend 10 Items
       </button>
-      <button data-test-id="shift-2" onClick={prepend(-2)}>
+      <button data-testid="shift-2" onClick={prepend(-2)}>
         Shift 2 Items
       </button>
 
diff --git a/examples/prepend-items.tsx b/examples/prepend-items.tsx
index 3adb0383e..411197aa8 100644
--- a/examples/prepend-items.tsx
+++ b/examples/prepend-items.tsx
@@ -27,13 +27,13 @@ export function Example() {
   )
   return (
     <div>
-      <button data-test-id="prepend-2" onClick={prepend(2)}>
+      <button data-testid="prepend-2" onClick={prepend(2)}>
         Prepend 2 Items
       </button>
-      <button data-test-id="shift-2" onClick={prepend(-2)}>
+      <button data-testid="shift-2" onClick={prepend(-2)}>
         Shift 2 Items
       </button>
-      <button data-test-id="prepend-200" onClick={prepend(200)}>
+      <button data-testid="prepend-200" onClick={prepend(200)}>
         Prepend 200 Items
       </button>
       <Virtuoso totalCount={count} firstItemIndex={firstItemIndex} itemContent={itemContent} style={style} />
diff --git a/examples/toggle.tsx b/examples/toggle.tsx
index f28c2b820..a0d63f9d4 100644
--- a/examples/toggle.tsx
+++ b/examples/toggle.tsx
@@ -28,7 +28,7 @@ export function Example() {
   return (
     <div>
       <button
-        data-test-id="toggle-last-two"
+        data-testid="toggle-last-two"
         onClick={() => {
           toggleSize(99)
           toggleSize(98)