fix: 修复组件可能存在 undefined 类名的情况，补充相应测试快照 (#726)

src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`should match custom icons 1`] = `
 <DocumentFragment>
   <div
-    class="nut-badge undefined"
+    class="nut-badge"
   >
     <div
       class="slot-icons"
@@ -15,7 +15,7 @@ exports[`should match custom icons 1`] = `
     </div>
     <div />
     <div
-      class=" nut-badge__content sup"
+      class="nut-badge__content sup"
       style="top: 0px; right: 0px; z-index: 0;"
     >
       200
@@ -27,11 +27,11 @@ exports[`should match custom icons 1`] = `
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-badge undefined"
+    class="nut-badge"
   >
     <div />
     <div
-      class=" nut-badge__content sup"
+      class="nut-badge__content sup"
       style="top: 0px; right: 0px; z-index: 0;"
     >
       8

src/packages/badge/badge.taro.tsx

 import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
+import classNames from 'classnames'
 
 import Icon from '@/packages/icon/index.taro'
+import bem from '@/utils/bem'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -18,6 +20,8 @@ export interface BadgeProps extends BasicComponent {
 
 export type BadgeType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
 
+const b = bem('badge')
+
 const defaultProps = {
   ...ComponentDefaults,
   className: '',
@@ -64,8 +68,9 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     style.background = color
     return style
   }
+
   return (
-    <div className={`nut-badge ${className}`} style={style}>
+    <div className={classNames(b(), className)} style={style}>
       {icons !== '' && (
         <div className="slot-icons">
           <Icon
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
       )}
       <div>{children}</div>
       <div
-        className={`${dot ? 'is-dot' : ''} nut-badge__content sup`}
+        className={classNames({ 'is-dot': dot }, b('content'), 'sup')}
         style={getStyle()}
       >
         {content()}

src/packages/badge/badge.tsx

 import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
+import classNames from 'classnames'
 
 import Icon from '@/packages/icon'
+import bem from '@/utils/bem'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -30,6 +32,9 @@ const defaultProps = {
   color: '',
   icons: '',
 } as BadgeProps
+
+const b = bem('badge')
+
 export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   const {
     className,
@@ -65,7 +70,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     return style
   }
   return (
-    <div className={`nut-badge ${className}`} style={style}>
+    <div className={classNames(b(), className)} style={style}>
       {icons !== '' && (
         <div className="slot-icons">
           <Icon
@@ -80,7 +85,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
       )}
       <div>{children}</div>
       <div
-        className={`${dot ? 'is-dot' : ''} nut-badge__content sup`}
+        className={classNames({ 'is-dot': dot }, b('content'), 'sup')}
         style={getStyle()}
       >
         {content()}

src/packages/card/__test__/__snapshots__/card.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`footerTpl slot test 1`] = `
 <div>
   <div
-    class="nut-card undefined"
+    class="nut-card"
   >
     <div
       class="nut-card__left"
@@ -118,7 +118,7 @@ exports[`footerTpl slot test 1`] = `
 exports[`originTpl slot test 1`] = `
 <div>
   <div
-    class="nut-card undefined"
+    class="nut-card"
   >
     <div
       class="nut-card__left"
@@ -208,7 +208,7 @@ exports[`originTpl slot test 1`] = `
 exports[`prolistTpl slot test 1`] = `
 <div>
   <div
-    class="nut-card undefined"
+    class="nut-card"
   >
     <div
       class="nut-card__left"
@@ -337,7 +337,7 @@ exports[`prolistTpl slot test 1`] = `
 exports[`props test 1`] = `
 <div>
   <div
-    class="nut-card undefined"
+    class="nut-card"
   >
     <div
       class="nut-card__left"
@@ -447,7 +447,7 @@ exports[`props test 1`] = `
 exports[`shopTagTpl slot test 1`] = `
 <div>
   <div
-    class="nut-card undefined"
+    class="nut-card"
   >
     <div
       class="nut-card__left"

src/packages/card/card.taro.tsx

 import React, { FunctionComponent } from 'react'
+import classNames from 'classnames'
 import Price from '@/packages/price/index.taro'
 import Tag from '@/packages/tag/index.taro'
 
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
   }
   const b = bem('card')
   return (
-    <div className={`${b()} ${className}`} style={style} {...rest}>
+    <div className={classNames(b(), className)} style={style} {...rest}>
       <div className={b('left')}>
         <img src={imgUrl} alt="" />
       </div>

src/packages/card/card.tsx

 import React, { FunctionComponent } from 'react'
+import classNames from 'classnames'
 import Price from '@/packages/price'
 import Tag from '@/packages/tag'
 
@@ -44,7 +45,7 @@ export const Card: FunctionComponent<
   }
   const b = bem('card')
   return (
-    <div className={`${b()} ${className}`} style={style} {...rest}>
+    <div className={classNames(b(), className)} style={style} {...rest}>
       <div className={b('left')}>
         <img src={imgUrl} alt="" />
       </div>

src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-collapse undefined"
+    class="nut-collapse"
   >
     <div
       class="nut-collapse-item"

src/packages/collapse/collapse.taro.tsx

 import React, { FunctionComponent, useEffect, useState, memo } from 'react'
+import classNames from 'classnames'
 
 import bem from '@/utils/bem'
 
@@ -97,7 +98,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
       onChange && onChange(!isOpen, name)
     }
     return (
-      <div className={`${colBem()} ${className}`} style={style}>
+      <div className={classNames(colBem(), className)} style={style}>
         {childrenDom.map((item: any) => {
           return React.cloneElement(item, {
             isOpen: defaultOpenIndex.includes(item.props.name),

src/packages/collapse/collapse.tsx

 import React, { FunctionComponent, useEffect, useState, memo } from 'react'
+import classNames from 'classnames'
 
 import bem from '@/utils/bem'
 
@@ -98,7 +99,7 @@ export const Collapse: FunctionComponent<Partial<CollapseProps>> = memo(
       onChange && onChange(!isOpen, name)
     }
     return (
-      <div className={`${colBem()} ${className}`} style={style}>
+      <div className={classNames(colBem(), className)} style={style}>
         {childrenDom.map((item: any) => {
           return React.cloneElement(item, {
             isOpen: defaultOpenIndex.includes(item.props.name),

src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap

@@ -3,15 +3,14 @@
 exports[`render with custom content 1`] = `
 <div>
   <div
-    class="undefined nut-grid nut-grid__border"
+    class="nut-grid nut-grid__border"
   >
     <div
       class="nut-grid-item"
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--horizontal
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
       >
         <i
           class="nutui-iconfont nut-icon nut-icon-dongdong "
@@ -31,8 +30,7 @@ exports[`render with custom content 1`] = `
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--horizontal
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
       >
         <div
           class="nut-grid-item__text"
@@ -53,8 +51,7 @@ exports[`render with custom content 1`] = `
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--horizontal
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
       >
         <div
           class="nut-avatar nut-avatar-normal nut-avatar-round demo-avatar"
@@ -71,8 +68,7 @@ exports[`render with custom content 1`] = `
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--horizontal
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--horizontal"
       >
         <div
           class="nut-avatar nut-avatar-large nut-avatar-round"
@@ -92,15 +88,14 @@ exports[`render with custom content 1`] = `
 exports[`should match snapshot 1`] = `
 <div>
   <div
-    class="undefined nut-grid nut-grid__border"
+    class="nut-grid nut-grid__border"
   >
     <div
       class="nut-grid-item"
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--vertical
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
       >
         <i
           class="nutui-iconfont nut-icon nut-icon-dongdong "
@@ -118,8 +113,7 @@ exports[`should match snapshot 1`] = `
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--vertical
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
       >
         <i
           class="nutui-iconfont nut-icon nut-icon-dongdong "
@@ -137,8 +131,7 @@ exports[`should match snapshot 1`] = `
       style="flex-basis: 25%;"
     >
       <div
-        class="nut-grid-item__content nut-grid-item__content--border 0  nut-grid-item__content--center false false nut-grid-item__content--vertical
-      "
+        class="nut-grid-item__content nut-grid-item__content--border nut-grid-item__content--center nut-grid-item__content--vertical"
       >
         <i
           class="nutui-iconfont nut-icon nut-icon-dongdong "

src/packages/grid/grid.taro.tsx

 import React, { CSSProperties, FunctionComponent } from 'react'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import bem from '@/utils/bem'
 
 import GridContext from './grid.taro.context'
 import { GridItemProps } from '../griditem/griditem.taro'
+
 export type GridDirection = 'horizontal' | 'vertical'
 
 export interface GridProps {
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
 
   const rootClass = () => {
     const prefixCls = b()
-    return `${className} ${prefixCls} ${
-      border && !gutter ? `${b('border')}` : ''
-    }`
+    return classNames(className, prefixCls, {
+      [b('border')]: border && !gutter,
+    })
   }
 
   const rootStyle = () => {

src/packages/grid/grid.tsx

 import React, { CSSProperties, FunctionComponent } from 'react'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
 import bem from '@/utils/bem'
 
 import { GridItemProps } from '../griditem/griditem'
 import GridContext from './grid.context'
+
 export type GridDirection = 'horizontal' | 'vertical'
 
 export interface GridProps {
@@ -63,9 +65,9 @@ export const Grid: FunctionComponent<
 
   const rootClass = () => {
     const prefixCls = b()
-    return `${className} ${prefixCls} ${
-      border && !gutter ? `${b('border')}` : ''
-    }`
+    return classNames(className, prefixCls, {
+      [b('border')]: border && !gutter,
+    })
   }
 
   const rootStyle = () => {

src/packages/griditem/griditem.taro.tsx

@@ -4,6 +4,7 @@ import React, {
   ReactNode,
   useContext,
 } from 'react'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon/index.taro'
@@ -106,12 +107,14 @@ export const GridItem: FunctionComponent<
   }
 
   const contentClass = () => {
-    return `${b('content')} ${border && b('content--border')} ${
-      border && gutter && b('content--surround')
-    }  ${center && b('content--center')} ${square && b('content--square')} ${
-      reverse && b('content--reverse')
-    } ${!!direction && b(`content--${direction}`)}
-      `
+    return classNames(b('content'), {
+      [b('content--border')]: border,
+      [b('content--surround')]: border && gutter,
+      [b('content--center')]: center,
+      [b('content--square')]: square,
+      [b('content--reverse')]: reverse,
+      [b(`content--${direction}`)]: !!direction,
+    })
   }
 
   const isIconName = () => {

src/packages/griditem/griditem.tsx

@@ -4,6 +4,7 @@ import React, {
   ReactNode,
   useContext,
 } from 'react'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon'
@@ -107,12 +108,14 @@ export const GridItem: FunctionComponent<
   }
 
   const contentClass = () => {
-    return `${b('content')} ${border && b('content--border')} ${
-      border && gutter && b('content--surround')
-    }  ${center && b('content--center')} ${square && b('content--square')} ${
-      reverse && b('content--reverse')
-    } ${!!direction && b(`content--${direction}`)}
-      `
+    return classNames(b('content'), {
+      [b('content--border')]: border,
+      [b('content--surround')]: border && gutter,
+      [b('content--center')]: center,
+      [b('content--square')]: square,
+      [b('content--reverse')]: reverse,
+      [b(`content--${direction}`)]: !!direction,
+    })
   }
 
   const isIconName = () => {

src/packages/indicator/indicator.taro.tsx

@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
   }
   useEffect(() => {}, [])
   return (
-    <div className={`${classes} ${className}`} {...rest}>
+    <div className={classNames(classes, className)} {...rest}>
       {renderEles()}
     </div>
   )

src/packages/indicator/indicator.tsx

@@ -62,7 +62,7 @@ export const Indicator: FunctionComponent<
   }
   useEffect(() => {}, [])
   return (
-    <div className={`${classes} ${className}`} {...rest}>
+    <div className={classNames(classes, className)} {...rest}>
       {renderEles()}
     </div>
   )

src/packages/rate/rate.taro.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react'
-
+import classNames from 'classnames'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon'
 
@@ -102,7 +102,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
     onChange && onChange(value)
   }
   return (
-    <div className={`${b()} ${className}`} style={style}>
+    <div className={classNames(b(), className)} style={style}>
       {countArray.map((n) => {
         return (
           <div
@@ -115,9 +115,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
               classPrefix={iconClassPrefix}
               fontClassName={iconFontClassName}
               size={iconSize}
-              className={`${bi('icon')} ${
-                disabled || n > score ? bi('icon--disabled') : ''
-              }`}
+              className={classNames(bi('icon'), {
+                [bi('icon--disabled')]: disabled || n > score,
+              })}
               name={n <= score ? checkedIcon : uncheckedIcon}
               color={n <= score ? activeColor : voidColor}
             />

src/packages/rate/rate.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react'
-
+import classNames from 'classnames'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon'
 
@@ -100,7 +100,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
     onChange && onChange(value)
   }
   return (
-    <div className={`${b()} ${className}`} style={style}>
+    <div className={classNames(b(), className)} style={style}>
       {countArray.map((n) => {
         return (
           <div
@@ -113,9 +113,9 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
               classPrefix={iconClassPrefix}
               fontClassName={iconFontClassName}
               size={iconSize}
-              className={`${bi('icon')} ${
-                disabled || n > score ? bi('icon--disabled') : ''
-              }`}
+              className={classNames(bi('icon'), {
+                [bi('icon--disabled')]: disabled || n > score,
+              })}
               name={n <= score ? checkedIcon : uncheckedIcon}
               color={n <= score ? activeColor : voidColor}
             />

src/packages/sticky/__test__/__snapshots__/sticky.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`should match snapshot 1`] = `
     to=""
   >
     <div
-      class="nut-sticky undefined"
+      class="nut-sticky"
     >
       <div
         class="nut-sticky-box"

src/packages/sticky/sticky.taro.tsx

@@ -7,17 +7,19 @@ import React, {
   useCallback,
   useEffect,
 } from 'react'
-import { BasicComponent } from '@/utils/typings'
-import useWatch from '@/utils/useWatch'
-import { getRectByTaro } from '@/utils/useClientRect'
+import classNames from 'classnames'
 import {
   PageScrollObject,
   usePageScroll,
   getSystemInfoSync,
   getEnv,
 } from '@tarojs/taro'
-
+import { BasicComponent } from '@/utils/typings'
+import useWatch from '@/utils/useWatch'
+import { getRectByTaro } from '@/utils/useClientRect'
 import { getScrollParent } from '@/utils/get-scroll-parent'
+import bem from '@/utils/bem'
+
 export interface StickyProps extends BasicComponent {
   container?: React.RefObject<HTMLElement>
   position?: 'top' | 'bottom'
@@ -56,6 +58,8 @@ const defaultProps = {
   zIndex: 2000,
 } as StickyProps
 
+const b = bem('sticky')
+
 export const Sticky: FunctionComponent<StickyProps> = (props) => {
   const {
     position = 'top',
@@ -74,7 +78,7 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
   const offset = position === 'top' ? top : bottom
   const [rootRect, setRootRect] = useState<Partial<StickyRect>>({})
   const [fixed, setFixed] = useState(false)
-  const [transform, setTransform] = useState(0) //相对容器偏移距离
+  const [transform, setTransform] = useState(0) // 相对容器偏移距离
 
   useWatch(fixed, () => {
     onChange && onChange(fixed)
@@ -161,11 +165,12 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
     <div
       ref={rootRef}
       style={rootStyle}
-      className={`nut-sticky ${className}`}
+      className={classNames(b(), className)}
       {...rest}
     >
       <div
-        className={`nut-sticky-box ${fixed ? 'nut-sticky-fixed' : ''}`}
+        // 应符合 bem 规范
+        className={classNames('nut-sticky-box', { 'nut-sticky-fixed': fixed })}
         ref={stickyRef}
         style={stickyStyle}
       >

src/packages/sticky/sticky.tsx

@@ -5,10 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import classNames from 'classnames'
 import { getScrollParent } from '@/utils/get-scroll-parent'
 import { getRect } from '@/utils/useClientRect'
 import useWatch from '@/utils/useWatch'
 import { BasicComponent } from '@/utils/typings'
+import bem from '@/utils/bem'
 
 export interface StickyProps extends BasicComponent {
   container?: React.RefObject<HTMLElement>
@@ -28,6 +30,8 @@ const defaultProps = {
   zIndex: 2000,
 } as StickyProps
 
+const b = bem('sticky')
+
 export const Sticky: FunctionComponent<StickyProps> = (props) => {
   const {
     position = 'top',
@@ -174,10 +178,15 @@ export const Sticky: FunctionComponent<StickyProps> = (props) => {
     <div
       ref={rootRef}
       style={rootStyle}
-      className={`nut-sticky ${className}`}
+      className={classNames(b(), className)}
       {...rest}
     >
-      <div className="nut-sticky-box" ref={stickyRef} style={stickyStyle}>
+      <div
+        // 应符合 bem 规范
+        className="nut-sticky-box"
+        ref={stickyRef}
+        style={stickyStyle}
+      >
         {children}
       </div>
     </div>

src/packages/swipe/swipe.taro.tsx

@@ -7,6 +7,7 @@ import React, {
   useImperativeHandle,
   useEffect,
 } from 'react'
+import classNames from 'classnames'
 import { nextTick, useReady } from '@tarojs/taro'
 import bem from '@/utils/bem'
 import { useTouch } from '@/utils/useTouch'
@@ -278,7 +279,7 @@ export const Swipe = forwardRef<
   return (
     <div
       ref={root}
-      className={`${swipeBem()} ${className}`}
+      className={classNames(swipeBem(), className)}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
       onTouchEnd={(e: any) => onTouchEnd(e)}

src/packages/swipe/swipe.tsx

@@ -8,6 +8,7 @@ import React, {
   useImperativeHandle,
   useEffect,
 } from 'react'
+import classNames from 'classnames'
 import bem from '@/utils/bem'
 import { useTouch } from '@/utils/useTouch'
 import { getRect } from '@/utils/useClientRect'
@@ -277,7 +278,7 @@ export const Swipe = forwardRef<
   return (
     <div
       ref={root}
-      className={`${swipeBem()} ${className}`}
+      className={classNames(swipeBem(), className)}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
       onTouchEnd={(e: any) => onTouchEnd(e)}