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 {LitRadioBox} from "../../../dist/base-ui/radiobox/LitRadioBox.js"; 18 19// @ts-ignore 20import {LitRadioGroup} from "../../../dist/base-ui/radiobox/LitRadioGroup.js"; 21 22describe('LitRadioBox Test', ()=>{ 23 let litRadioBox = new LitRadioBox(); 24 let litRadioGroup = new LitRadioGroup() 25 26 litRadioGroup.layout = 'layout' 27 28 litRadioBox.checked = true 29 litRadioBox.checked = false 30 litRadioBox.value = 'value' 31 litRadioBox.dis = 'dis' 32 it('LitRadioBoxTest01', ()=>{ 33 expect(litRadioBox.name).toBeNull(); 34 }) 35 36 it('LitRadioBoxTest02', ()=>{ 37 expect(litRadioBox.value).toBe('value'); 38 }) 39 40 it('LitRadioBoxTest03', ()=>{ 41 expect(litRadioBox.initHtml()).toMatchInlineSnapshot(` 42" 43 <style> 44 :host([dis=round]):host{ 45 font-family: Helvetica,serif; 46 font-size: 14px; 47 color: var(--dark-color1,#212121); 48 text-align: left; 49 line-height: 16px; 50 font-weight: 400; 51 } 52 :host([dis=round]) lit-icon{ 53 display: none; 54 } 55 :host([dis=round]) #radio{ 56 position:absolute; 57 clip:rect(0,0,0,0); 58 } 59 :host([dis=round]) :host(:focus-within) .selected label:hover .selected{ 60 z-index:1; 61 border-color:#a671ef; 62 } 63 :host([dis=round]) label{ 64 box-sizing:border-box; 65 cursor:pointer; 66 display:flex; 67 align-items:center; 68 } 69 :host([dis=round]) .selected{ 70 position:relative; 71 display: flex; 72 box-sizing: border-box; 73 width: 16px; 74 height: 16px; 75 border-radius:50%; 76 border: 2px solid var(--dark-color1,#4D4D4D); 77 margin-right:1em; 78 } 79 .selected{ 80 position:relative; 81 box-sizing: border-box; 82 margin-right:1em; 83 } 84 :host([dis=round]) .selected::before{ 85 content:''; 86 width:6px; 87 height:6px; 88 margin:auto; 89 border-radius:50%; 90 background:#a671ef; 91 transform: scale(0); 92 } 93 :host([dis=round]) #radio:focus-visible+label .selected::after{ 94 transform:scale(2.5); 95 } 96 :host([dis=round]) #radio:checked+label .selected::before{ 97 transform: scale(1); 98 } 99 :host([dis=round]) #radio:checked+label .selected{ 100 border-color:#a671ef; 101 } 102 :host([dis=check]):host{ 103 opacity: 0.9; 104 font-family: Helvetica,serif; 105 font-size: 14px; 106 text-align: left; 107 font-weight: 400; 108 } 109 :host([dis=round]) lit-icon{ 110 visibility: visible; 111 } 112 :host([dis=check]) #radio{ 113 position:absolute; 114 clip:rect(0,0,0,0); 115 } 116 :host([dis=check]) label{ 117 box-sizing:border-box; 118 cursor:pointer; 119 display:flex; 120 align-items:center; 121 } 122 :host([dis=check]) .selected{ 123 position:relative; 124 display:flex; 125 justify-content: center; 126 align-items: center; 127 margin-right:5px; 128 width: 16px; 129 height:16px; 130 } 131 :host([dis=check]) .selected::before{ 132 position:absolute; 133 content:''; 134 width:74%; 135 height:0.15em; 136 background:#fff; 137 transform:scale(0); 138 border-radius: 0.15em; 139 } 140 :host([dis=check]) .selected::after{ 141 content:''; 142 position:absolute; 143 width:100%; 144 height:100%; 145 border-radius:50%; 146 background:#1A83FF; 147 opacity:0.2; 148 transform:scale(0); 149 z-index:-1; 150 } 151 :host([dis=check]) #radio:checked:not(:indeterminate)+label .selected .icon{ 152 transform: scale(1.5); 153 } 154 :host([dis=check]) #radio:indeterminate+label .selected::before{ 155 transform:scale(1); 156 } 157 :host([dis=check]) .icon{ 158 width: 90%; 159 height: 55%; 160 margin-left: 5px; 161 transform: scale(0); 162 } 163 :host([checked][dis=check]) { 164 background-color: #1A83FF; 165 color:#ffffff 166 } 167 </style> 168 <input type=\\"checkbox\\" id=\\"radio\\" > 169 <label id=\\"label\\" for=\\"radio\\"> 170 <span class=\\"selected\\"> 171 <lit-icon name=\\"checkmark\\" class=\\"icon\\" size=\\"8\\"> 172 </lit-icon> 173 </span> 174 <slot id='slot'></slot> 175 </label> 176 " 177`); 178 }) 179 180 it('litRadioGroupTest01', ()=>{ 181 let isReturn = litRadioGroup.value.length == 0 182 expect(isReturn).toBeTruthy(); 183 }) 184 185 it('litRadioGroupTest02', ()=>{ 186 expect(litRadioGroup.initHtml()).toMatchInlineSnapshot(` 187" 188 <style> 189 :host { 190 display: -webkit-flex; 191 display: flex; 192 flex-direction: column; 193 } 194 :host([direction]) { 195 flex-direction: null; 196 } 197 :host(:not([direction])) { 198 flex-direction: column; 199 } 200 201 :host([layout=\\"compact\\"]) { 202 gap:5px; 203 } 204 :host([layout=\\"dispersion\\"]) { 205 gap:10px; 206 } 207 </style> 208 <slot class=\\"radio-group\\"></slot>" 209`); 210 }) 211}) 212