mirror of
https://github.com/element-plus/element-plus.git
synced 2025-04-12 16:40:36 +08:00
refactor(components): [scrollbar] use JSX in Unit test (#7987)
This commit is contained in:
zz
GitHub
parent
c3e17ec600
commit
eb9d7c99a5
@ -23,7 +23,6 @@
|
||||
"packages/components/popper/",
|
||||
"packages/components/result/",
|
||||
"packages/components/roving-focus-group/",
|
||||
"packages/components/scrollbar/",
|
||||
"packages/components/select/",
|
||||
"packages/components/select-v2/",
|
||||
"packages/components/skeleton/",
|
||||
|
||||
@ -5,23 +5,15 @@ import makeScroll from '@element-plus/test-utils/make-scroll'
|
||||
import defineGetter from '@element-plus/test-utils/define-getter'
|
||||
import Scrollbar from '../src/scrollbar.vue'
|
||||
|
||||
const _mount = (template: string) =>
|
||||
mount({
|
||||
components: {
|
||||
'el-scrollbar': Scrollbar,
|
||||
},
|
||||
template,
|
||||
})
|
||||
|
||||
describe('ScrollBar', () => {
|
||||
test('vertical', async () => {
|
||||
const outerHeight = 204
|
||||
const innerHeight = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar style="height: ${outerHeight}px">
|
||||
<div style="height: ${innerHeight}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar style={`height: ${outerHeight}px;`}>
|
||||
<div style={`height: ${innerHeight}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
const scrollDom = wrapper.find('.el-scrollbar__wrap').element
|
||||
|
||||
@ -51,11 +43,11 @@ describe('ScrollBar', () => {
|
||||
test('horizontal', async () => {
|
||||
const outerWidth = 204
|
||||
const innerWidth = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar style="height: 100px; width: ${outerWidth}px">
|
||||
<div style="height:100px; width: ${innerWidth}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar style={`height: 100px; width: ${outerWidth}px;`}>
|
||||
<div style={`height: 100px; width: ${innerWidth}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
const scrollDom = wrapper.find('.el-scrollbar__wrap').element
|
||||
|
||||
@ -87,11 +79,11 @@ describe('ScrollBar', () => {
|
||||
const innerHeight = 500
|
||||
const outerWidth = 204
|
||||
const innerWidth = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar style="height: ${outerHeight}px; width: ${outerWidth}px;">
|
||||
<div style="height: ${innerHeight}px; width: ${innerWidth}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar style={`height: ${outerHeight}px; width: ${outerWidth}px;`}>
|
||||
<div style={`height: ${innerHeight}px; width: ${innerWidth}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
const scrollDom = wrapper.find('.el-scrollbar__wrap').element
|
||||
|
||||
@ -142,11 +134,11 @@ describe('ScrollBar', () => {
|
||||
test('should render height props', async () => {
|
||||
const outerHeight = 204
|
||||
const innerHeight = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar height="${outerHeight}px">
|
||||
<div style="height: ${innerHeight}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar height={`${outerHeight}px`}>
|
||||
<div style={`height: ${innerHeight}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__wrap').attributes('style')).toContain(
|
||||
'height: 204px;'
|
||||
@ -156,11 +148,11 @@ describe('ScrollBar', () => {
|
||||
test('should render max-height props', async () => {
|
||||
const outerHeight = 204
|
||||
const innerHeight = 100
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar max-height="${outerHeight}px">
|
||||
<div style="height: ${innerHeight}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar max-height={`${outerHeight}px`}>
|
||||
<div style={`height: ${innerHeight}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__wrap').attributes('style')).toContain(
|
||||
'max-height: 204px;'
|
||||
@ -170,11 +162,11 @@ describe('ScrollBar', () => {
|
||||
test('should render always props', async () => {
|
||||
const outerHeight = 204
|
||||
const innerHeight = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar height="${outerHeight}px" always>
|
||||
<div style="height: ${innerHeight}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar height={`${outerHeight}px`} always>
|
||||
<div style={`height: ${innerHeight}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__bar').attributes('style')).toBeFalsy()
|
||||
})
|
||||
@ -184,13 +176,23 @@ describe('ScrollBar', () => {
|
||||
const innerHeight = 500
|
||||
const outerWidth = 204
|
||||
const innerWidth = 500
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar ref="scrollbar" style="height: ${outerHeight}px; width: ${outerWidth}px;">
|
||||
<div style="height: ${innerHeight}px; width: ${innerWidth}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount({
|
||||
setup() {
|
||||
return () => (
|
||||
<Scrollbar
|
||||
ref="scrollbar"
|
||||
style={`height: ${outerHeight}px; width: ${outerWidth}px;`}
|
||||
always
|
||||
>
|
||||
<div
|
||||
style={`height: ${innerHeight}px; width: ${innerWidth}px;`}
|
||||
></div>
|
||||
</Scrollbar>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
const scrollbar = wrapper.vm.$refs.scrollbar as any
|
||||
const scrollbar = wrapper.findComponent({ ref: 'scrollbar' }).vm
|
||||
const scrollDom = wrapper.find('.el-scrollbar__wrap').element
|
||||
|
||||
const offsetHeightRestore = defineGetter(
|
||||
@ -218,7 +220,6 @@ describe('ScrollBar', () => {
|
||||
await nextTick()
|
||||
scrollbar.setScrollLeft(100)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('.is-vertical div').attributes('style')).toContain(
|
||||
'height: 80px; transform: translateY(0%);'
|
||||
)
|
||||
@ -235,11 +236,11 @@ describe('ScrollBar', () => {
|
||||
test('should render min-size props', async () => {
|
||||
const outerHeight = 204
|
||||
const innerHeight = 10000
|
||||
const wrapper = _mount(`
|
||||
<el-scrollbar style="height: ${outerHeight}px">
|
||||
<div style="height: ${innerHeight}px;"></div>
|
||||
</el-scrollbar>
|
||||
`)
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar style={`height: ${outerHeight}px;`}>
|
||||
<div style={`height: ${innerHeight}px;`}></div>
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
const scrollDom = wrapper.find('.el-scrollbar__wrap').element
|
||||
|
||||
@ -261,4 +262,50 @@ describe('ScrollBar', () => {
|
||||
offsetHeightRestore()
|
||||
scrollHeightRestore()
|
||||
})
|
||||
|
||||
test('should render tag props', async () => {
|
||||
const wrapper = mount(() => (
|
||||
<Scrollbar tag="ul">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<li>{item}</li>
|
||||
))}
|
||||
</Scrollbar>
|
||||
))
|
||||
|
||||
expect(
|
||||
wrapper.find('.el-scrollbar__view').element instanceof HTMLUListElement
|
||||
).toBeTruthy()
|
||||
})
|
||||
|
||||
test('should render wrap-style props', async () => {
|
||||
const wrapStyle = 'background: red;'
|
||||
const wrapper = mount(() => <Scrollbar wrap-style={wrapStyle} />)
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__wrap').attributes('style')).toContain(
|
||||
wrapStyle
|
||||
)
|
||||
})
|
||||
|
||||
test('should render wrap-class props', async () => {
|
||||
const wrapClass = 'test-wrap-class'
|
||||
const wrapper = mount(() => <Scrollbar wrap-class={wrapClass} />)
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__wrap').classes()).toContain(wrapClass)
|
||||
})
|
||||
|
||||
test('should render view-style props', async () => {
|
||||
const viewStyle = 'display: inline-block;'
|
||||
const wrapper = mount(() => <Scrollbar view-style={viewStyle} />)
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__view').attributes('style')).toContain(
|
||||
viewStyle
|
||||
)
|
||||
})
|
||||
|
||||
test('should render view-class props', async () => {
|
||||
const viewClass = 'test-view-class'
|
||||
const wrapper = mount(() => <Scrollbar view-class={viewClass} />)
|
||||
|
||||
expect(wrapper.find('.el-scrollbar__view').classes()).toContain(viewClass)
|
||||
})
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user