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 {LitCheckBox} from "../../../dist/base-ui/checkbox/LitCheckBox.js"; 18 19describe('checkBox Test', ()=>{ 20 21 it('checkBoxTest01', function () { 22 let litCheckBox = new LitCheckBox(); 23 expect(litCheckBox).not.toBeUndefined() 24 expect(litCheckBox).not.toBeNull() 25 }); 26 27 28 it('checkBoxTest02', function () { 29 let litCheckBox = new LitCheckBox(); 30 expect(litCheckBox.checked).toBeFalsy(); 31 }); 32 33 it('checkBoxTest03', function () { 34 let litCheckBox = new LitCheckBox(); 35 litCheckBox.checked = true 36 expect(litCheckBox.checked).toBeTruthy(); 37 }); 38 39 40 it('checkBoxTest04', function () { 41 let litCheckBox = new LitCheckBox(); 42 expect(litCheckBox.value).toEqual(""); 43 }); 44 45 46 it('checkBoxTest04', function () { 47 let litCheckBox = new LitCheckBox(); 48 litCheckBox.value = "test" 49 expect(litCheckBox.value).toEqual("test"); 50 }); 51 52 53 it('checkBoxTest05', function () { 54 document.body.innerHTML = `<lit-check-box></lit-check-box> 55 ` 56 let litCheckBox = new LitCheckBox(); 57 litCheckBox.checked = false 58 expect(litCheckBox.checked).toBeFalsy(); 59 }); 60 it('checkBoxTest06', function () { 61 document.body.innerHTML = `<lit-check-box></lit-check-box> 62 ` 63 let litCheckBox = new LitCheckBox(); 64 litCheckBox.indeterminate = false 65 expect(litCheckBox.indeterminate).toBeFalsy(); 66 }); 67 68 it('checkBoxTest07', function () { 69 document.body.innerHTML = `<lit-check-box></lit-check-box> 70 ` 71 let litCheckBox = new LitCheckBox(); 72 litCheckBox.indeterminate = true 73 expect(litCheckBox.indeterminate).toBeTruthy(); 74 }); 75 76 it('checkBoxTest08', function () { 77 let litCheckBox = new LitCheckBox(); 78 expect(litCheckBox.initHtml()).toMatchInlineSnapshot(` 79" 80 <style> 81 :host{ 82 display:flex; 83 opacity: 0.86; 84 font-family: Helvetica; 85 font-size: 14px; 86 text-align: left; 87 line-height: 16px; 88 font-weight: 400; 89 } 90 #checkbox{ 91 position:absolute; 92 clip:rect(0,0,0,0); 93 } 94 95 label{ 96 box-sizing:border-box; 97 cursor:pointer; 98 display:flex; 99 align-items:center; 100 } 101 .chekebox{ 102 position:relative; 103 display:flex; 104 justify-content: center; 105 align-items: center; 106 margin-right:12px; 107 width: 16px; 108 height:16px; 109 border: 1px solid var(--dark-color1,#4D4D4D); 110 border-radius: 20%; 111 } 112 .chekebox::before{ 113 position:absolute; 114 content:''; 115 width:74%; 116 height:0.15em; 117 background:#3391FF; 118 transform:scale(0); 119 border-radius: 0.15em; 120 } 121 .chekebox{ 122 background:var(--dark-background,#FFFFFF); 123 } 124 .chekebox::after{ 125 content:''; 126 position:absolute; 127 width:100%; 128 height:100%; 129 border-radius:50%; 130 background:#FFFFFF; 131 opacity:0.2; 132 transform:scale(0); 133 z-index:-1; 134 } 135 #checkbox:checked:not(:indeterminate)+label .chekebox .icon{ 136 transform: scale(1.5); 137 } 138 #checkbox:checked+label .chekebox,#checkbox:indeterminate+label .chekebox{ 139 border-color:#3391FF; 140 } 141 #checkbox:indeterminate+label .chekebox::before{ 142 transform:scale(1); 143 } 144 .icon{ 145 width: 90%; 146 height: 55%; 147 transform: scale(0); 148 } 149 </style> 150 <input type=\\"checkbox\\" id=\\"checkbox\\"> 151 <label for=\\"checkbox\\"> 152 <span class=\\"chekebox\\"> 153 <lit-icon name=\\"checkmark\\" class=\\"icon\\" color=\\"#3391FF\\" size=\\"8\\"> 154 </lit-icon> 155 </span> 156 <slot id=\\"slot\\"></slot> 157 </label> 158 " 159`); 160 }); 161})