1 +
import { mount } from '@vue/test-utils'
2 +
import { BAspect } from './aspect'
3 + 4 +
describe('aspect', () => {
5 +
it('should have expected default structure', async () => {
6 +
const wrapper = mount(BAspect)
7 +
expect(wrapper.isVueInstance()).toBe(true)
8 +
expect(wrapper.is('div')).toBe(true)
9 +
expect(wrapper.classes()).toContain('b-aspect')
10 +
expect(wrapper.classes()).toContain('d-flex')
11 +
expect(wrapper.classes().length).toBe(2)
12 + 13 +
const $sizer = wrapper.find('.b-aspect-sizer')
14 +
expect($sizer.exists()).toBe(true)
15 +
expect($sizer.is('div')).toBe(true)
16 +
expect($sizer.classes()).toContain('flex-grow-1')
17 +
// Default aspect ratio is 1:1
18 +
expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
19 + 20 +
const $content = wrapper.find('.b-aspect-content')
21 +
expect($content.exists()).toBe(true)
22 +
expect($content.is('div')).toBe(true)
23 +
expect($content.classes()).toContain('flex-grow-1')
24 +
expect($content.classes()).toContain('w-100')
25 +
expect($content.classes()).toContain('mw-100')
26 +
expect($content.attributes('style')).toContain('margin-left: -100%;')
27 + 28 +
wrapper.destroy()
29 +
})
30 + 31 +
it('should have expected structure when prop `tag` is set', async () => {
32 +
const wrapper = mount(BAspect, {
33 +
propsData: {
34 +
tag: 'section'
35 +
}
36 +
})
37 +
expect(wrapper.isVueInstance()).toBe(true)
38 +
expect(wrapper.is('section')).toBe(true)
39 +
expect(wrapper.classes()).toContain('b-aspect')
40 +
expect(wrapper.classes()).toContain('d-flex')
41 +
expect(wrapper.classes().length).toBe(2)
42 + 43 +
const $sizer = wrapper.find('.b-aspect-sizer')
44 +
expect($sizer.exists()).toBe(true)
45 +
expect($sizer.is('div')).toBe(true)
46 +
expect($sizer.classes()).toContain('flex-grow-1')
47 +
// Default aspect ratio is 1:1
48 +
expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
49 + 50 +
const $content = wrapper.find('.b-aspect-content')
51 +
expect($content.exists()).toBe(true)
52 +
expect($content.is('div')).toBe(true)
53 +
expect($content.classes()).toContain('flex-grow-1')
54 +
expect($content.classes()).toContain('w-100')
55 +
expect($content.classes()).toContain('mw-100')
56 +
expect($content.attributes('style')).toContain('margin-left: -100%;')
57 + 58 +
wrapper.destroy()
59 +
})
60 + 61 +
it('should have expected structure when aspect is set to "4:3"', async () => {
62 +
const wrapper = mount(BAspect, {
63 +
propsData: {
64 +
aspect: '4:3'
65 +
}
66 +
})
67 +
expect(wrapper.isVueInstance()).toBe(true)
68 +
expect(wrapper.is('div')).toBe(true)
69 +
expect(wrapper.classes()).toContain('b-aspect')
70 +
expect(wrapper.classes()).toContain('d-flex')
71 +
expect(wrapper.classes().length).toBe(2)
72 + 73 +
const $sizer = wrapper.find('.b-aspect-sizer')
74 +
expect($sizer.exists()).toBe(true)
75 +
expect($sizer.is('div')).toBe(true)
76 +
expect($sizer.classes()).toContain('flex-grow-1')
77 +
expect($sizer.attributes('style')).toContain('padding-bottom: 75%;')
78 + 79 +
const $content = wrapper.find('.b-aspect-content')
80 +
expect($content.exists()).toBe(true)
81 +
expect($content.is('div')).toBe(true)
82 +
expect($content.classes()).toContain('flex-grow-1')
83 +
expect($content.classes()).toContain('w-100')
84 +
expect($content.classes()).toContain('mw-100')
85 +
expect($content.attributes('style')).toContain('margin-left: -100%;')
86 + 87 +
wrapper.destroy()
88 +
})
89 +
it('should have expected structure when aspect is set to `16/9`', async () => {
90 +
const wrapper = mount(BAspect, {
91 +
propsData: {
92 +
aspect: 16 / 9
93 +
}
94 +
})
95 +
expect(wrapper.isVueInstance()).toBe(true)
96 +
expect(wrapper.is('div')).toBe(true)
97 +
expect(wrapper.classes()).toContain('b-aspect')
98 +
expect(wrapper.classes()).toContain('d-flex')
99 +
expect(wrapper.classes().length).toBe(2)
100 + 101 +
const $sizer = wrapper.find('.b-aspect-sizer')
102 +
expect($sizer.exists()).toBe(true)
103 +
expect($sizer.is('div')).toBe(true)
104 +
expect($sizer.classes()).toContain('flex-grow-1')
105 +
expect($sizer.attributes('style')).toContain('padding-bottom: 56.25%;')
106 + 107 +
const $content = wrapper.find('.b-aspect-content')
108 +
expect($content.exists()).toBe(true)
109 +
expect($content.is('div')).toBe(true)
110 +
expect($content.classes()).toContain('flex-grow-1')
111 +
expect($content.classes()).toContain('w-100')
112 +
expect($content.classes()).toContain('mw-100')
113 +
expect($content.attributes('style')).toContain('margin-left: -100%;')
114 + 115 +
wrapper.destroy()
116 +
})
117 +
})
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4