blob: a718203b4899f3d02e11c376873511deccf207ba [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {assert} from 'chai';
6import userEvent from '@testing-library/user-event';
7
8import {MrEditField} from './mr-edit-field.js';
9import {fieldTypes} from 'shared/issue-fields.js';
10
11import {enterInput} from 'shared/test/helpers.js';
12
13
14let element;
15let input;
16
17xdescribe('mr-edit-field', () => {
18 beforeEach(async () => {
19 element = document.createElement('mr-edit-field');
20 document.body.appendChild(element);
21
22 element.label = 'testInput';
23 await element.updateComplete;
24
25 input = element.querySelector('#testInput');
26 });
27
28 afterEach(async () => {
29 userEvent.clear(input);
30
31 document.body.removeChild(element);
32 });
33
34 it('initializes', () => {
35 assert.instanceOf(element, MrEditField);
36 });
37
38 it('reset input value', async () => {
39 element.initialValues = [];
40 await element.updateComplete;
41
42 enterInput(input, 'jackalope');
43 await element.updateComplete;
44
45 assert.equal(element.value, 'jackalope');
46
47 element.reset();
48 await element.updateComplete;
49
50 assert.equal(element.value, '');
51 });
52
53 it('input updates when initialValues change', async () => {
54 element.initialValues = ['hello'];
55
56 await element.updateComplete;
57
58 assert.equal(element.value, 'hello');
59 });
60
61 it('initial value does not change after value set', async () => {
62 element.initialValues = ['hello'];
63 element.label = 'testInput';
64 await element.updateComplete;
65
66 input = element.querySelector('#testInput');
67
68 enterInput(input, 'world');
69 await element.updateComplete;
70
71 assert.deepEqual(element.initialValues, ['hello']);
72 assert.equal(element.value, 'world');
73 });
74
75 it('value updates when input is updated', async () => {
76 element.initialValues = ['hello'];
77 await element.updateComplete;
78
79 enterInput(input, 'world');
80 await element.updateComplete;
81
82 assert.equal(element.value, 'world');
83 });
84
85 it('initial value does not change after user input', async () => {
86 element.initialValues = ['hello'];
87 await element.updateComplete;
88
89 enterInput(input, 'jackalope');
90 await element.updateComplete;
91
92 assert.deepEqual(element.initialValues, ['hello']);
93 assert.equal(element.value, 'jackalope');
94 });
95
96 it('get value after user input', async () => {
97 element.initialValues = ['hello'];
98 await element.updateComplete;
99
100 enterInput(input, 'jackalope');
101 await element.updateComplete;
102
103 assert.equal(element.value, 'jackalope');
104 });
105
106 it('input value was added', async () => {
107 // Simulate user input.
108 await element.updateComplete;
109
110 enterInput(input, 'jackalope');
111 await element.updateComplete;
112
113 assert.deepEqual(element.getValuesAdded(), ['jackalope']);
114 assert.deepEqual(element.getValuesRemoved(), []);
115 });
116
117 it('input value was removed', async () => {
118 await element.updateComplete;
119
120 element.initialValues = ['hello'];
121 await element.updateComplete;
122
123 enterInput(input, '');
124 await element.updateComplete;
125
126 assert.deepEqual(element.getValuesAdded(), []);
127 assert.deepEqual(element.getValuesRemoved(), ['hello']);
128 });
129
130 it('input value was changed', async () => {
131 element.initialValues = ['hello'];
132 await element.updateComplete;
133
134 enterInput(input, 'world');
135 await element.updateComplete;
136
137 assert.deepEqual(element.getValuesAdded(), ['world']);
138 });
139
140 it('edit select updates value when initialValues change', async () => {
141 element.multi = false;
142 element.type = fieldTypes.ENUM_TYPE;
143
144 element.options = [
145 {optionName: 'hello'},
146 {optionName: 'jackalope'},
147 {optionName: 'text'},
148 ];
149
150 element.initialValues = ['hello'];
151
152 await element.updateComplete;
153
154 assert.equal(element.value, 'hello');
155
156 const select = element.querySelector('select');
157 userEvent.selectOptions(select, 'jackalope');
158
159 // User input should not be overridden by the initialValue variable.
160 assert.equal(element.value, 'jackalope');
161 // Initial values should not change based on user input.
162 assert.deepEqual(element.initialValues, ['hello']);
163
164 element.initialValues = ['text'];
165 await element.updateComplete;
166
167 assert.equal(element.value, 'text');
168
169 element.initialValues = [];
170 await element.updateComplete;
171
172 assert.deepEqual(element.value, '');
173 });
174
175 it('multi enum updates value on reset', async () => {
176 element.multi = true;
177 element.type = fieldTypes.ENUM_TYPE;
178 element.options = [
179 {optionName: 'hello'},
180 {optionName: 'world'},
181 {optionName: 'fake'},
182 ];
183
184 await element.updateComplete;
185
186 element.initialValues = ['hello'];
187 element.reset();
188 await element.updateComplete;
189
190 assert.deepEqual(element.values, ['hello']);
191
192 const checkboxes = element.querySelector('mr-multi-checkbox');
193
194 // User checks all boxes.
195 checkboxes._inputRefs.forEach(
196 (checkbox) => {
197 checkbox.checked = true;
198 },
199 );
200 checkboxes._changeHandler();
201
202 await element.updateComplete;
203
204 // User input should not be overridden by the initialValues variable.
205 assert.deepEqual(element.values, ['hello', 'world', 'fake']);
206 // Initial values should not change based on user input.
207 assert.deepEqual(element.initialValues, ['hello']);
208
209 element.initialValues = ['hello', 'world'];
210 element.reset();
211 await element.updateComplete;
212
213 assert.deepEqual(element.values, ['hello', 'world']);
214 });
215});