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
|
import { mount, config } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import SuiChip from './SuiChip.vue'
config.global.stubs = {
SuiIcon: {
template: '<div data-testid="sui-icon" :data-shape="$attrs.shape">Mocked Icon</div>',
props: ['size', 'inline', 'role', 'class']
}
}
describe('SuiChip.vue', () => {
it('soll das Label korrekt rendern und die Basis-Klasse anwenden', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Test-Chip' }
})
expect(wrapper.classes()).toContain('sui-chip')
expect(wrapper.text()).toContain('Test-Chip')
})
it('soll das Icon rendern, wenn die "icon" Prop gesetzt ist', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Mit Icon', icon: 'settings' }
})
const icon = wrapper.find('[data-testid="sui-icon"]')
expect(icon.exists()).toBe(true)
expect(icon.attributes('data-shape')).toBe('settings')
})
it('soll KEIN Icon rendern, wenn die "icon" Prop nicht gesetzt ist', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Ohne Icon', icon: '' }
})
expect(wrapper.findAll('[data-testid="sui-icon"]').length).toBe(0)
})
it('soll den Entfernen-Button rendern, wenn "removable" true ist', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Löschbar', removable: true }
})
const button = wrapper.find('button.sui-chip--button-remove')
expect(button.exists()).toBe(true)
const buttonIcon = button.find('[data-shape="decline"]')
expect(buttonIcon.exists()).toBe(true)
})
it('soll ein "remove" Event emittieren, wenn der Button geklickt wird', async () => {
const wrapper = mount(SuiChip, {
props: { label: 'Klick mich', removable: true }
})
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('remove')).toBeTruthy()
expect(wrapper.emitted('remove').length).toBe(1)
})
it('soll den Entfernen-Button NICHT rendern, wenn "removable" false ist', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Nicht löschbar', removable: false }
})
expect(wrapper.find('button').exists()).toBe(false)
})
it('soll die Klasse "disabled" anwenden und den Entfernen-Button ausblenden, wenn "disabled" true ist', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Deaktiviert', disabled: true, removable: true }
})
expect(wrapper.classes()).toContain('disabled')
expect(wrapper.find('button').exists()).toBe(false)
})
it('soll KEINE "remove" Events emittieren, wenn disabled ist (zusätzlicher Check)', async () => {
const wrapper = mount(SuiChip, {
props: { label: 'Deaktiviert', disabled: true, removable: true }
})
await wrapper.trigger('click')
expect(wrapper.emitted('remove')).toBeUndefined()
})
it('soll die Hintergrundfarbe basierend auf der "hex" Prop setzen', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Hex', hex: '#FF00FF', color: 'red' }
})
expect(wrapper.attributes('style')).toContain('background-color: rgb(255, 0, 255);')
})
it('soll die Hintergrundfarbe basierend auf der "color" Prop setzen', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Color Var', color: 'success-color' }
})
expect(wrapper.attributes('style')).toContain('background-color: var(--color--success-color);')
})
it('soll die Standard-Hintergrundfarbe setzen, wenn weder hex noch color gesetzt sind', () => {
const wrapper = mount(SuiChip, {
props: { label: 'Default' }
})
expect(wrapper.attributes('style')).toContain('background-color: var(--color--font-primary);')
})
})
|
