✅ test: 添加单测

arvinxx · Mar 8, 2022 · 2e812bc · 2e812bc
1 parent fda5d6e
commit 2e812bc
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 5 deletions.
diff --git a/packages/sortable-list/src/container/Wrapper.tsx b/packages/sortable-list/src/container/Wrapper.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react';
 
 import { Provider, createStore, useStoreApi } from '../store';
 
-const SortableListWrapper: FC = ({ children }) => {
+const StoreWrapper: FC = ({ children }) => {
   let isWrapped = true;
 
   try {
@@ -21,4 +21,4 @@ const SortableListWrapper: FC = ({ children }) => {
   return <Provider createStore={createStore}>{children}</Provider>;
 };
 
-export default SortableListWrapper;
+export default StoreWrapper;
diff --git a/packages/sortable-list/src/container/index.tsx b/packages/sortable-list/src/container/index.tsx
@@ -16,7 +16,7 @@ import {
 
 import { Sortable } from './App';
 import type { SortableItemList, SortableListProps } from '../types';
-import SortableListWrapper from './Wrapper';
+import StoreWrapper from './Wrapper';
 import StoreUpdater from './StoreUpdater';
 
 const defaultDropAnimationConfig: DropAnimation = {
@@ -77,7 +77,7 @@ function SortableList<T extends SortableItemList = SortableItemList>({
   }, [direction, getModifiers]);
 
   return (
-    <SortableListWrapper>
+    <StoreWrapper>
       <Sortable
         direction={direction}
         dropAnimation={defaultDropAnimationConfig}
@@ -90,7 +90,7 @@ function SortableList<T extends SortableItemList = SortableItemList>({
         gap={gap}
       />
       <StoreUpdater onDataChange={onChange} data={dataSource} />
-    </SortableListWrapper>
+    </StoreWrapper>
   );
 }
 

diff --git a/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap b/packages/sortable-list/tests/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SortableList 有数据 1`] = `
+<div>
+  <div
+    class="sc-bdvvtL jXutGz avx-sortable-list layoutkit-flexbox"
+  >
+    <li
+      class="avx-sortable-item-container"
+    >
+      <div
+        aria-describedby="DndDescribedBy-1"
+        aria-roledescription="sortable"
+        class="avx-sortable-item"
+        data-id="1"
+        data-index="0"
+        role="button"
+        tabindex="0"
+      >
+        1
+        <span
+          class="avx-sortable-action"
+        >
+          <button
+            class="avx-sortable-action-remove"
+            tabindex="0"
+          >
+            <svg
+              viewBox="0 0 22 22"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+    </li>
+    <li
+      class="avx-sortable-item-container"
+    >
+      <div
+        aria-describedby="DndDescribedBy-1"
+        aria-roledescription="sortable"
+        class="avx-sortable-item"
+        data-id="2"
+        data-index="1"
+        role="button"
+        tabindex="0"
+      >
+        2
+        <span
+          class="avx-sortable-action"
+        >
+          <button
+            class="avx-sortable-action-remove"
+            tabindex="0"
+          >
+            <svg
+              viewBox="0 0 22 22"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+    </li>
+  </div>
+</div>
+`;
+
 exports[`SortableList 默认状态 1`] = `
 <div>
   <div

diff --git a/packages/sortable-list/tests/index.test.tsx b/packages/sortable-list/tests/index.test.tsx
@@ -8,4 +8,10 @@ describe('SortableList', () => {
     const { container } = render(<SortableList />);
     expect(container).toMatchSnapshot();
   });
+  it('有数据', () => {
+    const { container } = render(
+      <SortableList dataSource={[{ id: '1' }, { id: '2' }]} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
 });