• 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 {LitTabs} from "../../../dist/base-ui/tabs/lit-tabs.js";
18
19window.ResizeObserver = window.ResizeObserver ||
20    jest.fn().mockImplementation(() => ({
21        disconnect: jest.fn(),
22        observe: jest.fn(),
23        unobserve: jest.fn(),
24    }));
25
26describe('LitSwitch Test', ()=>{
27    let litTabs = new LitTabs();
28
29    litTabs.position = 'position'
30    litTabs.mode = 'mode'
31    litTabs.activekey = 'activekey'
32
33
34        litTabs.nav = jest.fn(()=>{
35        let el = document.createElement('div');
36        let htmlDivElement = document.createElement('div');
37        htmlDivElement.setAttribute('class', 'nav-item[data-key=\'${key}\']')
38
39        el.appendChild(htmlDivElement)
40        return el
41    })
42
43    LitTabs.nav = jest.fn(()=>{
44        return document.createElement('div') as HTMLDivElement
45    })
46
47    LitTabs.nav.querySelectorAll = jest.fn(()=>{
48        return ['fd']
49    })
50
51    it('litTabsTest1', ()=>{
52        expect(litTabs.activekey).toBe('activekey');
53    })
54
55    it('litTabsTest01', ()=>{
56        expect(litTabs.onTabClick).toBeUndefined();
57    })
58
59    it('litTabsTest02', ()=>{
60        litTabs.nav = jest.fn(()=> true)
61        litTabs.nav.querySelector = jest.fn(()=> {
62            return document.createElement('div') as HTMLDivElement
63        })
64        litTabs.nav.querySelectorAll = jest.fn(()=> true)
65        expect(litTabs.updateDisabled('key', 'value')).toBeUndefined();
66    })
67
68    it('litTabsTest03', ()=>{
69        litTabs.nav = jest.fn(()=> true)
70        litTabs.nav.querySelector = jest.fn(()=> {
71            return document.createElement('div') as HTMLDivElement
72        })
73        litTabs.nav.querySelectorAll = jest.fn(()=> true)
74        expect(litTabs.updateCloseable('key', 'value')).toBeUndefined();
75    })
76
77    it('litTabsTest04', ()=>{
78        litTabs.nav = jest.fn(()=> true)
79        litTabs.nav.querySelector = jest.fn(()=> {
80            return document.createElement('div') as HTMLDivElement
81        })
82        litTabs.nav.querySelectorAll = jest.fn(()=> true)
83
84        expect(litTabs.updateHidden('key', "true")).toBeUndefined();
85    })
86
87    it('litTabsTest13', ()=>{
88        litTabs.nav = jest.fn(()=> true)
89        litTabs.nav.querySelector = jest.fn(()=> {
90            return document.createElement('div') as HTMLDivElement
91        })
92        litTabs.nav.querySelectorAll = jest.fn(()=> true)
93
94        expect(litTabs.updateHidden('key', !"true")).toBeUndefined();
95    })
96
97    it('litTabsTest05', ()=>{
98        expect(litTabs.initTabPos()).toBeUndefined();
99    })
100
101    it('litTabsTest07', ()=>{
102    //     litTabs.nav.querySelectorAll = jest.fn(()=> true)
103    //     litTabs.nav.querySelectorAll.forEach = jest.fn(()=> true)
104        expect(litTabs.activeByKey(null||undefined)).toBeUndefined();
105    })
106
107    it('litTabsTest06', ()=>{
108        expect(litTabs.activePane('Key')).toBeFalsy();
109    })
110
111    it('litTabsTest007', ()=>{
112        expect(litTabs.connectedCallback()).toBeUndefined()
113    })
114    it('litTabsTest8', ()=>{
115        expect(litTabs.attributeChangedCallback('activekey', 'disabled', 'activekey')).toBeUndefined()
116    })
117
118    it('litTabsTest9', ()=>{
119        expect(litTabs.adoptedCallback()).toBeUndefined();
120    })
121
122    it('litTabsTest09', ()=>{
123        expect(litTabs.disconnectedCallback()).toBeUndefined();
124    })
125    it('litTabsTest10', ()=>{
126        expect(litTabs.position).toBe('position');
127    })
128
129    it('litTabsTest11', ()=>{
130        expect(litTabs.mode).toBe('mode');
131    })
132
133    it('litTabsTest12', ()=>{
134        expect(litTabs.shadowRoot.innerHTML).toMatchInlineSnapshot(`
135"
136        <style>
137        :host{
138            display: block;
139            text-align: unset;
140            color: var(--dark-color1,#252525);
141            background-color: var(--dark-background,#FFFFFF);
142            box-shadow: #00000033 0 0 10px ;
143        }
144        ::slotted(lit-tabpane){
145            box-sizing:border-box;
146            width:100%;
147            height:100%;
148            flex-shrink:0;
149            overflow:auto;
150        }
151        .nav-item{
152            display: inline-flex;
153            justify-content: center;
154            align-items: center;
155            /*padding: 6px 0px 6px 12px;*/
156            padding: 0px 6px;
157            font-size: .9rem;
158            font-weight: normal;
159            cursor: pointer;
160            transition: all 0.3s;
161            flex-shrink: 0;
162        }
163        .nav-item lit-icon{
164            margin-right: 2px;
165            font-size: inherit;
166        }
167
168        .nav-item[data-disabled]{
169            pointer-events: all;
170            cursor: not-allowed;
171            color: #bfbfbf;
172        }
173        .nav-item[data-hidden]{
174            pointer-events: all;
175            cursor: not-allowed;
176            color: #bfbfbf;
177            display: none;
178        }
179
180        .tab-content{
181            display: block;
182            background-color: #fff;
183            flex:1;
184        }
185
186        /*
187         *   top  top-left top-center top-right
188         */
189        :host(:not([position])) .nav-root,
190        :host([position^='top']) .nav-root{
191            display: flex;
192            position: relative;
193            height: 38px;
194            /*justify-content: center;*/
195            /*align-items: center;*/
196        }
197        :host(:not([mode]):not([position])) .tab-line,/*移动的线条*/
198        :host([mode='flat'][position^='top']) .tab-line{
199            position:absolute;
200        }
201
202        :host(:not([position])) .tab-nav-container,
203        :host([position^='top']) .tab-nav-container{
204            display: flex;
205            /*position: relative;*/
206            /*flex-direction: column;*/
207            /*overflow-y: hidden;*/
208            /*overflow-x: auto;*/
209            /*overflow: -moz-scrollbars-none; */
210            /*-ms-overflow-style: none;*/
211            /*transition: all 0.3s;*/
212            position: absolute;
213            overflow: auto;
214            height: 850px;
215            transform: rotateZ(-90deg) rotateY(180deg);
216            transform-origin: left top;
217            overflow-x: hidden;
218            width: 38px;
219        }
220        :host([position='top']) .tab-nav,
221        :host([position='top-left']) .tab-nav{
222            display: flex;
223            position: relative;
224            justify-content: flex-start;
225            cursor: row-resize;
226            user-select: none;
227            margin-top: 6px;
228            margin-left: 5px;
229
230            transform: translateY(-38px) rotateZ(90deg) rotateX(180deg) translateY(38px);
231            transform-origin: left bottom;
232            flex-wrap: nowrap;
233            height: 38px;
234        }
235        :host([position='top-center']) .tab-nav{
236            display: flex;
237            justify-content: center;
238        }
239        :host([position='top-right']) .tab-nav{
240            display: flex;
241            justify-content: flex-end;
242        }
243
244        :host([position^='top'][mode='card']) .nav-item{
245            border-top: 1px solid var(--dark-border1,#f0f0f0);
246            border-left: 1px solid var(--dark-border1,#f0f0f0);
247            border-right: 1px solid var(--dark-border1,#f0f0f0);
248            bottom: 0px;
249            margin-right: 2px;
250            position: relative;
251            height: 100%;
252        }
253        :host([position^='top']) .tab-nav-bg-line{
254            position: absolute;bottom: 0;height: 1px;
255            width: 100%
256        }
257        :host([position^='top'][mode='card']) .nav-item:not([data-selected]){
258            border-top-left-radius: 5px;
259            border-top-right-radius: 5px;
260            background-color: var(--dark-border1,#D8D8D8);
261            color: var(--dark-color1,#212121);
262        }
263        :host([position^='top'][mode='card']) .nav-item[data-selected]{
264            background-color: var(--dark-background,#ffffff);
265            bottom: 0px;
266            color: var(--dark-color1,#212121);
267            border-top: 1px solid var(--dark-border1,#bababa);
268            border-top-left-radius: 5px;
269            border-top-right-radius: 5px;
270            border-left: 1px solid var(--dark-border1,#bababa);
271            border-right: 1px solid var(--dark-border1,#bababa);
272        }
273        /*
274            bottom bottom-left bottom-center bottom-right
275        */
276        :host([position^='bottom']) .tab{
277            display: flex;
278            flex-direction: column-reverse;
279        }
280        :host([mode='flat'][position^='bottom']) .tab-line{
281            position:absolute;
282            top: -3px;
283            background-color: #42b983;
284            height: 2px;
285            transform: translateY(-100%);
286            transition: all 0.3s;
287        }
288        :host([position^='bottom']) .tab-nav-container{
289            display: flex;
290            position: relative;
291            flex-direction: column;
292            overflow-x: auto;
293            overflow-y: visible;
294            overflow: -moz-scrollbars-none;
295            -ms-overflow-style: none;
296            transition: all 0.3s;
297            flex: 1;
298            border-top: #f0f0f0 1px solid;
299        }
300        :host([position^='bottom']) .nav-root{
301            display: flex;
302            justify-content: center;
303            align-items: center;
304        }
305        :host([position='bottom']) .tab-nav,
306        :host([position='bottom-left']) .tab-nav{
307            display: flex;
308            position: relative;
309            justify-content: flex-start;
310        }
311        :host([position='bottom-center']) .tab-nav{
312            display: flex;
313            justify-content: center;
314        }
315        :host([position='bottom-right']) .tab-nav{
316            display: flex;
317            justify-content: flex-end;
318        }
319        :host([position^='bottom'][mode='card']) .nav-item{
320            border-top: 1px solid #ffffff;
321            border-left: 1px solid #f0f0f0;
322            border-right: 1px solid #f0f0f0;
323            border-bottom: 1px solid #f0f0f0;
324            top: -1px;
325            margin-right: 2px;
326            position: relative;
327        }
328        :host([position^='bottom']) .tab-nav-bg-line{
329            position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
330        }
331        :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
332            background-color: #f5f5f5;
333            border-top: 1px solid #f0f0f0;
334        }
335        :host([position^='bottom'][mode='card']) .nav-item[data-selected]{
336            background-color: #ffffff;
337            border-top: 1px solid #fff;
338            top: -1px;
339        }
340        /*
341        left left-top left-center left-bottom
342        */
343        :host([position^='left']) .tab{
344            display: flex;
345            flex-direction: row;
346        }
347        :host([mode='flat'][position^='left']) .tab-line{
348            position:absolute;
349            right: 1px;
350            background-color: #42b983;
351            width: 3px;
352            transform: translateX(100%);
353            transition: all 0.3s;
354        }
355        :host([position^='left']) .tab-nav-container{
356            display: flex;
357            position: relative;
358            flex-direction: row;
359            overflow-x: auto;
360            overflow-y: visible;
361            overflow: -moz-scrollbars-none;
362            -ms-overflow-style: none;
363            transition: all 0.3s;
364            flex: 1;
365            border-right: #f0f0f0 1px solid;
366        }
367        :host([position^='left']) .nav-root{
368            display: flex;
369            flex-direction: column;
370            justify-content: center;
371            align-items: center;
372        }
373        :host([position='left']) .tab-nav,
374        :host([position='left-top']) .tab-nav{
375            display: flex;
376            position: relative;
377            flex-direction: column;
378            justify-content: flex-start;
379        }
380        :host([position='left-center']) .tab-nav{
381            display: flex;
382            position: relative;
383            flex-direction: column;
384            justify-content: center;
385        }
386        :host([position='left-bottom']) .tab-nav{
387            display: flex;
388            position: relative;
389            flex-direction: column;
390            justify-content: flex-end;
391        }
392        :host([position^='left'][mode='card']) .nav-item{
393            border-top: 1px solid #f0f0f0;
394            border-left: 1px solid #f0f0f0;
395            border-right: 1px solid #ffffff;
396            border-bottom: 1px solid #f0f0f0;
397            right: -1px;
398            margin-bottom: 2px;
399            position: relative;
400        }
401        :host([position^='left']) .tab-nav-bg-line{
402            position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
403        }
404        :host([position^='left'][mode='card']) .nav-item:not([data-selected]){
405            background-color: #f5f5f5;
406            border-right: 1px solid #f0f0f0;
407        }
408        :host([position^='left'][mode='card']) .nav-item[data-selected]{
409            background-color: #ffffff;
410            border-bottom: 1px solid #fff;
411            right: -1px;
412        }
413        /*
414        right right-top right-center right-bottom
415        */
416        :host([position^='right']) .tab{
417            display: flex;
418            flex-direction: row-reverse;
419        }
420        :host([mode='flat'][position^='right']) .tab-line{
421            position:absolute;
422            left: 1px;
423            background-color: #42b983;
424            width: 3px;
425            transform: translateX(-100%);
426            transition: all 0.3s;
427        }
428        :host([position^='right']) .tab-nav-container{
429            display: flex;
430            position: relative;
431            flex-direction: row-reverse;
432            overflow-x: auto;
433            overflow-y: visible;
434            overflow: -moz-scrollbars-none;
435            -ms-overflow-style: none;
436            transition: all 0.3s;
437            flex: 1;
438            border-left: #f0f0f0 1px solid;
439        }
440        :host([position^='right']) .nav-root{
441            display: flex;
442            flex-direction: column;
443            justify-content: center;
444            align-items: center;
445        }
446        :host([position='right']) .tab-nav,
447        :host([position='right-top']) .tab-nav{
448            display: flex;
449            position: relative;
450            flex-direction: column;
451            justify-content: flex-start;
452        }
453        :host([position='right-center']) .tab-nav{
454            display: flex;
455            position: relative;
456            flex-direction: column;
457            justify-content: center;
458        }
459        :host([position='right-bottom']) .tab-nav{
460            display: flex;
461            position: relative;
462            flex-direction: column;
463            justify-content: flex-end;
464        }
465        :host([position^='right'][mode='card']) .nav-item{
466            border-top: 1px solid #f0f0f0;
467            border-left: 1px solid #ffffff;
468            border-right: 1px solid #f0f0f0;
469            border-bottom: 1px solid #f0f0f0;
470            left: -1px;
471            margin-top: 2px;
472            position: relative;
473        }
474        :host([position^='right']) .tab-nav-bg-line{
475            position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
476        }
477        :host([position^='right'][mode='card']) .nav-item:not([data-selected]){
478            background-color: #f5f5f5;
479            border-left: 1px solid #f0f0f0;
480        }
481        :host([position^='right'][mode='card']) .nav-item[data-selected]{
482            background-color: #ffffff;
483            left: -1px;
484        }
485
486
487        .tab-nav-container::-webkit-scrollbar {
488            display: none;
489        }
490
491        .close-icon:hover{
492            color: #000;
493        }
494        .nav-item[data-closeable] .close-icon{
495            display: block;
496            padding: 2px 5px;
497            color: var(--dark-icon,#606060)
498        }
499        .nav-item[data-closeable] .no-close-icon{
500            display: none;
501        }
502        .nav-item:not([data-closeable]) .no-close-icon{
503            display: block;
504        }
505        .nav-item:not([data-closeable]) .close-icon{
506            display: none;
507        }
508
509        </style>
510        <style id=\\"filter\\"></style>
511        <div class=\\"tab\\">
512            <div class=\\"nav-root\\" style=\\"background-color: var(--dark-background4,#f2f2f2);\\">
513                <slot name=\\"left\\" style=\\"flex:1\\"></slot>
514                <div class=\\"tab-nav-container\\">
515                    <div class=\\"tab-nav-bg-line\\"></div>
516                    <div class=\\"tab-nav\\" id=\\"nav\\"></div>
517                    <div class=\\"tab-line\\" id=\\"tab-line\\"></div>
518                </div>
519                <div id=\\"tab-filling\\" style=\\"flex: 1\\"></div>
520                <slot name=\\"right\\" style=\\"flex:1\\"></slot>
521            </div>
522            <div class=\\"tab-content\\">
523                <slot id=\\"slot\\">NEED CONTENT</slot>
524            </div>
525        </div>
526        "
527`);
528    })
529
530    it('litTabsTest14', ()=>{
531        litTabs.nav = jest.fn(()=> true);
532        litTabs.nav.querySelector = jest.fn(()=> {
533            return document.createElement('div') as HTMLDivElement
534        });
535        litTabs.nav.querySelectorAll = jest.fn(()=> true);
536        expect(litTabs.updateDisabled('key', undefined)).toBeUndefined();
537    });
538
539    it('litTabsTest15', ()=>{
540        litTabs.nav = jest.fn(()=> true);
541        litTabs.nav.querySelector = jest.fn(()=> {
542            return document.createElement('div') as HTMLDivElement
543        });
544        litTabs.nav.querySelectorAll = jest.fn(()=> true);
545        expect(litTabs.updateCloseable('key', undefined)).toBeUndefined();
546    });
547
548    it('litTabsTest19', ()=>{
549        expect(litTabs.activePane(null)).toBe(false);
550    })
551})
552