Add option arg to changeState when onlyAHashChange (#10003)

* added option to changeState when onlyAHashChange

* added integration tests

* segregated tests because they caused other tests to fail

Co-authored-by: JJ Kasper <jj@jjsweb.site>

packages/next/next-server/lib/router/router.ts

@@ -299,7 +299,7 @@ export default class Router implements BaseRouter {
       if (!options._h && this.onlyAHashChange(as)) {
         this.asPath = as
         Router.events.emit('hashChangeStart', as)
-        this.changeState(method, url, addBasePath(as))
+        this.changeState(method, url, addBasePath(as), options)
         this.scrollToHash(as)
         Router.events.emit('hashChangeComplete', as)
         return resolve(true)

test/integration/client-navigation/pages/nav/hash-changes-with-state.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import Router from 'next/router'
+
+let count = 0
+
+export default class SelfReload extends Component {
+  static getInitialProps({ res }) {
+    if (res) return { count: 0 }
+    count += 1
+
+    return { count }
+  }
+
+  handleAClick = () => {
+    Router.push(
+      '/nav/hash-changes-with-state',
+      '/nav/hash-changes-with-state#',
+      {
+        historyCount: (window.history.state.options.historyCount || 0) + 1,
+        shallowHistoryCount: window.history.state.options.shallowHistoryCount,
+      }
+    )
+  }
+
+  handleAShallowClick = () => {
+    Router.push(
+      '/nav/hash-changes-with-state#',
+      '/nav/hash-changes-with-state#',
+      {
+        shallow: true,
+        historyCount: window.history.state.options.historyCount,
+        shallowHistoryCount:
+          (window.history.state.options.shallowHistoryCount || 0) + 1,
+      }
+    )
+  }
+
+  render() {
+    return (
+      <div id="hash-changes-page">
+        <p>COUNT: {this.props.count}</p>
+        <a id="increment-history-count" onClick={this.handleAClick}>
+          Increment history count
+        </a>
+        <div id="history-count">
+          HISTORY COUNT:{' '}
+          {typeof window !== 'undefined' &&
+            window.history.state.options.historyCount}
+        </div>
+        <a
+          id="increment-shallow-history-count"
+          onClick={this.handleAShallowClick}
+        >
+          Increment shallow history count
+        </a>
+        <div id="shallow-history-count">
+          SHALLOW HISTORY COUNT:{' '}
+          {typeof window !== 'undefined' &&
+            window.history.state.options.shallowHistoryCount}
+        </div>
+      </div>
+    )
+  }
+}

test/integration/client-navigation/test/index.test.js

@@ -556,19 +556,51 @@ describe('Client Navigation', () => {
         await browser.close()
       })
     })
+  })
 
-    describe('when hash changed to a different hash', () => {
-      it('should not run getInitialProps', async () => {
-        const browser = await webdriver(context.appPort, '/nav/hash-changes')
+  describe('with hash changes with state', () => {
+    describe('when passing state via hash change', () => {
+      it('should increment the history state counter', async () => {
+        const browser = await webdriver(
+          context.appPort,
+          '/nav/hash-changes-with-state#'
+        )
 
-        const counter = await browser
-          .elementByCss('#via-a')
+        const historyCount = await browser
+          .elementByCss('#increment-history-count')
           .click()
-          .elementByCss('#via-link')
+          .elementByCss('#increment-history-count')
           .click()
-          .elementByCss('p')
+          .elementByCss('div#history-count')
+          .text()
+
+        expect(historyCount).toBe('HISTORY COUNT: 2')
+
+        const counter = await browser.elementByCss('p').text()
+
+        expect(counter).toBe('COUNT: 2')
+
+        await browser.close()
+      })
+
+      it('should increment the shallow history state counter', async () => {
+        const browser = await webdriver(
+          context.appPort,
+          '/nav/hash-changes-with-state#'
+        )
+
+        const historyCount = await browser
+          .elementByCss('#increment-shallow-history-count')
+          .click()
+          .elementByCss('#increment-shallow-history-count')
+          .click()
+          .elementByCss('div#shallow-history-count')
           .text()
 
+        expect(historyCount).toBe('SHALLOW HISTORY COUNT: 2')
+
+        const counter = await browser.elementByCss('p').text()
+
         expect(counter).toBe('COUNT: 0')
 
         await browser.close()