1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Make sure props.url is immutable (#4352)

* Make sure props.url is immutable

* Add test for immutable url

* Match object instead of string
This commit is contained in:
Tim Neutkens 2018-05-12 20:10:17 +02:00 committed by GitHub
parent 2c3f40600c
commit 449f38daa7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 3 deletions

View file

@ -93,18 +93,20 @@ const warnUrl = execOnce(() => {
})
export function createUrl (router) {
// This is to make sure we don't references the router object at call time
const {pathname, asPath, query} = router
return {
get query () {
warnUrl()
return router.query
return query
},
get pathname () {
warnUrl()
return router.pathname
return pathname
},
get asPath () {
warnUrl()
return router.asPath
return asPath
},
back: () => {
warnUrl()

View file

@ -0,0 +1,37 @@
import React from 'react'
import Link from 'next/link'
export default class UrlPropChange extends React.Component {
constructor (props) {
super(props)
this.state = {
previousUrl: {},
url: props.url
}
}
componentWillReceiveProps (nextProps) {
this.setState(() => {
return {
previousUrl: this.props.url,
url: nextProps.url
}
})
}
render () {
const {previousUrl, url} = this.state
return <div>
Current:
<div id='url-result'>
{JSON.stringify(url)}
</div>
<br /><br />
Previous:
<div id='previous-url-result'>
{JSON.stringify(previousUrl)}
</div>
<Link href='/nav/url-prop-change?added=yes'><a id='add-query'>Add querystring</a></Link>
</div>
}
}

View file

@ -33,6 +33,20 @@ export default (context, render) => {
})
})
describe('With url property', () => {
it('Should keep immutable pathname, asPath and query', async () => {
const browser = await webdriver(context.appPort, '/nav/url-prop-change')
await browser.elementByCss('#add-query').click()
const urlResult = await browser.elementByCss('#url-result').text()
const previousUrlResult = await browser.elementByCss('#previous-url-result').text()
expect(JSON.parse(urlResult)).toMatchObject({'query': {'added': 'yes'}, 'pathname': '/nav/url-prop-change', 'asPath': '/nav/url-prop-change?added=yes'})
expect(JSON.parse(previousUrlResult)).toMatchObject({'query': {}, 'pathname': '/nav/url-prop-change', 'asPath': '/nav/url-prop-change'})
browser.close()
})
})
describe('with <a/> tag inside the <Link />', () => {
it('should navigate the page', async () => {
const browser = await webdriver(context.appPort, '/nav/about')

View file

@ -52,6 +52,7 @@ describe('Basic Features', () => {
renderViaHTTP(context.appPort, '/nav/redirect'),
renderViaHTTP(context.appPort, '/nav/as-path'),
renderViaHTTP(context.appPort, '/nav/as-path-using-router'),
renderViaHTTP(context.appPort, '/nav/url-prop-change'),
renderViaHTTP(context.appPort, '/nested-cdm/index'),