From 0f47b50df0c7d30cb588932f511c40df1660627c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 7 Sep 2021 13:07:41 +0800
Subject: [PATCH] fix: Alert message could be nullable (#32057)

* fix: Alert message could be nullable

close #32047

* update snapshot
---
 .../__tests__/__snapshots__/demo.test.ts.snap | 72 -------------------
 .../__snapshots__/index.test.tsx.snap         | 15 +---
 components/alert/__tests__/index.test.tsx     |  9 +++
 components/alert/index.tsx                    |  8 +--
 .../__tests__/__snapshots__/demo.test.js.snap |  3 -
 .../__snapshots__/components.test.js.snap     | 18 -----
 6 files changed, 13 insertions(+), 112 deletions(-)

diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
index 5c781b14de..1f736dbadf 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -34,9 +34,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <div
       class="ant-alert-action"
@@ -143,9 +140,6 @@ Array [
       >
         Warning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <div
       class="ant-alert-action"
@@ -308,9 +302,6 @@ Array [
       >
         Warning text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <br />,
@@ -346,9 +337,6 @@ Array [
       >
         Very long warning text warning text text text text text text text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -390,9 +378,6 @@ Array [
       >
         Warning text without icon
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <br />,
@@ -428,9 +413,6 @@ Array [
       >
         Error text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
 ]
@@ -450,9 +432,6 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
     >
       Success Text
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -472,9 +451,6 @@ Array [
       >
         Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -564,9 +540,6 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
     >
       Info Text
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
   <button
     class="ant-alert-close-icon"
@@ -597,9 +570,6 @@ Array [
       >
         showIcon = false
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -634,9 +604,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -671,9 +638,6 @@ Array [
       >
         Informational Notes
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -708,9 +672,6 @@ Array [
       >
         Warning
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -745,9 +706,6 @@ Array [
       >
         Error
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1039,9 +997,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1076,9 +1031,6 @@ Array [
       >
         Informational Notes
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1113,9 +1065,6 @@ Array [
       >
         Warning
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -1175,9 +1124,6 @@ Array [
       >
         Error
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1424,9 +1370,6 @@ exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -1446,9 +1389,6 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
       >
         Alert Message Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -1497,9 +1437,6 @@ Array [
       >
         Success Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1515,9 +1452,6 @@ Array [
       >
         Info Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1533,9 +1467,6 @@ Array [
       >
         Warning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1551,9 +1482,6 @@ Array [
       >
         Error Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
 ]
diff --git a/components/alert/__tests__/__snapshots__/index.test.tsx.snap b/components/alert/__tests__/__snapshots__/index.test.tsx.snap
index 532e95c6b1..d07a3c448e 100644
--- a/components/alert/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -33,9 +33,6 @@ exports[`Alert action of Alert custom action 1`] = `
     >
       Success Tips
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
   <div
     class="ant-alert-action"
@@ -96,9 +93,6 @@ exports[`Alert could accept none react element icon 1`] = `
     >
       Success Tips
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -111,13 +105,6 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
 >
   <div
     class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    />
-    <div
-      class="ant-alert-description"
-    />
-  </div>
+  />
 </div>
 `;
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index c4379a288d..11ee125e88 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -76,6 +76,8 @@ describe('Alert', () => {
   });
 
   it('ErrorBoundary', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    expect(console.error).toBeCalledTimes(0);
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef
     const ThrowError = () => <NotExisted />;
@@ -86,6 +88,8 @@ describe('Alert', () => {
     );
     // eslint-disable-next-line jest/no-standalone-expect
     expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
+    // eslint-disable-next-line no-console
+    (console.error as any).mockRestore();
   });
 
   it('could be used with Tooltip', async () => {
@@ -126,4 +130,9 @@ describe('Alert', () => {
     const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
     expect(wrapper).toMatchRenderedSnapshot();
   });
+
+  it('should not render message div when no message', () => {
+    const wrapper = mount(<Alert description="description" />);
+    expect(wrapper.exists('.ant-alert-message')).toBe(false);
+  });
 });
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index d569397d05..f35e599dd4 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -24,7 +24,7 @@ export interface AlertProps {
   /** Close text to show */
   closeText?: React.ReactNode;
   /** Content of Alert */
-  message: React.ReactNode;
+  message?: React.ReactNode;
   /** Additional content of Alert */
   description?: React.ReactNode;
   /** Callback when close Alert */
@@ -177,12 +177,10 @@ const Alert: AlertInterface = ({
         >
           {isShowIcon ? renderIconNode() : null}
           <div className={`${prefixCls}-content`}>
-            <div className={`${prefixCls}-message`}>{message}</div>
-            <div className={`${prefixCls}-description`}>{description}</div>
+            {message ? <div className={`${prefixCls}-message`}>{message}</div> : null}
+            {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
           </div>
-
           {action ? <div className={`${prefixCls}-action`}>{action}</div> : null}
-
           {renderCloseIcon()}
         </div>
       )}
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
index 1c8d3e791f..a078f79ae0 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -4213,9 +4213,6 @@ Array [
       >
         You selected date: 2017-01-25
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 034aef950c..95f0b51cc4 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -14,9 +14,6 @@ exports[`ConfigProvider components Alert configProvider 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -35,9 +32,6 @@ exports[`ConfigProvider components Alert configProvider componentSize large 1`]
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -56,9 +50,6 @@ exports[`ConfigProvider components Alert configProvider componentSize middle 1`]
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -77,9 +68,6 @@ exports[`ConfigProvider components Alert configProvider virtual and dropdownMatc
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -98,9 +86,6 @@ exports[`ConfigProvider components Alert normal 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -119,9 +104,6 @@ exports[`ConfigProvider components Alert prefixCls 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="prefix-Alert-description"
-    />
   </div>
 </div>
 `;