-
Notifications
You must be signed in to change notification settings - Fork 8
/
RecoilURLSyncTransitNext.test.tsx
115 lines (96 loc) · 2.92 KB
/
RecoilURLSyncTransitNext.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { string } from '@recoiljs/refine'
import {
fireEvent,
Matcher,
MatcherOptions,
render,
waitFor,
} from '@testing-library/react'
import mockRouter from 'next-router-mock'
import { ReactNode } from 'react'
import { act } from 'react-dom/test-utils'
import { atom, RecoilRoot, useRecoilState } from 'recoil'
import { syncEffect } from 'recoil-sync'
import { RecoilURLSyncTransitNext } from './RecoilURLSyncTransitNext'
jest.mock('next/router', () => require('next-router-mock'))
let atomIndex = 0
const nextKey = () => `RecoilURLSyncJSONNext/test/${atomIndex++}`
const App: React.FC<{ children: ReactNode }> = ({ children }) => (
<RecoilRoot>
<RecoilURLSyncTransitNext location={{ part: 'queryParams' }}>
{children}
</RecoilURLSyncTransitNext>
</RecoilRoot>
)
describe('<RecoilURLSyncTransitNext />', () => {
beforeEach(() => {
history.replaceState({ key: 'test1' }, '')
mockRouter.setCurrentUrl('/')
})
describe('use atom()', () => {
const testStringState = atom<string>({
key: nextKey(),
default: 'Foo',
effects: [syncEffect({ refine: string() })],
})
const Child = () => {
const [foo, setFoo] = useRecoilState(testStringState)
return (
<div>
<button data-testid="foo" onClick={() => setFoo((v) => v + 'Foo')}>
{foo}
</button>
</div>
)
}
describe('Initial Render', () => {
let getByTestId: (
id: Matcher,
options?: MatcherOptions | undefined
) => HTMLElement
beforeEach(() => {
const screen = render(
<App>
<Child />
</App>
)
getByTestId = screen.getByTestId
})
it('should be rendered with default value', async () => {
expect(getByTestId('foo').textContent).toBe('Foo')
})
describe('then, update state', () => {
let urlPath: string
beforeEach(() => {
fireEvent.click(getByTestId('foo'))
})
it('should be rendered with updated value', async () => {
await waitFor(() =>
expect(getByTestId('foo').textContent).toBe('FooFoo')
)
})
describe('then, navigate (pushstate)', () => {
beforeEach(() => {
urlPath = mockRouter.asPath // save current URL before push()
act(() => {
mockRouter.push('/next')
})
})
it('should be restored default value', async () => {
expect(getByTestId('foo').textContent).toBe('Foo')
})
describe('then, backward', () => {
beforeEach(() => {
act(() => {
mockRouter.push(urlPath) // back() is not supported yet
})
})
it('should be restored updated value', async () => {
expect(getByTestId('foo').textContent).toBe('FooFoo')
})
})
})
})
})
})
})