Blame view

node_modules/bootstrap-vue/src/components/skeleton/skeleton.spec.js 3.03 KB
4cd4fd28   郭伟龙   feat: 初始化项目
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
116
117
118
119
120
121
122
123
124
125
126
import { mount } from '@vue/test-utils'
import { BSkeleton } from './skeleton'

describe('skeleton', () => {
  it('default has root element of div, and default classes', async () => {
    const wrapper = mount(BSkeleton)

    expect(wrapper).toBeDefined()
    expect(wrapper.element.tagName).toBe('DIV')

    expect(wrapper.classes().length).toBe(3)
    expect(wrapper.classes()).toContain('b-skeleton')
    expect(wrapper.classes()).toContain('b-skeleton-text')
    expect(wrapper.classes()).toContain('b-skeleton-animate-wave')

    wrapper.destroy()
  })

  it('has class `b-skeleton-button` when `type="button"` is set', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        type: 'button'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.classes()).toContain('b-skeleton-button')

    wrapper.destroy()
  })

  it('has class `b-skeleton-animate-fade` when `animation="fade"` is set', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        animation: 'fade'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.classes()).toContain('b-skeleton-animate-fade')

    wrapper.destroy()
  })

  it('has no animate class when `animation` prop has falsy value', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        animation: null
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.classes()).not.toContain('b-skeleton-animate-wave')

    wrapper.destroy()
  })

  it('has `width` style set when `width` prop is used', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        width: '50px'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.element.style.width).toBe('50px')

    wrapper.destroy()
  })

  it('has `height` style set when `height` prop is used', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        height: '50px'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.element.style.height).toBe('50px')

    wrapper.destroy()
  })

  it('has `width` and `height` styles set when `size` prop is used', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        size: '50px'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.element.style.height).toBe('50px')
    expect(wrapper.element.style.width).toBe('50px')

    wrapper.destroy()
  })

  it('`size` prop overrules the `width` and `height` props', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        height: '25px',
        width: '40px',
        size: '50px'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.element.style.height).toBe('50px')
    expect(wrapper.element.style.width).toBe('50px')

    wrapper.destroy()
  })

  it('has `bg-[variant]` class applied when `variant` prop is used', async () => {
    const wrapper = mount(BSkeleton, {
      propsData: {
        variant: 'primary'
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.classes()).toContain('bg-primary')

    wrapper.destroy()
  })
})