From 18e47cb5104c5f5ad165fdffec519ebd704a48a5 Mon Sep 17 00:00:00 2001 From: Richard Scotten Date: Wed, 8 Jan 2020 20:29:23 -0800 Subject: [PATCH 1/3] added option to changeState when onlyAHashChange --- packages/next/next-server/lib/router/router.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts index 70787fbdd5bdd26..698ba15d238aad8 100644 --- a/packages/next/next-server/lib/router/router.ts +++ b/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) From 8d445811221fc610e4702a03650e32949305dad6 Mon Sep 17 00:00:00 2001 From: Richard Scotten Date: Thu, 16 Jan 2020 17:49:50 -0800 Subject: [PATCH 2/3] added integration tests --- .../pages/nav/hash-changes.js | 36 ++++++++++++++++ .../client-navigation/test/index.test.js | 42 +++++++++++++++++++ 2 files changed, 78 insertions(+) diff --git a/test/integration/client-navigation/pages/nav/hash-changes.js b/test/integration/client-navigation/pages/nav/hash-changes.js index 66d65cf0956ed69..4d9466d2ef0b7a5 100644 --- a/test/integration/client-navigation/pages/nav/hash-changes.js +++ b/test/integration/client-navigation/pages/nav/hash-changes.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import Link from 'next/link' +import Router from 'next/router' let count = 0 @@ -11,6 +12,22 @@ export default class SelfReload extends Component { return { count } } + handleAClick = () => { + Router.push('/nav/hash-changes', '/nav/hash-changes#', { + historyCount: (window.history.state.options.historyCount || 0) + 1, + shallowHistoryCount: window.history.state.options.shallowHistoryCount, + }) + } + + handleAShallowClick = () => { + Router.push('/nav/hash-changes#', '/nav/hash-changes#', { + shallow: true, + historyCount: window.history.state.options.historyCount, + shallowHistoryCount: + (window.history.state.options.shallowHistoryCount || 0) + 1, + }) + } + render() { return (
@@ -33,6 +50,25 @@ export default class SelfReload extends Component { Go to name item 400

COUNT: {this.props.count}

+ + Increment history count + +
+ HISTORY COUNT:{' '} + {typeof window !== 'undefined' && + window.history.state.options.historyCount} +
+ + Increment shallow history count + +
+ SHALLOW HISTORY COUNT:{' '} + {typeof window !== 'undefined' && + window.history.state.options.shallowHistoryCount} +
{Array.from({ length: 500 }, (x, i) => i + 1).map(i => { return (
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index 167460942606c6b..aa8216037a5fb17 100644 --- a/test/integration/client-navigation/test/index.test.js +++ b/test/integration/client-navigation/test/index.test.js @@ -574,6 +574,48 @@ describe('Client Navigation', () => { await browser.close() }) }) + + describe('when passing state via hash change', () => { + it('should increment the history state counter', async () => { + const browser = await webdriver(context.appPort, '/nav/hash-changes#') + + const historyCount = await browser + .elementByCss('#increment-history-count') + .click() + .elementByCss('#increment-history-count') + .click() + .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#') + + 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() + }) + }) }) describe('with shallow routing', () => { From 70a2ec01ed419e53775972005c834ddc2d2b6acb Mon Sep 17 00:00:00 2001 From: Richard Scotten Date: Thu, 16 Jan 2020 22:06:07 -0800 Subject: [PATCH 3/3] segregated tests because they caused other tests to fail --- .../pages/nav/hash-changes-with-state.js | 64 +++++++++++++++++++ .../pages/nav/hash-changes.js | 36 ----------- .../client-navigation/test/index.test.js | 30 +++------ 3 files changed, 74 insertions(+), 56 deletions(-) create mode 100644 test/integration/client-navigation/pages/nav/hash-changes-with-state.js diff --git a/test/integration/client-navigation/pages/nav/hash-changes-with-state.js b/test/integration/client-navigation/pages/nav/hash-changes-with-state.js new file mode 100644 index 000000000000000..91552e1b29d7225 --- /dev/null +++ b/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 ( +
+

COUNT: {this.props.count}

+ + Increment history count + +
+ HISTORY COUNT:{' '} + {typeof window !== 'undefined' && + window.history.state.options.historyCount} +
+ + Increment shallow history count + +
+ SHALLOW HISTORY COUNT:{' '} + {typeof window !== 'undefined' && + window.history.state.options.shallowHistoryCount} +
+
+ ) + } +} diff --git a/test/integration/client-navigation/pages/nav/hash-changes.js b/test/integration/client-navigation/pages/nav/hash-changes.js index 4d9466d2ef0b7a5..66d65cf0956ed69 100644 --- a/test/integration/client-navigation/pages/nav/hash-changes.js +++ b/test/integration/client-navigation/pages/nav/hash-changes.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import Link from 'next/link' -import Router from 'next/router' let count = 0 @@ -12,22 +11,6 @@ export default class SelfReload extends Component { return { count } } - handleAClick = () => { - Router.push('/nav/hash-changes', '/nav/hash-changes#', { - historyCount: (window.history.state.options.historyCount || 0) + 1, - shallowHistoryCount: window.history.state.options.shallowHistoryCount, - }) - } - - handleAShallowClick = () => { - Router.push('/nav/hash-changes#', '/nav/hash-changes#', { - shallow: true, - historyCount: window.history.state.options.historyCount, - shallowHistoryCount: - (window.history.state.options.shallowHistoryCount || 0) + 1, - }) - } - render() { return (
@@ -50,25 +33,6 @@ export default class SelfReload extends Component { Go to name item 400

COUNT: {this.props.count}

- - Increment history count - -
- HISTORY COUNT:{' '} - {typeof window !== 'undefined' && - window.history.state.options.historyCount} -
- - Increment shallow history count - -
- SHALLOW HISTORY COUNT:{' '} - {typeof window !== 'undefined' && - window.history.state.options.shallowHistoryCount} -
{Array.from({ length: 500 }, (x, i) => i + 1).map(i => { return (
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index aa8216037a5fb17..c236e8bd249ac66 100644 --- a/test/integration/client-navigation/test/index.test.js +++ b/test/integration/client-navigation/test/index.test.js @@ -556,28 +556,15 @@ 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') - - const counter = await browser - .elementByCss('#via-a') - .click() - .elementByCss('#via-link') - .click() - .elementByCss('p') - .text() - - expect(counter).toBe('COUNT: 0') - - await browser.close() - }) - }) - + 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#') + const browser = await webdriver( + context.appPort, + '/nav/hash-changes-with-state#' + ) const historyCount = await browser .elementByCss('#increment-history-count') @@ -597,7 +584,10 @@ describe('Client Navigation', () => { }) it('should increment the shallow history state counter', async () => { - const browser = await webdriver(context.appPort, '/nav/hash-changes#') + const browser = await webdriver( + context.appPort, + '/nav/hash-changes-with-state#' + ) const historyCount = await browser .elementByCss('#increment-shallow-history-count')