@eturnity/eturnity_reusable_components 7.45.4 → 7.45.5-qa-elisee-7.48.0

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.45.4",
3
+ "version": "7.45.5-qa-elisee-7.48.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -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 :cursor="cursor" :disabled="disabled" :size="size">
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 v-if="isStriked" :color="color" />
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'