1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16// @ts-ignore 17import {LitButton, LitSelect} from "../../../dist/base-ui/select/LitSelect.js"; 18import {LitSelectOption} from "../../../src/base-ui/select/LitSelectOption"; 19 20describe('LitSelect Test', ()=>{ 21 22 it('LitSelectTest01', function () { 23 let litSelect = new LitSelect(); 24 expect(litSelect).not.toBeUndefined() 25 }); 26 27 it('LitSelectTest02', function () { 28 document.body.innerHTML = `<lit-select id="litSelect"></lit-select>` 29 let select = document.querySelector("#litSelect") as LitSelect; 30 expect(select).not.toBeUndefined() 31 }); 32 33 it('LitSelectTest03', function () { 34 document.body.innerHTML = `<lit-select id="litSelect"></lit-select>` 35 let select = document.querySelector("#litSelect") as LitSelect; 36 select.value = "value" 37 expect(select.value).toBe('value'); 38 }); 39 40 it('LitSelectTest04', function () { 41 document.body.innerHTML = `<lit-select id="litSelect"></lit-select>` 42 let select = document.querySelector("#litSelect") as LitSelect; 43 select.border = "value" 44 expect(select.border).toBe('true'); 45 }); 46 it('LitSelectTest05', function () { 47 let lit = new LitSelect(); 48 expect(lit.border).toBe('true'); 49 }); 50 it('LitSelectTest06', function () { 51 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 52 let select = document.querySelector("#litSelect") as LitSelect; 53 select.listHeight = true; 54 expect(select.listHeight).toBe('true'); 55 }); 56 57 it('LitSelectTest07', function () { 58 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 59 let select = document.querySelector("#litSelect") as LitSelect; 60 select.defaultValue = true; 61 expect(select.defaultValue).toBe('true'); 62 }); 63 64 it('LitSelectTest08', function () { 65 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 66 let select = document.querySelector("#litSelect") as LitSelect; 67 select.loading = 1 68 expect(select.loading).toBe(true); 69 }); 70 71 it('LitSelectTest09', function () { 72 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 73 let select = document.querySelector("#litSelect") as LitSelect; 74 expect(select.isMultiple()).toBe(false); 75 }); 76 77 it('LitSelectTest10', function () { 78 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 79 let select = document.querySelector("#litSelect") as LitSelect; 80 select.inputElement.value = "3333"; 81 select.click(); 82 expect(select.focused).toBe(true); 83 }); 84 85 it('LitSelectTest11', function () { 86 document.body.innerHTML = `<lit-select allow-clear id="litSelect" ></lit-selectallow-clear>` 87 let select = document.querySelector("#litSelect") as LitSelect; 88 select.clear() 89 expect(select.inputElement.value).toBe(""); 90 }); 91 92 it('LitSelectTest12', function () { 93 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 94 let select = document.querySelector("#litSelect") as LitSelect; 95 expect(select.reset()).toBeUndefined(); 96 }); 97 98 it('LitSelectTest13', function () { 99 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 100 let select = document.querySelector("#litSelect") as LitSelect; 101 let newTag =select.newTag("111","111"); 102 expect(newTag.text).toBe("111"); 103 }); 104 it('LitSelectTest14', function () { 105 document.body.innerHTML = `<lit-select id="litSelect" mode="multiple" allow-clear></lit-select>` 106 let select = document.querySelector("#litSelect") as LitSelect; 107 select.dataSource = [{key:"111"}] 108 let cleart = select.clearElement as HTMLElement; 109 cleart.click(); 110 expect(select.inputElement.value).toBe(""); 111 112 }); 113 114 it('LitSelectTest15', function () { 115 document.body.innerHTML = `<lit-select id="litSelect" mode="multiple" allow-clear></lit-select>` 116 let select = document.querySelector("#litSelect") as LitSelect; 117 let input = select.inputElement as HTMLInputElement; 118 input.value = "11" 119 expect(select.inputElement.value).toBe("11"); 120 121 }); 122 123 it('LitSelectTest16', function () { 124 document.body.innerHTML = `<lit-select id="litSelect" mode="multiple" allow-clear></lit-select>` 125 let select = document.querySelector("#litSelect") as LitSelect; 126 select.dataSource = [{key:"111"}] 127 expect(select.inputElement.value).toBe(""); 128 129 }); 130 131 it('LitSelectTest17', function () { 132 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 133 let select = document.querySelector("#litSelect") as LitSelect; 134 select.placeholder = true; 135 expect(select.placeholder).toBe('true'); 136 }); 137 it('LitSelectTest20', function () { 138 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 139 let select = document.querySelector("#litSelect") as LitSelect; 140 select.rounded = 1 141 expect(select.rounded).toBe(true); 142 }); 143 144 it('LitSelectTest21', function () { 145 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 146 let select = document.querySelector("#litSelect") as LitSelect; 147 select.placement = 1 148 expect(select.placement).toBe("1"); 149 }); 150 151 it('LitSelectTest18', function () { 152 let litSelect = new LitSelect(); 153 expect(litSelect.initHtml()).toMatchInlineSnapshot(` 154" 155 <style> 156 :host{ 157 display: inline-flex; 158 position: relative; 159 overflow: visible; 160 cursor: pointer; 161 border-radius: 2px; 162 outline: none; 163 -webkit-user-select:none ; 164 -moz-user-select:none; 165 user-select:none; 166 /*width: 100%;*/ 167 } 168 :host(:not([border])), 169 :host([border='true']){ 170 border: 1px solid var(--bark-prompt,#dcdcdc); 171 } 172 input{ 173 border: 0; 174 outline: none; 175 background-color: transparent; 176 cursor: pointer; 177 -webkit-user-select:none ; 178 -moz-user-select:none; 179 user-select:none; 180 display: inline-flex; 181 color: var(--dark-color2,rgba(0,0,0,0.9)); 182 } 183 :host([highlight]) input { 184 color: rgba(255,255,255,0.9); 185 } 186 :host(:not([mode])) input{ 187 width: 100%; 188 } 189 :host([mode]) input{ 190 padding: 6px 0px; 191 } 192 :host([mode]) .root{ 193 padding: 1px 8px; 194 } 195 .root{ 196 position: relative; 197 padding: 3px 6px; 198 display: flex; 199 align-items: center; 200 justify-content: space-between; 201 border-radius: 2px; 202 outline: none; 203 font-size: 1rem; 204 z-index: 2; 205 -webkit-user-select:none ; 206 -moz-user-select:none; 207 user-select:none; 208 width: 100%; 209 } 210 .body{ 211 max-height: 256px; 212 position: absolute; 213 bottom: 100%; 214 z-index: 99; 215 padding-top: 5px; 216 margin-top: 2px; 217 background-color: var(--dark-background4,#fff); 218 width: 100%; 219 transform: scaleY(.6); 220 visibility: hidden; 221 opacity: 0; 222 transform-origin: bottom center; 223 display: block; 224 flex-direction: column; 225 box-shadow: 0 5px 15px 0px #00000033; 226 border-radius: 2px; 227 overflow: auto; 228 } 229 .body-bottom{ 230 bottom: auto; 231 top: 100%; 232 transform-origin: top center; 233 } 234 :host([placement=\\"bottom\\"]) .body{ 235 bottom:unset; 236 top: 100%; 237 transition: none; 238 transform: none; 239 } 240 241 :host([rounded]) .body { 242 border-radius: 16px; 243 } 244 :host([rounded]) .root { 245 border-radius: 16px; 246 height: 25px; 247 } 248 .icon{ 249 pointer-events: none; 250 } 251 .noSelect{ 252 -moz-user-select:none; 253 -ms-user-select:none; 254 user-select:none; 255 -khtml-user-select:none; 256 -webkit-touch-callout:none; 257 -webkit-user-select:none; 258 } 259 260 :host(:not([border]):not([disabled]):focus), 261 :host([border='true']:not([disabled]):focus), 262 :host(:not([border]):not([disabled]):hover), 263 :host([border='true']:not([disabled]):hover){ 264 border:1px solid var(--bark-prompt,#ccc) 265 } 266 :host(:not([disabled]):focus) .body, 267 :host(:not([disabled]):focus-within) .body{ 268 transform: scaleY(1); 269 opacity: 1; 270 z-index: 99; 271 visibility: visible; 272 } 273 :host(:not([disabled]):focus) input{ 274 color: var(--dark-color,#bebebe); 275 } 276 .multipleRoot input::-webkit-input-placeholder { 277 color: var(--dark-color,#aab2bd); 278 } 279 :host(:not([border])[disabled]) *, 280 :host([border='true'][disabled]) *{ 281 background-color: var(--dark-background1,#f5f5f5); 282 color: #b7b7b7; 283 cursor: not-allowed; 284 } 285 :host([border='false'][disabled]) *{ 286 color: #b7b7b7; 287 cursor: not-allowed; 288 } 289 :host([loading]) .loading{ 290 display: flex; 291 } 292 :host([loading]) .icon{ 293 display: none; 294 } 295 :host(:not([loading])) .loading{ 296 display: none; 297 } 298 :host(:not([loading])) .icon{ 299 display: flex; 300 } 301 :host(:not([allow-clear])) .clear{ 302 display: none; 303 } 304 .clear{ 305 display: none; 306 color: #bfbfbf; 307 } 308 .clear:hover{ 309 color: #8c8c8c; 310 } 311 .search{ 312 display: none; 313 color: #bfbfbf; 314 } 315 .multipleRoot{ 316 display: flex; 317 flex-direction: column; 318 flex-wrap: wrap; 319 flex-flow: wrap; 320 align-items: center; 321 } 322 .tag{ 323 display: inline-flex; 324 align-items: center; 325 background-color: #f5f5f5; 326 padding: 1px 4px; 327 height: auto; 328 font-size: .75rem; 329 font-weight: bold; 330 color: #242424; 331 overflow: auto; 332 position: relative; 333 margin-right: 4px; 334 margin-top: 1px; 335 margin-bottom: 1px; 336 } 337 .tag-close{ 338 font-size: .8rem; 339 padding: 2px; 340 margin-left: 0px; 341 color: #999999; 342 } 343 .tag-close:hover{ 344 color: #333; 345 } 346 347 </style> 348 <div class=\\"root noSelect\\" tabindex=\\"0\\" hidefocus=\\"true\\"> 349 <div class=\\"multipleRoot\\"> 350 <input placeholder=\\"请选择\\" autocomplete=\\"off\\" readonly tabindex=\\"0\\"></div> 351 <lit-loading class=\\"loading\\" size=\\"12\\"></lit-loading> 352 <lit-icon class=\\"icon\\" name='down' color=\\"#c3c3c3\\"></lit-icon> 353 <lit-icon class=\\"clear\\" name='close-circle-fill'></lit-icon> 354 <lit-icon class=\\"search\\" name='search'></lit-icon> 355 </div> 356 <div class=\\"body\\"> 357 <slot></slot> 358 <slot name=\\"footer\\"></slot> 359 </div> 360 " 361`); 362 }); 363 364 it('LitSelectTest23', function () { 365 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 366 let select = document.querySelector("#litSelect") as LitSelect; 367 select.canInsert = true 368 expect(select.canInsert).toBeTruthy(); 369 }); 370 it('LitSelectTest24', function () { 371 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 372 let select = document.querySelector("#litSelect") as LitSelect; 373 select.rounded =false 374 expect(select.rounded).toBeFalsy() 375 }); 376 it('LitSelectTest25', function () { 377 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 378 let select = document.querySelector("#litSelect") as LitSelect; 379 select.placement =false 380 expect(select.placement).toBeFalsy() 381 }); 382 it('LitSelectTest26', function () { 383 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 384 let select = document.querySelector("#litSelect") as LitSelect; 385 select.border =true 386 expect(select.border).toBeTruthy() 387 }); 388 it('LitSelectTest27', function () { 389 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 390 let select = document.querySelector("#litSelect") as LitSelect; 391 select.canInsert =false 392 expect(select.canInsert).toBeFalsy() 393 }); 394 it('LitSelectTest28', function () { 395 document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>` 396 let select = document.querySelector("#litSelect") as LitSelect; 397 select.loading =false 398 expect(select.loading).toBeFalsy() 399 }); 400 401 it('LitSelectTest29', function () { 402 let lit = new LitSelect(); 403 lit.border = false; 404 expect(lit.border).toBe('false'); 405 }); 406 407 it('LitSelectTest30', function () { 408 let litSelect = document.body.innerHTML = `<lit-select id="litSelect" allow-clear> 409 <lit-select-option id="litSelectOption1" selected></lit-select-option> 410 <lit-select-option id="litSelectOption2"></lit-select-option> 411 </lit-select>` as LitSelect; 412 let select = document.querySelector("#litSelect") as LitSelect; 413 expect(select.reset()).toBeUndefined(); 414 }); 415}) 416