Add test to check smooth scrolling after hydration

inokawa · Dec 24, 2024 · 02588cd · 02588cd
1 parent 896f776
commit 02588cd
Showing 1 changed file with 66 additions and 45 deletions.
diff --git a/e2e/VList.spec.ts b/e2e/VList.spec.ts
@@ -1240,51 +1240,72 @@ test.describe("RTL", () => {
   });
 });
 
-test("SSR and hydration", async ({ page }) => {
-  await page.goto(storyUrl("advanced-ssr--default"));
-
-  const component = await getScrollable(page);
-
-  const first = await getFirstItem(component);
-  const last = await getLastItem(component);
-
-  // check if SSR suceeded
-  const itemsSelector = '*[style*="top"]';
-  const items = component.locator(itemsSelector);
-  const initialLength = await items.count();
-  expect(initialLength).toBeGreaterThanOrEqual(30);
-  expect(await items.first().textContent()).toEqual("0");
-  expect(await items.last().textContent()).toEqual(String(initialLength - 1));
-  // check if items have styles for SSR
-  expect(await items.first().evaluate((e) => e.style.position)).not.toBe(
-    "absolute"
-  );
-
-  // should not change state with scroll before hydration
-  await component.evaluate((e) => e.scrollTo({ top: 1000 }));
-  expect(initialLength).toBe(await component.locator(itemsSelector).count());
-  await page.waitForTimeout(500);
-  await component.evaluate((e) => e.scrollTo({ top: 0 }));
-
-  // hydrate
-  await page.getByRole("button", { name: "hydrate" }).click();
-
-  // check if hydration suceeded but state is not changed
-  const hydratedItemsLength = await component.locator(itemsSelector).count();
-  expect(hydratedItemsLength).toBe(initialLength);
-  expect((await getFirstItem(component)).top).toBe(first.top);
-  expect((await getLastItem(component)).bottom).toBe(last.bottom);
-  // check if items do not have styles for SSR
-  expect(await items.first().evaluate((e) => e.style.position)).toBe(
-    "absolute"
-  );
-
-  // should change state with scroll after hydration
-  await component.evaluate((e) => e.scrollTo({ top: 1000 }));
-  await page.waitForTimeout(500);
-  expect(await component.locator(itemsSelector).count()).not.toBe(
-    initialLength
-  );
+test.describe("SSR and hydration", () => {
+  test("check if hydration works", async ({ page }) => {
+    await page.goto(storyUrl("advanced-ssr--default"));
+
+    const component = await getScrollable(page);
+
+    const first = await getFirstItem(component);
+    const last = await getLastItem(component);
+
+    // check if SSR suceeded
+    const itemsSelector = '*[style*="top"]';
+    const items = component.locator(itemsSelector);
+    const initialLength = await items.count();
+    expect(initialLength).toBeGreaterThanOrEqual(30);
+    expect(await items.first().textContent()).toEqual("0");
+    expect(await items.last().textContent()).toEqual(String(initialLength - 1));
+    // check if items have styles for SSR
+    expect(await items.first().evaluate((e) => e.style.position)).not.toBe(
+      "absolute"
+    );
+
+    // should not change state with scroll before hydration
+    await component.evaluate((e) => e.scrollTo({ top: 1000 }));
+    expect(initialLength).toBe(await component.locator(itemsSelector).count());
+    await page.waitForTimeout(500);
+    await component.evaluate((e) => e.scrollTo({ top: 0 }));
+
+    // hydrate
+    await page.getByRole("button", { name: "hydrate" }).click();
+
+    // check if hydration suceeded but state is not changed
+    const hydratedItemsLength = await component.locator(itemsSelector).count();
+    expect(hydratedItemsLength).toBe(initialLength);
+    expect((await getFirstItem(component)).top).toBe(first.top);
+    expect((await getLastItem(component)).bottom).toBe(last.bottom);
+    // check if items do not have styles for SSR
+    expect(await items.first().evaluate((e) => e.style.position)).toBe(
+      "absolute"
+    );
+
+    // should change state with scroll after hydration
+    await component.evaluate((e) => e.scrollTo({ top: 1000 }));
+    await page.waitForTimeout(500);
+    expect(await component.locator(itemsSelector).count()).not.toBe(
+      initialLength
+    );
+  });
+
+  test("check if smooth scrolling works after hydration", async ({ page }) => {
+    await page.goto(storyUrl("advanced-ssr--default"));
+
+    const component = await getScrollable(page);
+
+    // turn scroll to index with smooth on
+    await page.getByRole("checkbox", { name: "scroll to index" }).check();
+    await page.getByRole("checkbox", { name: "smooth" }).check();
+
+    // set scroll index to 100
+    await page.locator("input[type=number]").fill("100");
+
+    // hydrate
+    await page.getByRole("button", { name: "hydrate" }).click();
+
+    await page.waitForTimeout(1000);
+    expect((await getFirstItem(component)).text).toEqual("100");
+  });
 });
 
 test.describe("emulated iOS WebKit", () => {