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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
import { beforeEach, describe, expect, it } from 'vitest';
import { mount, shallowMount } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import _ from 'lodash';
import CInputText from './c-input-text.vue';
import { useValidation } from '@/composable/validation';
describe('CInputText', () => {
beforeEach(() => {
setActivePinia(createPinia());
});
it('Renders a label', () => {
const wrapper = shallowMount(CInputText, {
props: {
label: 'Label',
},
});
expect(wrapper.get('.label').text()).to.equal('Label');
});
it('Renders a placeholder', () => {
const wrapper = shallowMount(CInputText, {
props: {
placeholder: 'Placeholder',
},
});
expect(wrapper.get('.input').attributes('placeholder')).to.equal('Placeholder');
});
it('Renders a value', () => {
const wrapper = shallowMount(CInputText, {
props: {
value: 'Value',
},
});
expect(wrapper.vm.value).to.equal('Value');
});
it('Renders a provided id', () => {
const wrapper = shallowMount(CInputText, {
props: {
id: 'id',
},
});
expect(wrapper.get('.input').attributes('id')).to.equal('id');
});
it('updates value on input', async () => {
const wrapper = shallowMount(CInputText);
await wrapper.get('input').setValue('Hello');
expect(_.get(wrapper.emitted(), 'update:value.0.0')).to.equal('Hello');
});
it('cannot be edited when disabled', async () => {
const wrapper = shallowMount(CInputText, {
props: {
disabled: true,
},
});
await wrapper.get('input').setValue('Hello');
expect(_.get(wrapper.emitted(), 'update:value')).toBeUndefined();
});
it('renders a feedback message for invalid rules', async () => {
const wrapper = shallowMount(CInputText, {
props: { validationRules: [{ validator: () => false, message: 'Message' }] },
});
const feedback = wrapper.find('.feedback');
expect(feedback.exists()).to.equal(true);
expect(feedback.text()).to.equal('Message');
});
it('if the value become valid according to rules, the feedback disappear', async () => {
const wrapper = shallowMount(CInputText, {
props: {
validationRules: [{ validator: (value: string) => value === 'Hello', message: 'Value should be Hello' }],
},
});
const feedback = wrapper.find('.feedback');
expect(feedback.exists()).to.equal(true);
expect(feedback.text()).to.equal('Value should be Hello');
await wrapper.setProps({ value: 'Hello' });
expect(wrapper.find('.feedback').exists()).to.equal(false);
});
it('feedback does not render for valid rules', async () => {
const wrapper = shallowMount(CInputText, {
props: { rules: [{ validator: () => true, message: 'Message' }] },
});
expect(wrapper.find('.feedback').exists()).to.equal(false);
});
it('renders a feedback message for invalid custom validation wrapper', async () => {
const wrapper = shallowMount(CInputText, {
props: {
validation: useValidation({ source: ref(), rules: [{ validator: () => false, message: 'Message' }] }),
},
});
const feedback = wrapper.find('.feedback');
expect(feedback.exists()).to.equal(true);
expect(feedback.text()).to.equal('Message');
});
it('feedback does not render for valid custom validation wrapper', async () => {
const wrapper = shallowMount(CInputText, {
props: {
validation: useValidation({ source: ref(), rules: [{ validator: () => true, message: 'Message' }] }),
},
});
expect(wrapper.find('.feedback').exists()).to.equal(false);
});
it('if the value become valid according to the custom validation wrapper, the feedback disappear', async () => {
const source = ref('');
const wrapper = shallowMount(CInputText, {
props: {
validation: useValidation({
source,
rules: [{ validator: (value: string) => value === 'Hello', message: 'Value should be Hello' }],
}),
},
});
const feedback = wrapper.find('.feedback');
expect(feedback.exists()).to.equal(true);
expect(feedback.text()).to.equal('Value should be Hello');
source.value = 'Hello';
await wrapper.vm.$nextTick();
expect(wrapper.find('.feedback').exists()).to.equal(false);
});
it('[prop:testId] renders a test id on the input', async () => {
const wrapper = mount(CInputText, {
props: {
testId: 'TEST',
},
});
expect(wrapper.get('input').attributes('data-test-id')).to.equal('TEST');
});
});
|
