Created
August 10, 2020 08:14
-
-
Save alexaivars/a6a71d249b0fb5e057225281b3156b6e to your computer and use it in GitHub Desktop.
location.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { render } from 'testUtils'; | |
import { useQueryParam, useHistory } from './location'; | |
describe('location hooks', () => { | |
describe('useHistory', () => { | |
it('changes path without loosing query parameteras', () => { | |
const HookWrapper = () => { | |
const { push } = useHistory({ keepQuery: true }); | |
React.useEffect(() => { | |
push('/foo'); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=waldo&baz=qux', | |
}); | |
expect(history.location.pathname).toBe('/foo'); | |
expect(history.location.search).toBe('?foo=waldo&baz=qux'); | |
}); | |
it('changes location without loosing query parameteras', () => { | |
const HookWrapper = () => { | |
const { push } = useHistory({ keepQuery: true }); | |
React.useEffect(() => { | |
push({ pathname: '/foo' }); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=waldo&baz=qux', | |
}); | |
expect(history.location.pathname).toBe('/foo'); | |
expect(history.location.search).toBe('?foo=waldo&baz=qux'); | |
}); | |
it('replaces path without loosing query parameteras', () => { | |
const HookWrapper = () => { | |
const { replace } = useHistory({ keepQuery: true }); | |
React.useEffect(() => { | |
replace('/foo'); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=waldo&baz=qux', | |
}); | |
expect(history.location.pathname).toBe('/foo'); | |
expect(history.location.search).toBe('?foo=waldo&baz=qux'); | |
}); | |
it('replaces search if specified', () => { | |
const HookWrapper = () => { | |
const { push } = useHistory({ keepQuery: true }); | |
React.useEffect(() => { | |
push({ pathname: '/foo', search: '?bar=baz' }); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=waldo&baz=qux', | |
}); | |
expect(history.location.pathname).toBe('/foo'); | |
expect(history.location.search).toBe('?bar=baz'); | |
}); | |
}); | |
describe('useQueryParam', () => { | |
it('returns the current location parameter value', () => { | |
let param; | |
const HookWrapper = () => { | |
[param] = useQueryParam('foo'); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { route: '/?foo=bar' }); | |
expect(param).toBe('bar'); | |
}); | |
it('updates the current location parameter', () => { | |
let param, setParam; | |
const HookWrapper = () => { | |
[param, setParam] = useQueryParam('foo'); | |
React.useEffect(() => { | |
setParam('waldo'); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=bar&baz=qux', | |
}); | |
expect(history.location.search).toBe('?foo=waldo&baz=qux'); | |
}); | |
it('updates the current location once for same value', () => { | |
let param, setParam; | |
const HookWrapper = () => { | |
[param, setParam] = useQueryParam('foo'); | |
React.useEffect(() => { | |
setParam('waldo'); | |
setParam('waldo'); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=bar&baz=qux', | |
}); | |
expect(history.length).toBe(2); | |
}); | |
it('supports different value types', () => { | |
let param, setParam; | |
const HookWrapper = () => { | |
[param, setParam] = useQueryParam('foo'); | |
React.useEffect(() => { | |
setParam(1); | |
setParam('bar'); | |
setParam(['bar']); | |
setParam({ bar: 'baz' }); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />); | |
expect(history.entries.slice(1).map(({ search }) => unescape(search))) | |
.toMatchInlineSnapshot(` | |
Array [ | |
"?foo=1", | |
"?foo=bar", | |
"?foo[]=bar", | |
"?foo[bar]=baz", | |
] | |
`); | |
}); | |
it('updates the current location once for non primitive values', () => { | |
let param, setParam; | |
const HookWrapper = () => { | |
[param, setParam] = useQueryParam('foo'); | |
React.useEffect(() => { | |
setParam(['bar', 'baz']); | |
setParam(['bar', 'baz']); | |
}, []); | |
return null; | |
}; | |
const { history } = render(<HookWrapper />, { | |
route: '/?foo=bar&baz=qux', | |
}); | |
expect(unescape(history.location.search)).toBe( | |
'?foo[]=bar&foo[]=baz&baz=qux', | |
); | |
expect(history.length).toBe(2); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment