Skip to content

Commit 0558d90

Browse files
xiaoyatongxiaoyatong
authored
fix(infiniteLoading): 修改类名及demo (jdf2e#1818)
1 parent f149bb0 commit 0558d90

File tree

8 files changed

+309
-107
lines changed

8 files changed

+309
-107
lines changed

‎migrate-from-v1.md

+1
Original file line numberDiff line numberDiff line change
@@ -507,6 +507,7 @@ plugins: [
507507
- `pullTxt` 重命名为 `pullingText`，类型变更为 `ReactNode`
508508
- `loadTxt` 重命名为 `loadingText`，类型变更为 `ReactNode`
509509
- `containerId` 重命名为 `target`
510+
- 修订类名如 `top-box`、`bottom-box` 为 `nut-infinite-top-tips`、`nut-infinite-bottom-tips`
510511

511512
#### Notify
512513

‎src/packages/infiniteloading/__tests__/__snapshots__/infiniteloading.spec.tsx.snap

+180-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`infiniteloading base 1`] = `
3+
exports[`infiniteloading base 01 1`] = `
44
<div>
55
<div
66
class="nut-infiniteloading"
@@ -10,7 +10,7 @@ exports[`infiniteloading base 1`] = `
1010
style="height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
1111
>
1212
<div
13-
class="top-box"
13+
class="nut-infinite-top-tips"
1414
>
1515
松开刷新
1616
</div>
@@ -25,6 +25,182 @@ exports[`infiniteloading base 1`] = `
2525
</div>
2626
`;
2727

28+
exports[`infiniteloading base 02 1`] = `
29+
<div>
30+
<div
31+
class="nut-infiniteloading"
32+
>
33+
<div
34+
class="nut-infinite-top"
35+
style="height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
36+
>
37+
<div
38+
class="nut-infinite-top-tips"
39+
>
40+
松开刷新
41+
</div>
42+
</div>
43+
<div
44+
class="nut-infinite-container"
45+
>
46+
<li
47+
class="infiniteLi"
48+
>
49+
0
50+
</li>
51+
<li
52+
class="infiniteLi"
53+
>
54+
1
55+
</li>
56+
<li
57+
class="infiniteLi"
58+
>
59+
2
60+
</li>
61+
<li
62+
class="infiniteLi"
63+
>
64+
3
65+
</li>
66+
<li
67+
class="infiniteLi"
68+
>
69+
4
70+
</li>
71+
<li
72+
class="infiniteLi"
73+
>
74+
5
75+
</li>
76+
<li
77+
class="infiniteLi"
78+
>
79+
6
80+
</li>
81+
<li
82+
class="infiniteLi"
83+
>
84+
7
85+
</li>
86+
<li
87+
class="infiniteLi"
88+
>
89+
8
90+
</li>
91+
<li
92+
class="infiniteLi"
93+
>
94+
9
95+
</li>
96+
</div>
97+
<div
98+
class="nut-infinite-bottom"
99+
/>
100+
</div>
101+
</div>
102+
`;
103+
104+
exports[`pull base 01 1`] = `
105+
<div>
106+
<div
107+
class="nut-infiniteloading"
108+
>
109+
<div
110+
class="nut-infinite-top"
111+
style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
112+
>
113+
<div
114+
class="nut-infinite-top-tips"
115+
>
116+
下拉刷新
117+
</div>
118+
</div>
119+
<div
120+
class="nut-infinite-container"
121+
/>
122+
<div
123+
class="nut-infinite-bottom"
124+
/>
125+
</div>
126+
</div>
127+
`;
128+
129+
exports[`pull base 01 2`] = `
130+
<div>
131+
<div
132+
class="nut-infiniteloading"
133+
>
134+
<div
135+
class="nut-infinite-top"
136+
style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
137+
>
138+
<div
139+
class="nut-infinite-top-tips"
140+
>
141+
下拉刷新
142+
</div>
143+
</div>
144+
<div
145+
class="nut-infinite-container"
146+
/>
147+
<div
148+
class="nut-infinite-bottom"
149+
/>
150+
</div>
151+
</div>
152+
`;
153+
154+
exports[`pull base 03 1`] = `
155+
<div>
156+
<div
157+
class="nut-infiniteloading"
158+
>
159+
<div
160+
class="nut-infinite-top"
161+
style="height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
162+
>
163+
<div
164+
class="nut-infinite-top-tips"
165+
>
166+
下拉刷新
167+
</div>
168+
</div>
169+
<div
170+
class="nut-infinite-container"
171+
/>
172+
<div
173+
class="nut-infinite-bottom"
174+
/>
175+
</div>
176+
</div>
177+
`;
178+
179+
exports[`pull base 03 2`] = `
180+
<div>
181+
<div
182+
class="nut-infiniteloading"
183+
>
184+
<div
185+
class="nut-infinite-top"
186+
style="height: 0px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
187+
>
188+
<div
189+
class="nut-infinite-top-tips"
190+
>
191+
下拉刷新
192+
</div>
193+
</div>
194+
<div
195+
class="nut-infinite-container"
196+
/>
197+
<div
198+
class="nut-infinite-bottom"
199+
/>
200+
</div>
201+
</div>
202+
`;
203+
28204
exports[`pull base 1`] = `
29205
<div>
30206
<div
@@ -35,7 +211,7 @@ exports[`pull base 1`] = `
35211
style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
36212
>
37213
<div
38-
class="top-box"
214+
class="nut-infinite-top-tips"
39215
>
40216
松开刷新
41217
</div>
@@ -60,7 +236,7 @@ exports[`pull base 2`] = `
60236
style="height: 10px; transition: height 0.2s cubic-bezier(0.25,0.1,0.25,1);"
61237
>
62238
<div
63-
class="top-box"
239+
class="nut-infinite-top-tips"
64240
>
65241
松开刷新
66242
</div>

‎src/packages/infiniteloading/__tests__/infiniteloading.spec.tsx

+112-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { render } from '@testing-library/react'
2+
import { render, waitFor } from '@testing-library/react'
33
import { trigger, triggerDrag } from '@/utils/test/event'
44
import '@testing-library/jest-dom'
55

@@ -26,7 +26,63 @@ test('pull base', () => {
2626
expect(refresh).toBeCalled()
2727
})
2828

29+
test('pull base 01', async () => {
30+
const done = jest.fn()
31+
const refresh = (done: () => void) => {
32+
setTimeout(() => {
33+
done()
34+
}, 10)
35+
}
36+
const { container } = render(
37+
<InfiniteLoading pullRefresh pullingText="下拉刷新" onRefresh={refresh} />
38+
)
39+
const track = container.querySelector('.nut-infiniteloading')
40+
41+
// pulling
42+
trigger(track, 'touchstart', 0, 0)
43+
trigger(track, 'touchmove', 0, 20)
44+
expect(container).toMatchSnapshot()
45+
46+
// loading
47+
trigger(track, 'touchend', 0, 100)
48+
expect(container).toMatchSnapshot()
49+
50+
// still loading
51+
triggerDrag(track, 0, 100)
52+
refresh(done)
53+
await waitFor(() => expect(done).toHaveBeenCalled())
54+
})
55+
56+
test('pull base 03', () => {
57+
const refresh = jest.fn()
58+
const { container } = render(
59+
<InfiniteLoading pullRefresh pullingText="下拉刷新" onRefresh={refresh} />
60+
)
61+
const track = container.querySelector('.nut-infiniteloading')
62+
63+
// pulling
64+
trigger(track, 'touchstart', 0, 0)
65+
trigger(track, 'touchmove', 0, 0)
66+
expect(container).toMatchSnapshot()
67+
68+
// loading
69+
trigger(track, 'touchend', 0, 5)
70+
expect(container).toMatchSnapshot()
71+
72+
// still loading
73+
triggerDrag(track, 0, 5)
74+
expect(refresh).toHaveBeenCalledTimes(0)
75+
})
76+
2977
test('infiniteloading base', () => {
78+
const { container } = render(
79+
<ul className="infiniteUl" id="scroll">
80+
<InfiniteLoading target="scroll" />
81+
</ul>
82+
)
83+
})
84+
85+
test('infiniteloading base 01', async () => {
3086
const App = () => {
3187
const [refreshList, setRefreshList] = React.useState<string[]>([])
3288
const [refreshHasMore, setRefreshHasMore] = React.useState(true)
@@ -48,7 +104,7 @@ test('infiniteloading base', () => {
48104
for (let i = curLen; i < curLen + 10; i++) {
49105
refreshList.push(`${i}`)
50106
}
51-
if (refreshList.length >= 30) {
107+
if (refreshList.length >= 300) {
52108
setRefreshHasMore(false)
53109
} else {
54110
setRefreshList([...refreshList])
@@ -65,11 +121,60 @@ test('infiniteloading base', () => {
65121
)
66122
}
67123
const { container } = render(<App />)
68-
const track = container.querySelector('.nut-infiniteloading')
69-
trigger(track, 'touchstart', 0, 0)
70-
trigger(track, 'touchmove', 0, -100)
71-
trigger(track, 'touchend', 0, -800)
124+
await waitFor(() => expect(container).toMatchSnapshot())
125+
})
126+
127+
test('infiniteloading base 02', async () => {
128+
const done = jest.fn()
129+
const App = () => {
130+
const [refreshList, setRefreshList] = React.useState<string[]>([])
131+
const [refreshHasMore, setRefreshHasMore] = React.useState(true)
132+
133+
React.useEffect(() => {
134+
init()
135+
}, [])
136+
137+
const init = () => {
138+
for (let i = 0; i < 10; i++) {
139+
refreshList.push(`${i}`)
140+
}
141+
setRefreshList([...refreshList])
142+
}
72143

73-
triggerDrag(track, 0, -800)
144+
const refreshLoadMore = (done: () => void) => {
145+
setTimeout(() => {
146+
const curLen = refreshList.length
147+
for (let i = curLen; i < curLen + 10; i++) {
148+
refreshList.push(`${i}`)
149+
}
150+
if (refreshList.length >= 30) {
151+
setRefreshHasMore(false)
152+
} else {
153+
setRefreshList([...refreshList])
154+
}
155+
done()
156+
}, 500)
157+
}
158+
return (
159+
<InfiniteLoading
160+
loadMoreText="没有更多"
161+
onLoadMore={refreshLoadMore}
162+
hasMore={refreshHasMore}
163+
onScroll={done}
164+
>
165+
{refreshList.map((item, index) => {
166+
return (
167+
<li className="infiniteLi" key={index}>
168+
{item}
169+
</li>
170+
)
171+
})}
172+
</InfiniteLoading>
173+
)
174+
}
175+
const { container } = render(<App />)
176+
const track = container.querySelector('.nut-infiniteloading')
177+
trigger(track, 'scroll', 0, 800)
74178
expect(container).toMatchSnapshot()
179+
await waitFor(() => expect(done).toHaveBeenCalled())
75180
})

0 commit comments

Comments
 (0)