@eturnity/eturnity_reusable_components 7.45.4 → 7.45.5-qa-elisee-7.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
@@ -0,0 +1,66 @@
|
|
1
|
+
import { mount } from '@vue/test-utils'
|
2
|
+
import RCIcon from '@/components/icon'
|
3
|
+
import theme from '@/assets/theme'
|
4
|
+
import 'jest-styled-components'
|
5
|
+
jest.mock('@/components/icon/iconCache.mjs', () => ({
|
6
|
+
fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
|
7
|
+
}))
|
8
|
+
|
9
|
+
describe('RCIcon.vue', () => {
|
10
|
+
it('renders icon with default props', async () => {
|
11
|
+
const wrapper = mount(RCIcon, {
|
12
|
+
props: { name: 'House' },
|
13
|
+
global: {
|
14
|
+
provide: {
|
15
|
+
theme,
|
16
|
+
},
|
17
|
+
},
|
18
|
+
})
|
19
|
+
|
20
|
+
const iconWrapper = wrapper.find('[data-test-id="icon_wrapper"]')
|
21
|
+
const iconImage = wrapper.find('[data-test-id="icon_image"]')
|
22
|
+
|
23
|
+
expect(iconWrapper.exists()).toBe(true)
|
24
|
+
expect(iconImage.exists()).toBe(true)
|
25
|
+
expect(wrapper.props('size')).toBe('30px')
|
26
|
+
})
|
27
|
+
|
28
|
+
it('renders striked line when isStriked is true', async () => {
|
29
|
+
const wrapper = mount(RCIcon, {
|
30
|
+
props: {
|
31
|
+
name: 'House',
|
32
|
+
isStriked: true,
|
33
|
+
color: 'red',
|
34
|
+
},
|
35
|
+
global: {
|
36
|
+
provide: {
|
37
|
+
theme,
|
38
|
+
},
|
39
|
+
},
|
40
|
+
})
|
41
|
+
|
42
|
+
const strikedLine = wrapper.find('[data-test-id="icon_striked_line"]')
|
43
|
+
expect(strikedLine.exists()).toBe(true)
|
44
|
+
})
|
45
|
+
|
46
|
+
it('applies correct styling based on props', async () => {
|
47
|
+
const wrapper = mount(RCIcon, {
|
48
|
+
props: {
|
49
|
+
name: 'House',
|
50
|
+
size: '60px',
|
51
|
+
color: 'red',
|
52
|
+
hoveredColor: 'blue',
|
53
|
+
backgroundColor: 'yellow',
|
54
|
+
},
|
55
|
+
global: {
|
56
|
+
provide: {
|
57
|
+
theme,
|
58
|
+
},
|
59
|
+
},
|
60
|
+
})
|
61
|
+
|
62
|
+
const iconImage = wrapper.find('[data-test-id="icon_image"]')
|
63
|
+
expect(iconImage.exists()).toBe(true)
|
64
|
+
// Add assertions for styling if needed
|
65
|
+
})
|
66
|
+
})
|
@@ -1,14 +1,24 @@
|
|
1
1
|
<template>
|
2
|
-
<Wrapper
|
2
|
+
<Wrapper
|
3
|
+
:cursor="cursor"
|
4
|
+
data-test-id="icon_wrapper"
|
5
|
+
:disabled="disabled"
|
6
|
+
:size="size"
|
7
|
+
>
|
3
8
|
<IconImage
|
4
9
|
:animation="animation"
|
5
10
|
:background-color="backgroundColor"
|
6
11
|
:color="color"
|
12
|
+
data-test-id="icon_image"
|
7
13
|
:hovered-color="hoveredColor"
|
8
14
|
>
|
9
|
-
<i v-html="icon.html"></i>
|
15
|
+
<i data-test-id="icon_svg" v-html="icon.html"></i>
|
10
16
|
</IconImage>
|
11
|
-
<StrikedLine
|
17
|
+
<StrikedLine
|
18
|
+
v-if="isStriked"
|
19
|
+
:color="color"
|
20
|
+
data-test-id="icon_striked_line"
|
21
|
+
/>
|
12
22
|
</Wrapper>
|
13
23
|
</template>
|
14
24
|
|
@@ -44,6 +44,7 @@
|
|
44
44
|
:type="inputTypeData"
|
45
45
|
:value="value"
|
46
46
|
@blur="onInputBlur"
|
47
|
+
@focus="onInputFocus"
|
47
48
|
@input="onChangeHandler"
|
48
49
|
@keyup.enter="onEnterPress"
|
49
50
|
/>
|
@@ -367,6 +368,9 @@
|
|
367
368
|
this.validateInput($event.target.value)
|
368
369
|
this.$emit('input-blur', $event.target.value)
|
369
370
|
},
|
371
|
+
onInputFocus($event) {
|
372
|
+
this.$emit('input-focus', $event.target.value)
|
373
|
+
},
|
370
374
|
toggleShowPassword() {
|
371
375
|
this.inputTypeData =
|
372
376
|
this.inputTypeData === 'password' ? 'text' : 'password'
|