test(list): fix test snap

Tencent · Feb 12, 2025 · 8a531c7 · 8a531c7
1 parent 745c478
commit 8a531c7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 52 deletions.
diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -52,9 +52,10 @@ const List = forwardRefWithStatics(
     const [local, t] = useLocaleReceiver('list');
 
     const listItems = useMemo(
-      () => React.Children.map(children, (child: React.ReactElement) => child.props),
+      () => React.Children.map(children, (child: React.ReactElement) => child.props) ?? [],
       [children],
     );
+
     const { virtualConfig, cursorStyle, listStyle, isVirtualScroll, onInnerVirtualScroll, scrollToElement } =
       useListVirtualScroll(scroll, wrapperRef, listItems);
 
@@ -98,29 +99,22 @@ const List = forwardRefWithStatics(
       scrollTo: scrollToElement,
     }));
 
-    const renderContent = () => {
-      const propsHeaderContent = parseTNode(header);
-      const propsFooterContent = parseTNode(footer);
-
-      return (
-        <>
-          {propsHeaderContent ? <div className={`${COMPONENT_NAME}__header`}>{propsHeaderContent}</div> : null}
-          {isVirtualScroll ? (
-            <>
-              <div style={cursorStyle}></div>
-              <ul className={`${COMPONENT_NAME}__inner`} style={listStyle}>
-                {virtualConfig.visibleData.map((item, index) => (
-                  <ListItem key={index} content={item.children}></ListItem>
-                ))}
-              </ul>
-            </>
-          ) : (
-            <ul className={`${COMPONENT_NAME}__inner`}>{children}</ul>
-          )}
-          {propsFooterContent ? <div className={`${COMPONENT_NAME}__footer`}>{propsFooterContent}</div> : null}
-        </>
-      );
-    };
+    const renderContent = () => (
+      <>
+        {isVirtualScroll ? (
+          <>
+            <div style={cursorStyle}></div>
+            <ul className={`${COMPONENT_NAME}__inner`} style={listStyle}>
+              {virtualConfig.visibleData.map((item, index) => (
+                <ListItem key={index} content={item.children}></ListItem>
+              ))}
+            </ul>
+          </>
+        ) : (
+          <ul className={`${COMPONENT_NAME}__inner`}>{children}</ul>
+        )}
+      </>
+    );
 
     return (
       <div
@@ -138,10 +132,10 @@ const List = forwardRefWithStatics(
           [`${classPrefix}-size-l`]: size === 'large',
         })}
       >
-        {header && <div className={`${COMPONENT_NAME}__header`}>{header}</div>}
+        {header && <div className={`${COMPONENT_NAME}__header`}>{parseTNode(header)}</div>}
         {renderContent()}
         {asyncLoading && loadElement}
-        {footer && <div className={`${COMPONENT_NAME}__footer`}>{footer}</div>}
+        {footer && <div className={`${COMPONENT_NAME}__footer`}>{parseTNode(footer)}</div>}
       </div>
     );
   },

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -58547,11 +58547,6 @@ exports[`csr snapshot test > csr test src/list/_example/header-footer.tsx 1`] =
   <div
     class="t-list"
   >
-    <div
-      class="t-list__header"
-    >
-      这里是 Header
-    </div>
     <div
       class="t-list__header"
     >
@@ -58602,25 +58597,13 @@ exports[`csr snapshot test > csr test src/list/_example/header-footer.tsx 1`] =
     >
       这里是 Footer
     </div>
-    <div
-      class="t-list__footer"
-    >
-      这里是 Footer
-    </div>
   </div>
   <div
     style="margin-bottom: 16px;"
   />
   <div
     class="t-list"
   >
-    <div
-      class="t-list__header"
-    >
-      <p>
-        通过 TNode 插入的 Header
-      </p>
-    </div>
     <div
       class="t-list__header"
     >
@@ -58675,13 +58658,6 @@ exports[`csr snapshot test > csr test src/list/_example/header-footer.tsx 1`] =
         通过 TNode 插入的 Footer
       </p>
     </div>
-    <div
-      class="t-list__footer"
-    >
-      <p>
-        通过 TNode 插入的 Footer
-      </p>
-    </div>
   </div>
 </div>
 `;
@@ -137141,7 +137117,7 @@ exports[`ssr snapshot test > ssr test src/list/_example/asyncLoading.tsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"<div class="t-list"><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容的描述性文字<ul class="t-list-item__action"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作1</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作2</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作3</a></div></div></ul></div></li><li class="t-list-item"><div class="t-list-item-main">列表内容的描述性文字<ul class="t-list-item__action"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作1</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作2</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作3</a></div></div></ul></div></li></ul></div>"`;
 
-exports[`ssr snapshot test > ssr test src/list/_example/header-footer.tsx 1`] = `"<div class="t-list"><div class="t-list__header">这里是 Header</div><div class="t-list__header">这里是 Header</div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer">这里是 Footer</div><div class="t-list__footer">这里是 Footer</div></div><div style="margin-bottom:16px"></div><div class="t-list"><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div></div>"`;
+exports[`ssr snapshot test > ssr test src/list/_example/header-footer.tsx 1`] = `"<div class="t-list"><div class="t-list__header">这里是 Header</div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer">这里是 Footer</div></div><div style="margin-bottom:16px"></div><div class="t-list"><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/list/_example/image-text.tsx 1`] = `"<div class="t-list t-size-s"><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li></ul></div>"`;
 

diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -592,7 +592,7 @@ exports[`ssr snapshot test > ssr test src/list/_example/asyncLoading.tsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"<div class="t-list"><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容的描述性文字<ul class="t-list-item__action"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作1</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作2</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作3</a></div></div></ul></div></li><li class="t-list-item"><div class="t-list-item-main">列表内容的描述性文字<ul class="t-list-item__action"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作1</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作2</a></div><div class="t-space-item"><a class="t-link t-link--theme-primary t-link--hover-color">操作3</a></div></div></ul></div></li></ul></div>"`;
 
-exports[`ssr snapshot test > ssr test src/list/_example/header-footer.tsx 1`] = `"<div class="t-list"><div class="t-list__header">这里是 Header</div><div class="t-list__header">这里是 Header</div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer">这里是 Footer</div><div class="t-list__footer">这里是 Footer</div></div><div style="margin-bottom:16px"></div><div class="t-list"><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div></div>"`;
+exports[`ssr snapshot test > ssr test src/list/_example/header-footer.tsx 1`] = `"<div class="t-list"><div class="t-list__header">这里是 Header</div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer">这里是 Footer</div></div><div style="margin-bottom:16px"></div><div class="t-list"><div class="t-list__header"><p>通过 TNode 插入的 Header</p></div><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li><li class="t-list-item"><div class="t-list-item-main">列表内容列表内容列表内容</div></li></ul><div class="t-list__footer"><p>通过 TNode 插入的 Footer</p></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/list/_example/image-text.tsx 1`] = `"<div class="t-list t-size-s"><ul class="t-list__inner"><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li><li class="t-list-item"><div class="t-list-item-main"><div class="t-list-item__meta"><div class="t-list-item__meta-avatar"><img src="https://tdesign.gtimg.com/list-icon.png" alt=""/></div><div class="t-list-item__meta-content"><h3 class="t-list-item__meta-title">列表主内容</h3><div class="t-list-item__meta-description"><p>列表内容列表内容列表内容</p></div></div></div></div></li></ul></div>"`;