element-plus/packages/components/skeleton/__tests__/skeleton.spec.ts

87 lines
1.8 KiB
TypeScript

import { nextTick } from 'vue'
import makeMount from '@element-plus/test-utils/make-mount'
import Skeleton from '../src/skeleton.vue'
const AXIOM = 'AXIOM is the best girl'
jest.useFakeTimers()
describe('Skeleton.vue', () => {
const mount = makeMount(Skeleton, {})
test('render test', () => {
const wrapper = mount()
expect(wrapper.findAll('.el-skeleton__p')).toHaveLength(4)
expect(wrapper.classes()).toContain('el-skeleton')
})
test('should render with animation', () => {
const wrapper = mount({
props: {
animated: true,
},
})
expect(wrapper.classes()).toContain('is-animated')
})
test('should render x times', async () => {
const wrapper = mount()
expect(wrapper.findAll('.el-skeleton__p')).toHaveLength(4)
await wrapper.setProps({
count: 2,
})
expect(wrapper.findAll('.el-skeleton__p')).toHaveLength(8)
})
test('should render x rows', () => {
const wrapper = mount({
props: {
rows: 4,
},
})
expect(wrapper.findAll('.el-skeleton__p')).toHaveLength(5)
})
test('should render default slots', () => {
const wrapper = mount({
slots: {
default: () => AXIOM,
},
props: {
loading: false,
},
})
expect(wrapper.text()).toBe(AXIOM)
})
test('should render templates', () => {
const wrapper = mount({
slots: {
template: () => AXIOM,
},
})
expect(wrapper.text()).toBe(AXIOM)
})
test('should throttle rendering', async () => {
const wrapper = mount({
props: {
throttle: 500,
},
})
expect((wrapper.vm as any).uiLoading).toBe(false)
jest.runAllTimers()
await nextTick()
expect((wrapper.vm as any).uiLoading).toBe(true)
})
})