fix: 调整标题和描述间距,增加test

jdf2e · Dec 24, 2024 · e70cef6 · e70cef6
1 parent 534c260
commit e70cef6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx
@@ -69,6 +69,28 @@ test('pop from right', () => {
   expect(pop).toBeTruthy()
 })
 
+test('pop title', () => {
+  const { container } = render(<Popup title="标题" visible position="bottom" />)
+  const title = container.querySelector('.nut-popup-title-title') as HTMLElement
+  expect(title).toHaveTextContent('标题')
+})
+
+test('pop left', () => {
+  const { container } = render(<Popup left="返回" visible position="bottom" />)
+  const title = container.querySelector('.nut-popup-title-left') as HTMLElement
+  expect(title).toHaveTextContent('返回')
+})
+
+test('pop description', () => {
+  const { container } = render(
+    <Popup description="副标题" visible position="bottom" />
+  )
+  const title = container.querySelector(
+    '.nut-popup-title-description'
+  ) as HTMLElement
+  expect(title).toHaveTextContent('副标题')
+})
+
 test('should render close icon when using closeable prop', () => {
   const { container } = render(<Popup visible closeable />)
   const closeIcon = container.querySelector(
@@ -139,3 +161,13 @@ test('event click-overlay test', async () => {
   fireEvent.click(overlay)
   expect(onOverlayClick).toBeCalled()
 })
+
+test('pop destroyOnClose', () => {
+  const onClose = vi.fn()
+  const { container } = render(
+    <Popup visible destroyOnClose onClose={onClose} />
+  )
+  const overlay = container.querySelector('.nut-overlay') as Element
+  fireEvent.click(overlay)
+  expect(onClose).toBeCalled()
+})
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
@@ -23,6 +23,7 @@
       justify-content: center;
       align-items: center;
     }
+
     &-title {
       color: $color-title;
       font-weight: $font-weight-bold;
@@ -34,7 +35,9 @@
       color: $color-text;
       font-size: $popup-description-font-size;
       font-weight: $font-weight;
-      margin-top: $popup-description-spacing;
+      &-gap {
+        margin-top: $popup-description-spacing;
+      }
     }
 
     &-left {

diff --git a/src/packages/popup/popup.taro.tsx b/src/packages/popup/popup.taro.tsx
@@ -217,7 +217,9 @@ export const Popup: FunctionComponent<
                     </View>
                   )}
                   {description && (
-                    <View className={`${classPrefix}-title-description`}>
+                    <View
+                      className={`${classPrefix}-title-description ${title ? `${classPrefix}-title-description-gap` : ''}`}
+                    >
                       {description}
                     </View>
                   )}

diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx
@@ -218,7 +218,9 @@ export const Popup: FunctionComponent<
                     <div className={`${classPrefix}-title-title`}>{title}</div>
                   )}
                   {description && (
-                    <div className={`${classPrefix}-title-description`}>
+                    <div
+                      className={`${classPrefix}-title-description ${title ? `${classPrefix}-title-description-gap` : ''}`}
+                    >
                       {description}
                     </div>
                   )}