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 {LitPopover} from "../../../dist/base-ui/popover/LitPopover.js"; 18 19describe("LitPopover Test", () => { 20 it('LitPopover01', () => { 21 let litPopover = new LitPopover(); 22 expect(litPopover).not.toBeUndefined() 23 expect(litPopover).not.toBeNull() 24 }); 25 26 it('LitPopover02', () => { 27 let litPopover = new LitPopover(); 28 expect(litPopover.open).toBeFalsy() 29 }); 30 31 it('LitPopover03', () => { 32 let litPopover = new LitPopover(); 33 litPopover.open = true 34 expect(litPopover.open).toBeTruthy() 35 }); 36 37 it('LitPopover04', () => { 38 let litPopover = new LitPopover(); 39 litPopover.open = false 40 expect(litPopover.open).toBeFalsy() 41 }); 42 43 it('LitPopover05', () => { 44 let litPopover = new LitPopover(); 45 litPopover.direction = "topleft" 46 expect(litPopover.direction).toEqual("topleft") 47 }); 48 49 it('LitPopover06', () => { 50 let litPopover = new LitPopover(); 51 expect(litPopover.direction).toEqual("topright") 52 }); 53 54 it('LitPopover07', () => { 55 let litPopover = new LitPopover(); 56 litPopover.type = "multiple" 57 litPopover.dataSource = [{ 58 text: "# Samples", 59 isSelected: true 60 }] 61 expect(litPopover.select).toEqual(["# Samples"]) 62 }); 63 64 it('LitPopover07', () => { 65 let litPopover = new LitPopover(); 66 litPopover.type = "radio" 67 litPopover.dataSource = [{ 68 text: "# Samples", 69 isSelected: true 70 }] 71 expect(litPopover.select).toEqual(["# Samples"]) 72 }); 73 74 it('LitPopover08', () => { 75 let litPopover = new LitPopover(); 76 litPopover.type = "multiple-text" 77 litPopover.dataSource = [{ 78 text: "# Samples", 79 isSelected: true 80 }] 81 expect(litPopover.select).toEqual(["# Samples"]) 82 }); 83 84 it('LitPopover09', () => { 85 let litPopover = new LitPopover(); 86 litPopover.type = "radio" 87 litPopover.title = "tee" 88 litPopover.dataSource = [{ 89 text: "# Samples", 90 isSelected: true 91 }] 92 expect(litPopover.select).toEqual(["# Samples"]) 93 }); 94 95 it('LitPopover10', () => { 96 let litPopover = new LitPopover(); 97 litPopover.type = "multiple-text" 98 litPopover.title = "tee" 99 litPopover.dataSource = [{ 100 text: "# Samples", 101 isSelected: true 102 }] 103 expect(litPopover.trigger).not.toBeUndefined(); 104 }); 105 106 it('LitPopover11', () => { 107 let litPopover = new LitPopover(); 108 litPopover.type = "multiple-text" 109 litPopover.title = "tee" 110 litPopover.dataSource = [{ 111 text: "# Samples", 112 isSelected: false 113 }] 114 expect(litPopover.limit).toEqual({textLowerLimit:"0",textUpperLimit:"∞"}); 115 }); 116 117 it('LitPopover14', () => { 118 let litPopover = new LitPopover(); 119 litPopover.type = "data-ming" 120 litPopover.title = "tee" 121 litPopover.dataSource = [{ 122 text: "# Samples", 123 isSelected: false 124 }] 125 expect(litPopover.limit).toEqual({textLowerLimit:"",textUpperLimit:""}); 126 }); 127 128 it('LitPopover15', () => { 129 let litPopover = new LitPopover(); 130 litPopover.type = "multiple-text" 131 litPopover.title = "tee" 132 litPopover.dataSource = [{ 133 text: "# Samples", 134 isSelected: true 135 }] 136 expect(litPopover.limit).toEqual({textLowerLimit:"0",textUpperLimit:"∞"}); 137 }); 138 139 it('LitPopover12', () => { 140 let litPopover = new LitPopover(); 141 expect(litPopover.initHtml()).toMatchInlineSnapshot(` 142" 143 <style> 144 :host { 145 display:inline-block; 146 position:relative; 147 overflow:visible; 148 } 149 :host([direction=\\"top\\"]) ::slotted(lit-pop-content){ 150 bottom:100%; 151 left:50%; 152 transform:translate(-50%,-10px) scale(0); 153 transform-origin: center bottom; 154 } 155 :host([direction=\\"top\\"]) ::slotted(lit-pop-content)::after{ 156 content: ''; 157 position: absolute; 158 top: 100%; 159 left: 50%; 160 border-top: 10px solid #FFF; 161 border-right: 10px solid transparent; 162 border-left: 10px solid transparent; 163 164 } 165 :host([direction=\\"top\\"]) ::slotted(lit-pop-content[open]), 166 :host([direction=\\"top\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 167 :host([direction=\\"top\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 168 transform:translate(-50%,-10px) scale(1); 169 } 170 171 :host([direction=\\"bottom\\"]) ::slotted(lit-pop-content){ 172 top:100%; 173 left:50%; 174 transform:translate(-50%,10px) scale(0); 175 transform-origin: center top; 176 } 177 :host([direction=\\"bottom\\"]) ::slotted(lit-pop-content)::after{ 178 content: ''; 179 position: absolute; 180 bottom: 100%; 181 left: 50%; 182 border-bottom: 10px solid #FFF; 183 border-right: 10px solid transparent; 184 border-left: 10px solid transparent; 185 } 186 :host([direction=\\"bottom\\"]) ::slotted(lit-pop-content[open]), 187 :host([direction=\\"bottom\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 188 :host([direction=\\"bottom\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 189 transform:translate(-50%,10px) scale(1); 190 } 191 192 193 :host([direction=\\"left\\"]) ::slotted(lit-pop-content){ 194 right:100%; 195 top:50%; 196 transform:translate(-10px,-50%) scale(0); 197 transform-origin: right; 198 } 199 :host([direction=\\"left\\"]) ::slotted(lit-pop-content)::after{ 200 content: ''; 201 position: absolute; 202 bottom: 40%; 203 left: 100%; 204 border-left: 10px solid #FFF; 205 border-bottom: 10px solid transparent; 206 border-top: 10px solid transparent; 207 } 208 :host([direction=\\"left\\"]) ::slotted(lit-pop-content[open]), 209 :host([direction=\\"left\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 210 :host([direction=\\"left\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 211 transform:translate(-10px,-50%) scale(1); 212 } 213 :host([direction=\\"right\\"]) ::slotted(lit-pop-content){ 214 left:100%; 215 top:50%; 216 transform:translate(10px,-50%) scale(0); 217 transform-origin: left; 218 } 219 :host([direction=\\"right\\"]) ::slotted(lit-pop-content)::after{ 220 content: ''; 221 position: absolute; 222 bottom: 40%; 223 right: 100%; 224 border-right: 10px solid #FFF; 225 border-bottom: 10px solid transparent; 226 border-top: 10px solid transparent; 227 } 228 :host([direction=\\"right\\"]) ::slotted(lit-pop-content[open]), 229 :host([direction=\\"right\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 230 :host([direction=\\"right\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 231 transform:translate(10px,-50%) scale(1); 232 } 233 234 235 236 :host([direction=\\"leftbottom\\"]) ::slotted(lit-pop-content){ 237 right:100%; 238 top:0; 239 transform:translate(-10px) scale(0); 240 } 241 :host([direction=\\"leftbottom\\"]) ::slotted(lit-pop-content[open]), 242 :host([direction=\\"leftbottom\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 243 :host([direction=\\"leftbottom\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 244 transform:translate(-10px) scale(1); 245 } 246 247 :host([direction=\\"leftbottom\\"]) ::slotted(lit-pop-content)::after{ 248 content: ''; 249 position: absolute; 250 top: 10%; 251 left: 100%; 252 border-left: 10px solid #FFF; 253 border-bottom: 10px solid transparent; 254 } 255 256 :host([direction=\\"lefttop\\"]) ::slotted(lit-pop-content){ 257 right:100%; 258 bottom:0; 259 transform:translate(-10px) scale(0); 260 transform-origin: right bottom; 261 } 262 :host([direction=\\"lefttop\\"]) ::slotted(lit-pop-content)::after{ 263 content: ''; 264 position: absolute; 265 bottom: 10%; 266 left: 100%; 267 border-left: 10px solid #FFF; 268 border-top: 10px solid transparent; 269 } 270 :host([direction=\\"lefttop\\"]) ::slotted(lit-pop-content[open]), 271 :host([direction=\\"lefttop\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 272 :host([direction=\\"lefttop\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 273 transform:translate(-10px) scale(1); 274 } 275 :host([direction=\\"topright\\"]) ::slotted(lit-pop-content){ 276 bottom:100%; 277 left:50%; 278 transform:translate(0,-10px) scale(0); 279 transform-origin: left bottom; 280 } 281 :host([direction=\\"topright\\"]) ::slotted(lit-pop-content)::after{ 282 content: ''; 283 position: absolute; 284 top: 100%; 285 left: 0%; 286 border-top: 10px solid #FFF; 287 border-right: 10px solid transparent; 288 } 289 :host([direction=\\"topright\\"]) ::slotted(lit-pop-content[open]), 290 :host([direction=\\"topright\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 291 :host([direction=\\"topright\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 292 transform:translate(0,-10px) scale(1); 293 } 294 295 296 :host([direction=\\"topleft\\"]) ::slotted(lit-pop-content){ 297 bottom:100%; 298 right:50%; 299 transform:translate(0,-10px) scale(0); 300 transform-origin: right bottom; 301 } 302 :host([direction=\\"topleft\\"]) ::slotted(lit-pop-content)::after{ 303 content: ''; 304 position: absolute; 305 top: 100%; 306 right: 0%; 307 border-top: 10px solid #FFF; 308 border-left: 10px solid transparent; 309 } 310 :host([direction=\\"topleft\\"]) ::slotted(lit-pop-content[open]), 311 :host([direction=\\"topleft\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 312 :host([direction=\\"topleft\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 313 transform:translate(0,-10px) scale(1); 314 } 315 316 317 :host([direction=\\"rightbottom\\"]) ::slotted(lit-pop-content){ 318 left:100%; 319 top:0; 320 transform:translate(10px) scale(0); 321 transform-origin: left top; 322 } 323 :host([direction=\\"rightbottom\\"]) ::slotted(lit-pop-content)::after{ 324 content: ''; 325 position: absolute; 326 top: 10%; 327 right: 100%; 328 border-top: 10px solid #FFF; 329 border-left: 10px solid transparent; 330 } 331 :host([direction=\\"rightbottom\\"]) ::slotted(lit-pop-content[open]), 332 :host([direction=\\"rightbottom\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 333 :host([direction=\\"rightbottom\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 334 transform:translate(10px) scale(1); 335 } 336 :host([direction=\\"righttop\\"]) ::slotted(lit-pop-content){ 337 left:100%; 338 bottom:0; 339 transform:translate(10px) scale(0); 340 transform-origin: left bottom; 341 } 342 :host([direction=\\"righttop\\"]) ::slotted(lit-pop-content[open]), 343 :host([direction=\\"righttop\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 344 :host([direction=\\"righttop\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 345 transform:translate(10px) scale(1); 346 } 347 :host([direction=\\"righttop\\"]) ::slotted(lit-pop-content)::after{ 348 content: ''; 349 position: absolute; 350 bottom: 10%; 351 right: 100%; 352 border-bottom: 10px solid #FFF; 353 border-left: 10px solid transparent; 354 } 355 356 :host([direction=\\"bottomright\\"]) ::slotted(lit-pop-content), 357 :host(:not([direction])) ::slotted(lit-pop-content){ 358 left:0; 359 top:100%; 360 transform:translate(0,10px) scale(0); 361 transform-origin: left top; 362 } 363 :host([direction=\\"bottomright\\"]) ::slotted(lit-pop-content)::after, 364 :host(:not([direction])) ::slotted(lit-pop-content)::after{ 365 content: ''; 366 position: absolute; 367 left: 10%; 368 bottom: 100%; 369 border-bottom: 10px solid #FFF; 370 border-right: 10px solid transparent; 371 } 372 :host(:not([direction])) ::slotted(lit-pop-content[open]), 373 :host(:not([direction])[trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 374 :host(:not([direction])[trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content), 375 :host([direction=\\"bottomright\\"]) ::slotted(lit-pop-content[open]), 376 :host([direction=\\"bottomright\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 377 :host([direction=\\"bottomright\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 378 transform:translate(0,10px) scale(1); 379 } 380 381 :host([direction=\\"bottomleft\\"]) ::slotted(lit-pop-content){ 382 right:0; 383 top:100%; 384 transform:translate(0,10px) scale(0); 385 transform-origin: right top; 386 } 387 :host([direction=\\"bottomleft\\"]) ::slotted(lit-pop-content)::after, 388 :host(:not([direction])) ::slotted(lit-pop-content)::after{ 389 content: ''; 390 position: absolute; 391 right: 10%; 392 bottom: 100%; 393 border-bottom: 10px solid #FFF; 394 border-left: 10px solid transparent; 395 } 396 :host([direction=\\"bottomleft\\"]) ::slotted(lit-pop-content[open]), 397 :host([direction=\\"bottomleft\\"][trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 398 :host([direction=\\"bottomleft\\"][trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 399 transform:translate(0,10px) scale(1); 400 } 401 402 :host ::slotted(lit-pop-content[open]), 403 :host([trigger=\\"hover\\"]:hover) ::slotted(lit-pop-content), 404 :host([trigger=\\"focus\\"]:focus-within) ::slotted(lit-pop-content){ 405 opacity:1; 406 visibility:visible; 407 } 408 slot{ 409 } 410 </style> 411 <slot></slot> 412 " 413`); 414 }); 415 416 it('LitPopover13', () => { 417 let litPopover = new LitPopover(); 418 expect(litPopover.connectedCallback()).toBeUndefined() 419 }); 420 421 it('LitPopover16', () => { 422 const onclick = jest.fn(); 423 let litPopover = document.body.innerHTML = ` 424 <lit-popover id='popover'></lit-popover> 425 ` 426 const popover = document.getElementById('popover'); 427 expect(onclick).not.toBeCalled(); 428 popover!.onclick = onclick; 429 popover!.click(); 430 expect(onclick).toBeCalled(); 431 expect(onclick).toHaveBeenCalledTimes(1); 432 }); 433}) 434