• 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 LitSwitch from "../../../dist/base-ui/switch/lit-switch";
18
19describe('LitSwitch Test', ()=>{
20    let litSwitch = new LitSwitch();
21    litSwitch.checked = true
22    litSwitch.checked = false
23    litSwitch.disabled = true
24    litSwitch.disabled =false
25
26    it('LitSwitchTest01', ()=>{
27        expect(litSwitch.name).toBeNull();
28    })
29
30    it('LitSwitchTest02', ()=>{
31        expect(litSwitch.disabled).toBeFalsy();
32    })
33
34    it('LitSwitchTest03', ()=>{
35        expect(litSwitch.checked).toBeFalsy();
36    })
37
38    it('LitSwitchTest04', ()=>{
39        LitSwitch.switch = document.querySelector("#switch") as HTMLInputElement;
40        expect(litSwitch.connectedCallback()).toBeUndefined()
41    })
42
43    it('LitSwitchTest05', ()=>{
44        expect(litSwitch.attributeChangedCallback('disabled', 'disabled', '')).toBeUndefined()
45    })
46
47    it('LitSwitchTest06', ()=>{
48        expect(litSwitch.attributeChangedCallback('disabled', 'disabled', null)).toBeUndefined()
49    })
50
51    it('LitSwitchTest07', ()=>{
52        expect(litSwitch.attributeChangedCallback('checked', 'disabled', '')).toBeUndefined()
53    })
54
55    it('LitSwitchTest08', ()=>{
56        expect(litSwitch.attributeChangedCallback('checked', 'disabled', null)).toBeUndefined()
57    })
58
59    it('LitSwitchTest09', ()=>{
60        expect(litSwitch.initHtml()).toMatchInlineSnapshot(`
61"
62        <style>
63        :host{
64            display:inline-block;
65            -webkit-tap-highlight-color: transparent;
66        }
67        #name{
68            cursor:pointer;
69            display:flex;
70            width:2.4em;
71            height:1.2em;
72            padding:.125em;
73            border-radius:1.2em;
74            background: #3391FF;
75            transition:.3s width,.3s height,.3s background-color;
76        }
77
78        :host(:not([checked])) #name {
79           background: #999999;
80        }
81
82        #name::before{
83            content:'';
84            flex:0;
85            transition:.2s cubic-bezier(.12, .4, .29, 1.46) flex;
86        }
87        #name::after{
88            content:'';
89            width:.4em;
90            height:.4em;
91            border-radius:1.2em;
92            border:.4em solid #fff;
93            background-color:#ffffff;
94            transition:.3s background,.3s padding,.3s width,.3s height,.3s border-radius,.3s border;
95            box-shadow: 0 2px 4px 0 rgba(0,35,11,0.2);
96        }
97        #name:active::after{
98            padding:0 .3em;
99        }
100        #switch:checked+#name{
101            background:#42b983);
102        }
103        #switch:checked+#name::before{
104            flex:1;
105        }
106        #switch{
107            position:absolute;
108            clip:rect(0,0px,0px,0);
109        }
110        :host(:focus-within) #name::after,:host(:active) ::after{
111            background:#42b983;
112        }
113        :host(:focus-within) #name{
114            box-shadow: 0 0 10px rgba(0,0,0,0.1);
115        }
116        :host(:focus-within) #switch,:host(:active) #switch{
117            z-index:2
118        }
119        :host([disabled]){
120            pointer-events: none;
121            opacity:.5;
122        }
123        :host([disabled]) #name{
124            pointer-events: all;
125            cursor: not-allowed;
126        }
127        </style>
128        <input type=\\"checkbox\\" id=\\"switch\\"><label id=\\"name\\" for=\\"switch\\"></label>
129        "
130`);
131    })
132})
133