scroll restoration bug fix test add

test/e2e/reload-scroll-backforward-restoration/index.test.ts

@@ -0,0 +1,145 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { check } from 'next-test-utils'
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+
+describe('reload-scroll-back-restoration', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(join(__dirname, 'pages')),
+        'next.config.js': new FileRef(join(__dirname, 'next.config.js')),
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should restore the scroll position on navigating back', async () => {
+    const browser = await webdriver(next.url, '/0')
+    await browser.eval(() => document.querySelector('#link').scrollIntoView())
+
+    // check browser restoration setting
+    const scrollRestoration = await browser.eval(
+      () => window.history.scrollRestoration
+    )
+    expect(scrollRestoration).toBe('manual')
+
+    const scrollPositionMemories: Array<{ x: number; y: number }> = []
+    scrollPositionMemories.push({
+      x: Math.floor(await browser.eval(() => window.scrollX)),
+      y: Math.floor(await browser.eval(() => window.scrollY)),
+    })
+
+    // check initial value
+    expect(scrollPositionMemories[0].x).not.toBe(0)
+    expect(scrollPositionMemories[0].y).not.toBe(0)
+
+    await browser.eval(`window.next.router.push('/1')`)
+    await browser.eval(() => document.querySelector('#link').scrollIntoView())
+    scrollPositionMemories.push({
+      x: Math.floor(await browser.eval(() => window.scrollX)),
+      y: Math.floor(await browser.eval(() => window.scrollY)),
+    })
+    await browser.eval(`window.next.router.push('/2')`)
+
+    // check restore value on history index: 1
+    await browser.eval(() => window.history.back())
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /hydrated/
+    )
+
+    expect(scrollPositionMemories[1].x).toBe(
+      Math.floor(await browser.eval(() => window.scrollX))
+    )
+    expect(scrollPositionMemories[1].y).toBe(
+      Math.floor(await browser.eval(() => window.scrollY))
+    )
+
+    await browser.eval(`window.next.router.reload()`)
+
+    // check restore value on history index: 0
+    await browser.eval(() => window.history.back())
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /hydrated/
+    )
+
+    expect(scrollPositionMemories[0].x).toBe(
+      Math.floor(await browser.eval(() => window.scrollX))
+    )
+    expect(scrollPositionMemories[0].y).toBe(
+      Math.floor(await browser.eval(() => window.scrollY))
+    )
+  })
+
+  it('should restore the scroll position on navigating forward', async () => {
+    const browser = await webdriver(next.url, '/0')
+    await browser.eval(() => document.querySelector('#link').scrollIntoView())
+
+    // check browser restoration setting
+    const scrollRestoration = await browser.eval(
+      () => window.history.scrollRestoration
+    )
+    expect(scrollRestoration).toBe('manual')
+
+    const scrollPositionMemories: Array<{ x: number; y: number }> = []
+    scrollPositionMemories.push({
+      x: Math.floor(await browser.eval(() => window.scrollX)),
+      y: Math.floor(await browser.eval(() => window.scrollY)),
+    })
+
+    // check initial value
+    expect(scrollPositionMemories[0].x).not.toBe(0)
+    expect(scrollPositionMemories[0].y).not.toBe(0)
+
+    await browser.eval(`window.next.router.push('/1')`)
+    await browser.eval(() => document.querySelector('#link').scrollIntoView())
+    scrollPositionMemories.push({
+      x: Math.floor(await browser.eval(() => window.scrollX)),
+      y: Math.floor(await browser.eval(() => window.scrollY)),
+    })
+    await browser.eval(`window.next.router.push('/2')`)
+    await browser.eval(() => document.querySelector('#link').scrollIntoView())
+    scrollPositionMemories.push({
+      x: Math.floor(await browser.eval(() => window.scrollX)),
+      y: Math.floor(await browser.eval(() => window.scrollY)),
+    })
+
+    // check restore value on history index: 1
+    await browser.eval(() => window.history.back())
+    await browser.eval(() => window.history.back())
+    await browser.eval(() => window.history.forward())
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /hydrated/
+    )
+
+    expect(scrollPositionMemories[1].x).toBe(
+      Math.floor(await browser.eval(() => window.scrollX))
+    )
+    expect(scrollPositionMemories[1].y).toBe(
+      Math.floor(await browser.eval(() => window.scrollY))
+    )
+
+    await browser.eval(`window.next.router.reload()`)
+
+    // check restore value on history index: 2
+    await browser.eval(() => window.history.forward())
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /hydrated/
+    )
+
+    expect(scrollPositionMemories[2].x).toBe(
+      Math.floor(await browser.eval(() => window.scrollX))
+    )
+    expect(scrollPositionMemories[2].y).toBe(
+      Math.floor(await browser.eval(() => window.scrollY))
+    )
+  })
+})

test/e2e/reload-scroll-backforward-restoration/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    scrollRestoration: true,
+  },
+}

test/e2e/reload-scroll-backforward-restoration/pages/[id].js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+
+const Page = ({ id }) => {
+  const [hydrate, setHydrate] = useState(false)
+  useEffect(() => {
+    setHydrate(true)
+  }, [hydrate, setHydrate])
+
+  return (
+    <>
+      <div
+        style={{
+          width: 10000,
+          height: 10000,
+          background: 'blue',
+        }}
+      />
+      <p>{hydrate ? 'hydrated' : 'loading'}</p>
+      <Link href={`/${id + 1}`}>
+        <a
+          id="link"
+          style={{
+            marginLeft: 5000,
+            width: 95000,
+            display: 'block',
+          }}
+        >
+          next page
+        </a>
+      </Link>
+      <div id="end-el">hello, world</div>
+    </>
+  )
+}
+
+export default Page
+
+export const getServerSideProps = (context) => {
+  const { id = 0 } = context.query
+  return {
+    props: {
+      id,
+    },
+  }
+}