From 7001a37d32823e9ca21ee3bb2998b0af04ac0942 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Wed, 27 Jul 2022 01:13:50 +0800
Subject: [PATCH] =?UTF-8?q?:camera=5Fflash:=20test:=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=BF=AB=E7=85=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tests/__snapshots__/index.test.tsx.snap   | 375 ++++++++++++++++++
 .../tests/__snapshots__/index.test.tsx.snap   |   2 +-
 .../tests/__snapshots__/index.test.tsx.snap   |   4 +-
 3 files changed, 378 insertions(+), 3 deletions(-)
 create mode 100644 packages/color-picker/tests/__snapshots__/index.test.tsx.snap

diff --git a/packages/color-picker/tests/__snapshots__/index.test.tsx.snap b/packages/color-picker/tests/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000..c968286f
--- /dev/null
+++ b/packages/color-picker/tests/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,375 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPicker 默认状态 1`] = `
+<div>
+  <div
+    class="avx-sketch-picker"
+    style="width: 200px; padding: 10px 10px 0px; box-sizing: initial; background: rgb(255, 255, 255); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.15);"
+  >
+    <div
+      style="width: 100%; padding-bottom: 75%; position: relative; overflow: hidden;"
+    >
+      <div
+        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: hsl(250, 100%, 50%); border-radius: 4px;"
+      >
+        <style>
+          
+          .saturation-white {
+            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
+            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+          }
+          .saturation-black {
+            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
+            background: linear-gradient(to top, #000, rgba(0,0,0,0));
+          }
+        
+        </style>
+        <div
+          class="saturation-white"
+          style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 4px;"
+        >
+          <div
+            class="saturation-black"
+            style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.09), inset 0 0 4px rgba(0,0,0,.15); border-radius: 4px;"
+          />
+          <div
+            style="position: absolute; top: 70%; left: 68%; cursor: default;"
+          >
+            <div
+              style="width: 4px; height: 4px; box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4); border-radius: 50%; cursor: hand; transform: translate(-2px, -2px);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: flex;"
+    >
+      <div
+        style="padding: 4px 0px; flex: 1;"
+      >
+        <div
+          style="position: relative; height: 10px; overflow: hidden;"
+        >
+          <div
+            style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);"
+          >
+            <div
+              class="hue-horizontal"
+              style="padding: 0px 2px; position: relative; height: 100%; border-radius: 2px;"
+            >
+              <div
+                style="position: absolute; left: 69.44444444444444%;"
+              >
+                <div
+                  style="margin-top: 1px; width: 4px; border-radius: 1px; height: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, .6); background: rgb(255, 255, 255); transform: translateX(-2px);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style="position: relative; height: 10px; margin-top: 4px; overflow: hidden;"
+        >
+          <div>
+            <div>
+              <div
+                style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAK0lEQVQ4jWNkYGAQYcAP3uCTZCKgmSAYNWAwGMBIhBq86WTgvTBqABUMAABXlAEzkiIyLgAAAABJRU5ErkJggg==) left;"
+              />
+            </div>
+            <div />
+            <div>
+              <div
+                style="position: absolute; left: 100%;"
+              >
+                <div />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="width: 24px; height: 24px; position: relative; margin-top: 4px; margin-left: 4px; border-radius: 12px; overflow: hidden; cursor: pointer;"
+      >
+        <div
+          style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAK0lEQVQ4jWNkYGAQYcAP3uCTZCKgmSAYNWAwGMBIhBq86WTgvTBqABUMAABXlAEzkiIyLgAAAABJRU5ErkJggg==) left;"
+        />
+        <div
+          style="border-radius: 12px; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(34, 25, 77); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);"
+        />
+      </div>
+    </div>
+    <div
+      class="sc-bdvvtL heuskx layoutkit-flexbox"
+      style="margin: 4px 0px;"
+    >
+      <div
+        class="sc-bdvvtL iTLskC avx-color-fields layoutkit-flexbox"
+      >
+        <div
+          class="avx-color-fields-hex"
+        >
+          <input
+            class="avx-color-fields-input"
+            spellcheck="false"
+            style="width: 56px; font-family: monospace;"
+            value="22194D"
+          />
+        </div>
+        <div>
+          <input
+            class="avx-color-fields-input"
+            spellcheck="false"
+            value="250"
+          />
+        </div>
+        <div>
+          <input
+            class="avx-color-fields-input"
+            spellcheck="false"
+            value="68"
+          />
+        </div>
+        <div>
+          <input
+            class="avx-color-fields-input"
+            spellcheck="false"
+            value="30"
+          />
+        </div>
+        <div>
+          <input
+            class="avx-color-fields-input"
+            spellcheck="false"
+            value="100"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-bdvvtL hLgIaz avx-color-fields-label-ctn layoutkit-flexbox"
+      >
+        <div
+          class="avx-color-fields-label avx-color-fields-label-hex"
+          style="cursor: pointer;"
+          title="点击复制"
+        >
+          hex
+        </div>
+        <div
+          class="sc-bdvvtL kiqHeS avx-color-fields-switcher layoutkit-flexbox"
+          style="padding-left: 5px;"
+        >
+          <div>
+            <select
+              class="avx-color-fields-select"
+            >
+              <option
+                value="rgb"
+              >
+                RGB
+              </option>
+              <option
+                value="hsv"
+              >
+                HSV
+              </option>
+            </select>
+          </div>
+          <div
+            class="avx-color-fields-label"
+          >
+            h
+          </div>
+          <div
+            class="avx-color-fields-label"
+          >
+            s
+          </div>
+          <div
+            class="avx-color-fields-label"
+          >
+            v
+          </div>
+        </div>
+        <div
+          class="avx-color-fields-label avx-color-fields-label-alpha"
+          style="margin-left: 4px;"
+        >
+          Alpha
+        </div>
+      </div>
+    </div>
+    <div
+      class="flexbox-fix"
+      style="margin: 0px -10px; padding: 10px 0px 0px 10px; border-top: 1px solid #eee; display: flex; flex-wrap: wrap; position: relative;"
+    >
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(208, 2, 27); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#D0021B"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(245, 166, 35); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#F5A623"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(248, 231, 28); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#F8E71C"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(139, 87, 42); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#8B572A"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(126, 211, 33); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#7ED321"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(65, 117, 5); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#417505"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(189, 16, 224); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#BD10E0"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(144, 19, 254); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#9013FE"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(74, 144, 226); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#4A90E2"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(80, 227, 194); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#50E3C2"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(184, 233, 134); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#B8E986"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(0, 0, 0); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#000000"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(74, 74, 74); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#4A4A4A"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(155, 155, 155); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#9B9B9B"
+          />
+        </span>
+      </div>
+      <div
+        style="width: 16px; height: 16px; margin: 0px 10px 10px 0px;"
+      >
+        <span>
+          <div
+            style="background: rgb(255, 255, 255); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);"
+            tabindex="0"
+            title="#FFFFFF"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/layout-kit/tests/__snapshots__/index.test.tsx.snap b/packages/layout-kit/tests/__snapshots__/index.test.tsx.snap
index 7523223a..b81ade13 100644
--- a/packages/layout-kit/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/layout-kit/tests/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Flexbox gap 1`] = `
 <div>
   <div
-    class="sc-bdvvtL nqSUR layoutkit-flexbox"
+    class="sc-bdvvtL heuskx layoutkit-flexbox"
   >
     <div>
       1
diff --git a/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap b/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap
index a2106d32..8c5f9ba9 100644
--- a/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SortableList 有数据 1`] = `
 <div>
   <div
-    class="sc-bdvvtL jXutGz avx-sortable-list layoutkit-flexbox"
+    class="sc-bdvvtL erVQef avx-sortable-list layoutkit-flexbox"
   >
     <li
       class="avx-sortable-item-container"
@@ -78,7 +78,7 @@ exports[`SortableList 有数据 1`] = `
 exports[`SortableList 默认状态 1`] = `
 <div>
   <div
-    class="sc-bdvvtL jXutGz avx-sortable-list layoutkit-flexbox"
+    class="sc-bdvvtL erVQef avx-sortable-list layoutkit-flexbox"
   />
 </div>
 `;