• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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/LitPopoverV.js";
18
19describe("LitPopoverV Test", () => {
20    it('LitPopoverV01', () => {
21        let litPopover = new LitPopover();
22        expect(litPopover).not.toBeUndefined()
23        expect(litPopover).not.toBeNull()
24    });
25    it('LitPopoverV02', () => {
26        let litPopoverV = new LitPopover();
27        expect(litPopoverV.visible).toBe("false");
28    });
29    it('LitPopoverV03', () => {
30        let litPopoverV = new LitPopover();
31        litPopoverV.visible = true;
32        expect(litPopoverV.visible).toBe("true");
33    });
34    it('LitPopoverV04', () => {
35        let litPopoverV = new LitPopover();
36        litPopoverV.visible = false;
37        expect(litPopoverV.visible).toBe("false");
38    });
39    it('LitPopoverV05', () => {
40        let litPopoverV = new LitPopover();
41        expect(litPopoverV.trigger).toBe("hover");
42    });
43    it('LitPopoverV06', () => {
44        let litPopoverV = new LitPopover();
45        litPopoverV.trigger = "click";
46        expect(litPopoverV.trigger).toBe("click");
47    });
48
49    it('LitPopoverV07', () => {
50        let litPopoverV = new LitPopover();
51        litPopoverV.title = "test";
52        expect(litPopoverV.title).toBe("test");
53    });
54
55    it('LitPopoverV08', () => {
56        let litPopoverV = new LitPopover();
57        litPopoverV.width = "10px";
58        expect(litPopoverV.width).toBe("10px");
59    });
60
61    it('LitPopoverV09', () => {
62        let litPopoverV = new LitPopover();
63        litPopoverV.width = "10px";
64        expect(litPopoverV.width).toBe("10px");
65    });
66
67    it('LitPopoverV10', () => {
68        let litPopoverV = new LitPopover();
69        expect(litPopoverV.width).toBe("max-content");
70    });
71
72
73    it('LitPopoverV11', () => {
74        let litPopoverV = new LitPopover();
75        expect(litPopoverV.haveRadio).toBeNull();
76    });
77
78    it('LitPopoverV12', () => {
79        document.body.innerHTML =  `<lit-popover id="litpop"></lit-popover>`
80        let popver = document.querySelector("#litpop") as LitPopover;
81        expect(popver.haveRadio).toBeNull();
82    });
83
84    it('LitPopoverV13', () => {
85        let litPopoverV = new LitPopover();
86        expect(litPopoverV.initHtml()).toMatchInlineSnapshot(`
87"
88        <style>
89        :host{
90            outline: none;
91            display:inline-block;
92            position: relative;
93            overflow: visible;
94        }
95
96        .title{
97            padding: 6px 15px;
98            font-weight: bold;
99            font-size: 0.9rem;
100            border-bottom: 1px solid #f0f0f0;
101        }
102        .content{
103            padding: 10px 15px;
104        }
105       .trigger-click {
106            position: absolute;
107            visibility: hidden;
108            z-index: -100;
109            width: 100%;
110            height: 100%;
111        }
112        /*通用*/
113        .popover{
114            width: max-content;
115            min-width: 160px;
116            display: flex;
117            flex-direction: column;
118            visibility: hidden;
119            opacity: 0;
120            transition: all 0.3s;
121            z-index: 1;
122            position: absolute;
123            border-radius: 2px;
124            background-color: var(--dark-background3,#fff);
125            box-shadow: 0 0 20px #00000044;
126        }
127        .popover:after{
128            content: '';
129            display: flex;
130            position: absolute;
131            width: 12px;
132            height: 12px;
133            background: linear-gradient(45deg, var(--dark-background3,#FFFFFF),
134            var(--dark-background3,#FFFFFF) 50%, transparent 50%, transparent 100%);
135        }
136        :host(:not([placement])) .popover,
137        :host([placement='top']) .popover{
138            top: 0;
139            left: 50%;
140            right: 0;
141            transform: translate(-50%,calc(-100% - 12px)) scale(0.5);
142            transform-origin: bottom;
143        }
144        :host(:not([placement])) .popover:after,
145        :host([placement='top']) .popover:after{
146            border-top: 6px solid #fff;
147            left: 0;
148            top: calc(100%);
149            transform: translate(-50%,0%);
150            left: 50%;
151        }
152        :host(:not([placement])[trigger='hover']:hover)  .popover,
153        :host(:not([placement]):not([trigger]):hover)  .popover,
154        :host([placement='top'][trigger='hover']:hover)  .popover,
155        :host([placement='top']:not([trigger]):hover)  .popover {
156            visibility: visible;
157            opacity: 1;
158            transform: translate(-50%,calc(-100% - 12px)) scale(1);
159        }
160        :host(:not([placement])[trigger='click']) input[type=checkbox]:checked ~ .popover,
161        :host([placement='top'][trigger='click']) input[type=checkbox]:checked ~ .popover {
162            visibility: visible;
163            opacity: 1;
164            transform: translate(-50%,calc(-100% - 12px)) scale(1);
165        }
166        :host([placement='topLeft']) .popover{
167            top: 0;
168            left: 50%;
169            right: 0;
170            transform: translate(0,calc(-100% - 12px)) scale(0.5);
171            transform-origin: left bottom;
172        }
173        :host([placement='topLeft']) .popover:after{
174            top: 99%;
175            transform: rotateX(180deg);
176        }
177        :host([placement='topLeft']:not([trigger]):hover)  .popover,
178        :host([placement='topLeft'][trigger='hover']:hover)  .popover {
179            visibility: visible;
180            opacity: 1;
181            transform: translate(0%,calc(-100% - 12px)) scale(1);
182        }
183        :host([placement='topLeft'][trigger='click']) input[type=checkbox]:checked ~ .popover {
184            visibility: visible;
185            opacity: 1;
186            transform: translate(0%,calc(-100% - 12px)) scale(1);
187        }
188        :host([placement='topRight']) .popover{
189            top: 0;
190            right: 0;
191            transform: translate(0,calc(-100% - 12px)) scale(0.5);
192            transform-origin: right bottom;
193        }
194        :host([placement='topRight']) .popover:after{
195            border-top: 6px solid #fff;
196            top: calc(100%);
197            transform: translate(0%,0%);
198            right: 20px;
199        }
200        :host([placement='topRight']:not([trigger]):hover)  .popover,
201        :host([placement='topRight'][trigger='hover']:hover)  .popover {
202            visibility: visible;
203            opacity: 1;
204            transform: translate(0%,calc(-100% - 12px)) scale(1);
205        }
206        :host([placement='topRight'][trigger='click']) input[type=checkbox]:checked ~ .popover {
207            visibility: visible;
208            opacity: 1;
209            transform: translate(0%,calc(-100% - 12px)) scale(1);
210        }
211        :host([placement='leftTop']) .popover{
212            top: 0;
213            right: 100%;
214            transform: translate(-12px,0) scale(0.5);
215            transform-origin: right top;
216        }
217        :host([placement='leftTop']) .popover:after{
218            border-left: 6px solid #fff;
219            top: 10px;
220            right: -12px;
221            transform: translate(0px,0%);
222        }
223        :host([placement='leftTop']:not([trigger]):hover)  .popover,
224        :host([placement='leftTop'][trigger='hover']:hover)  .popover {
225            visibility: visible;
226            opacity: 1;
227            right: 100%;
228            transform: translate(-12px,0) scale(1);
229        }
230        :host([placement='leftTop'][trigger='click']) input[type=checkbox]:checked ~ .popover {
231            visibility: visible;
232            opacity: 1;
233            transform: translate(-12px,0) scale(1);
234        }
235        :host([placement='left']) .popover{
236            right: 100%;
237            top: 50%;
238            transform: translate(-12px,-50%) scale(0.5);
239            transform-origin: right center;
240        }
241        :host([placement='left']) .popover:after{
242            border-left: 6px solid #fff;
243            top: 50%;
244            right: -12px;
245            transform: translate(0px,-50%);
246        }
247        :host([placement='left']:not([trigger]):hover)  .popover,
248        :host([placement='left'][trigger='hover']:hover)  .popover {
249            visibility: visible;
250            opacity: 1;
251            right: 100%;
252            transform: translate(-12px,-50%) scale(1);
253        }
254        :host([placement='left'][trigger='click']) input[type=checkbox]:checked ~ .popover {
255            visibility: visible;
256            opacity: 1;
257            transform: translate(-12px,-50%) scale(1);
258        }
259        :host([placement='leftBottom']) .popover{
260            right: 100%;
261            bottom: 0;
262            transform: translate(-12px,0%) scale(0.5);
263            transform-origin: right bottom;
264        }
265        :host([placement='leftBottom']) .popover:after{
266            border-left: 6px solid #fff;
267            bottom: 10px;
268            right: -12px;
269            transform: translate(0px,-50%);
270        }
271        :host([placement='leftBottom']:not([trigger]):hover)  .popover,
272        :host([placement='leftBottom'][trigger='hover']:hover)  .popover {
273            visibility: visible;
274            opacity: 1;
275            right: 100%;
276            transform: translate(-12px,0%) scale(1);
277        }
278        :host([placement='leftBottom'][trigger='click']) input[type=checkbox]:checked ~ .popover {
279            visibility: visible;
280            opacity: 1;
281            transform: translate(-12px,0%) scale(1);
282        }
283        :host([placement='rightTop']) .popover{
284            top: 0;
285            left: 100%;
286            transform: translate(12px,0) scale(0.5);
287            transform-origin: left top;
288        }
289        :host([placement='rightTop']) .popover:after{
290            border-right: 6px solid #fff;
291            top: 10px;
292            left: -12px;
293            transform: translate(0px,0%);
294        }
295        :host([placement='rightTop']:not([trigger]):hover)  .popover,
296        :host([placement='rightTop'][trigger='hover']:hover)  .popover {
297            visibility: visible;
298            opacity: 1;
299            left: 100%;
300            transform: translate(12px,0) scale(1);
301        }
302        :host([placement='rightTop'][trigger='click']) input[type=checkbox]:checked ~ .popover {
303            visibility: visible;
304            opacity: 1;
305            transform: translate(12px,0) scale(1);
306        }
307        :host([placement='right']) .popover{
308            top: 50%;
309            left: 100%;
310            transform: translate(12px,-50%) scale(0.5);
311            transform-origin: left center;
312        }
313        :host([placement='right']) .popover:after{
314            border-right: 6px solid #fff;
315            top: 50%;
316            left: -12px;
317            transform: translate(0px,-50%);
318        }
319        :host([placement='right']:not([trigger]):hover)  .popover,
320        :host([placement='right'][trigger='hover']:hover)  .popover {
321            visibility: visible;
322            opacity: 1;
323            left: 100%;
324            transform: translate(12px,-50%) scale(1);
325        }
326        :host([placement='right'][trigger='click']) input[type=checkbox]:checked ~ .popover {
327            visibility: visible;
328            opacity: 1;
329            transform: translate(12px,-50%) scale(1);
330        }
331        :host([placement='rightBottom']) .popover{
332            bottom: 0;
333            left: 100%;
334            transform: translate(12px,0%) scale(0.5);
335            transform-origin: left bottom;
336        }
337        :host([placement='rightBottom']) .popover:after{
338            border-right: 6px solid #fff;
339            left: -12px;
340            bottom: 10px;
341            transform: translate(0px,0);
342        }
343        :host([placement='rightBottom']:not([trigger]):hover)  .popover,
344        :host([placement='rightBottom'][trigger='hover']:hover)  .popover {
345            visibility: visible;
346            opacity: 1;
347            bottom: 0;
348            transform: translate(12px,0%) scale(1);
349        }
350        :host([placement='rightBottom'][trigger='click']) input[type=checkbox]:checked ~ .popover {
351            visibility: visible;
352            opacity: 1;
353            transform: translate(12px,0%) scale(1);
354        }
355
356        :host([placement='bottomLeft']) .popover{
357            bottom: 0;
358            /*left: 0;*/
359            left: 8px;
360            right: 0;
361            transform: translate(0,calc(100% + 12px)) scale(0.5);
362            transform-origin: top left;
363        }
364        :host([placement='bottomLeft']) .popover:after{
365            bottom: calc(100%);
366            transform: translate(0%,0%);
367            left: 0;
368        }
369        :host([placement='bottomLeft']:not([trigger]):hover)  .popover,
370        :host([placement='bottomLeft'][trigger='hover']:hover)  .popover {
371            visibility: visible;
372            opacity: 1;
373            transform: translate(0%,calc(100% + 12px)) scale(1);
374        }
375        :host([placement='bottomLeft'][trigger='click']) input[type=checkbox]:checked ~ .popover {
376            visibility: visible;
377            opacity: 1;
378            transform: translate(0%,calc(100% + 12px)) scale(1);
379        }
380        :host([placement='bottom']) .popover{
381            bottom: 0;
382            left: 50%;
383            right: 0;
384            transform: translate(-50%,calc(100% + 12px)) scale(0.5);
385            transform-origin: top center;
386        }
387        :host([placement='bottom']) .popover:after{
388            border-bottom: 6px solid #fff;
389            bottom: calc(100%);
390            transform: translate(-50%,0%);
391            left: 50%;
392        }
393        :host([placement='bottom']:not([trigger]):hover)  .popover,
394        :host([placement='bottom'][trigger='hover']:hover)  .popover {
395            visibility: visible;
396            opacity: 1;
397            transform: translate(-50%,calc(100% + 12px)) scale(1);
398        }
399        :host([placement='bottom'][trigger='click']) input[type=checkbox]:checked ~ .popover {
400            visibility: visible;
401            opacity: 1;
402            transform: translate(-50%,calc(100% + 12px)) scale(1);
403        }
404        /*bottomRight*/
405        :host([placement='bottomRight']) .popover{
406            bottom: 0;
407            right: 0;
408            transform: translate(0%,calc(100% + 12px)) scale(0.5);
409            transform-origin: top right;
410        }
411        :host([placement='bottomRight']) .popover:after{
412            border-bottom: 6px solid #fff;
413            bottom: calc(100%);
414            transform: translate(-50%,0%);
415            right: 10px;
416        }
417        :host([placement='bottomRight']:not([trigger]):hover)  .popover,
418        :host([placement='bottomRight'][trigger='hover']:hover)  .popover {
419            visibility: visible;
420            opacity: 1;
421            transform: translate(0,calc(100% + 12px)) scale(1);
422        }
423        :host([placement='bottomRight'][trigger='click']) input[type=checkbox]:checked ~ .popover {
424            visibility: visible;
425            opacity: 1;
426            transform: translate(0%,calc(100% + 12px)) scale(1);
427        }
428        :host(:not([title])) .title{
429            display: none;
430        }
431        </style>
432        <input class=\\"trigger-click\\" type=\\"checkbox\\">
433        <div class=\\"popover\\" title=\\"\\">
434            <div class=\\"title\\">null</div>
435            <div class=\\"content\\"><slot name=\\"content\\" ></slot></div>
436        </div>
437        <slot></slot>
438        "
439`);
440    });
441    it('LitPopoverV14', () => {
442        document.body.innerHTML =  `<lit-popover id="litpop"></lit-popover>`
443        let popver = document.querySelector("#litpop") as LitPopover;
444        expect(popver.adoptedCallback()).toBeUndefined()
445    });
446});