Skip to content

Commit e6e0a20

Browse files
xiaoyatongxiaoyatong
committed
test: add tests
1 parent c79fd17 commit e6e0a20

File tree

3 files changed

+45
-50
lines changed

3 files changed

+45
-50
lines changed

‎src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,23 @@ exports[`backtop custom test 1`] = `
1212
<div
1313
class="nut-hoverbutton-item-container"
1414
>
15+
<svg
16+
aria-labelledby="Top"
17+
class="nut-icon nut-icon-Top "
18+
role="presentation"
19+
viewBox="0 0 1024 1024"
20+
xmlns="http://www.w3.org/2000/svg"
21+
>
22+
<path
23+
d="M128 0a42.67 42.67 0 1 0 0 85.33h768A42.67 42.67 0 1 0 896 0zm391.21 173.42a10.88 10.88 0 0 0-14.42 0L3.61 619.67a10.71 10.71 0 0 0 7.21 18.67h241.34v257.11c0 71 58.05 128.55 129.64 128.55h260.4c71.59 0 129.64-57.56 129.64-128.55V638.34h241.34a10.71 10.71 0 0 0 7.21-18.67zM338.6 895.45V552.64H208.21L512 282.15l303.77 270.49H685.42v342.83c0 23.64-19.37 42.84-43.22 42.83H381.8c-23.85 0-43.2-19.2-43.2-42.85"
24+
fill="currentColor"
25+
fill-opacity="0.9"
26+
/>
27+
</svg>
1528
<div
16-
class="backtop-demo"
17-
style="display: flex; flex-direction: column; align-items: center;"
29+
style="font-size: 12px;"
1830
>
19-
<svg
20-
aria-labelledby="Top"
21-
class="nut-icon nut-icon-Top nut-backtop-main"
22-
role="presentation"
23-
style="width: 12px; height: 12px;"
24-
viewBox="0 0 1024 1024"
25-
xmlns="http://www.w3.org/2000/svg"
26-
>
27-
<path
28-
d="M128 0a42.67 42.67 0 1 0 0 85.33h768A42.67 42.67 0 1 0 896 0zm391.21 173.42a10.88 10.88 0 0 0-14.42 0L3.61 619.67a10.71 10.71 0 0 0 7.21 18.67h241.34v257.11c0 71 58.05 128.55 129.64 128.55h260.4c71.59 0 129.64-57.56 129.64-128.55V638.34h241.34a10.71 10.71 0 0 0 7.21-18.67zM338.6 895.45V552.64H208.21L512 282.15l303.77 270.49H685.42v342.83c0 23.64-19.37 42.84-43.22 42.83H381.8c-23.85 0-43.2-19.2-43.2-42.85"
29-
fill="currentColor"
30-
fill-opacity="0.9"
31-
/>
32-
</svg>
33-
<div
34-
style="font-size: 12px;"
35-
>
36-
顶部
37-
</div>
31+
顶部
3832
</div>
3933
</div>
4034
</div>

‎src/packages/backtop/__test__/backtop.spec.tsx‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as React from 'react'
33
import '@testing-library/jest-dom'
44
import { Top } from '@nutui/icons-react'
5-
import { render, fireEvent } from '@testing-library/react'
5+
import { render, fireEvent, waitFor, act } from '@testing-library/react'
66
import BackTop from '@/packages/backtop'
77

88
test('backtop props test', () => {
@@ -37,31 +37,38 @@ test('backtop custom test', () => {
3737
}}
3838
onClick={handleClick}
3939
>
40-
<div
41-
className="backtop-demo"
42-
style={{
43-
display: 'flex',
44-
flexDirection: 'column',
45-
alignItems: 'center',
46-
}}
47-
>
48-
<Top width="12px" height="12px" className="nut-backtop-main" />
49-
<div style={{ fontSize: '12px' }}>顶部</div>
50-
</div>
40+
<Top />
41+
<div style={{ fontSize: '12px' }}>顶部</div>
5142
</BackTop>
5243
)
5344
expect(container.querySelector('.nut-backtop')).toHaveAttribute(
5445
'style',
5546
'z-index: 900; bottom: 110px; right: 10px;'
5647
)
57-
expect(container.querySelector('.backtop-demo')).toHaveAttribute(
58-
'style',
59-
'display: flex; flex-direction: column; align-items: center;'
60-
)
61-
expect(container.querySelector('.nut-icon-Top')).toHaveClass(
62-
'nut-backtop-main'
63-
)
48+
6449
fireEvent.click(container)
6550
expect(handleClick).toBeCalled
6651
expect(container).toMatchSnapshot()
6752
})
53+
54+
test('scroll', async () => {
55+
const { container } = render(
56+
<div id="target" style={{ height: '100vh' }} className="backtop-wrapper">
57+
{new Array(24).fill(0).map((_, index) => {
58+
return <div key={index}>我是测试数据{index}</div>
59+
})}
60+
<BackTop target="target" className="backtop-button" />
61+
</div>
62+
)
63+
const track = container.querySelector('.backtop-wrapper')
64+
if (track) {
65+
track.scrollTop = 200
66+
act(() => {
67+
track.dispatchEvent(new Event('scroll'))
68+
})
69+
await waitFor(() => {
70+
const element18 = container.querySelector('.backtop-button')
71+
expect(element18).toHaveClass('nut-backtop-show')
72+
})
73+
}
74+
})

‎src/packages/backtop/demo.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,10 @@ const BackTopDemo = () => {
1616
})
1717

1818
return (
19-
<>
20-
<div
21-
className="demo"
22-
style={{ height: '100vh', overflowY: 'auto' }}
23-
id="target"
24-
>
25-
<h2>{translated.title}</h2>
26-
<Demo1 />
27-
</div>
28-
</>
19+
<div className="demo">
20+
<h2>{translated.title}</h2>
21+
<Demo1 />
22+
</div>
2923
)
3024
}
3125

0 commit comments

Comments
 (0)