fix: Alert message could be nullable (#32057)

* fix: Alert message could be nullable

close #32047

* update snapshot
This commit is contained in:
afc163 2021-09-07 13:07:41 +08:00 committed by GitHub
parent 02ca969711
commit 0f47b50df0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 112 deletions

View File

@ -34,9 +34,6 @@ Array [
> >
Success Tips Success Tips
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<div <div
class="ant-alert-action" class="ant-alert-action"
@ -143,9 +140,6 @@ Array [
> >
Warning Text Warning Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<div <div
class="ant-alert-action" class="ant-alert-action"
@ -308,9 +302,6 @@ Array [
> >
Warning text Warning text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<br />, <br />,
@ -346,9 +337,6 @@ Array [
> >
Very long warning text warning text text text text text text text Very long warning text warning text text text text text text text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<button <button
class="ant-alert-close-icon" class="ant-alert-close-icon"
@ -390,9 +378,6 @@ Array [
> >
Warning text without icon Warning text without icon
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<br />, <br />,
@ -428,9 +413,6 @@ Array [
> >
Error text Error text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
] ]
@ -450,9 +432,6 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
> >
Success Text Success Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -472,9 +451,6 @@ Array [
> >
Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<button <button
class="ant-alert-close-icon" class="ant-alert-close-icon"
@ -564,9 +540,6 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
> >
Info Text Info Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<button <button
class="ant-alert-close-icon" class="ant-alert-close-icon"
@ -597,9 +570,6 @@ Array [
> >
showIcon = false showIcon = false
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -634,9 +604,6 @@ Array [
> >
Success Tips Success Tips
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -671,9 +638,6 @@ Array [
> >
Informational Notes Informational Notes
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -708,9 +672,6 @@ Array [
> >
Warning Warning
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -745,9 +706,6 @@ Array [
> >
Error Error
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1039,9 +997,6 @@ Array [
> >
Success Tips Success Tips
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1076,9 +1031,6 @@ Array [
> >
Informational Notes Informational Notes
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1113,9 +1065,6 @@ Array [
> >
Warning Warning
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<button <button
class="ant-alert-close-icon" class="ant-alert-close-icon"
@ -1175,9 +1124,6 @@ Array [
> >
Error Error
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1424,9 +1370,6 @@ exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -1446,9 +1389,6 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
> >
Alert Message Text Alert Message Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<button <button
class="ant-alert-close-icon" class="ant-alert-close-icon"
@ -1497,9 +1437,6 @@ Array [
> >
Success Text Success Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1515,9 +1452,6 @@ Array [
> >
Info Text Info Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1533,9 +1467,6 @@ Array [
> >
Warning Text Warning Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div
@ -1551,9 +1482,6 @@ Array [
> >
Error Text Error Text
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
] ]

View File

@ -33,9 +33,6 @@ exports[`Alert action of Alert custom action 1`] = `
> >
Success Tips Success Tips
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
<div <div
class="ant-alert-action" class="ant-alert-action"
@ -96,9 +93,6 @@ exports[`Alert could accept none react element icon 1`] = `
> >
Success Tips Success Tips
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -111,13 +105,6 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
> >
<div <div
class="ant-alert-content" class="ant-alert-content"
>
<div
class="ant-alert-message"
/> />
<div
class="ant-alert-description"
/>
</div>
</div> </div>
`; `;

View File

@ -76,6 +76,8 @@ describe('Alert', () => {
}); });
it('ErrorBoundary', () => { it('ErrorBoundary', () => {
jest.spyOn(console, 'error').mockImplementation(() => undefined);
expect(console.error).toBeCalledTimes(0);
// @ts-expect-error // @ts-expect-error
// eslint-disable-next-line react/jsx-no-undef // eslint-disable-next-line react/jsx-no-undef
const ThrowError = () => <NotExisted />; const ThrowError = () => <NotExisted />;
@ -86,6 +88,8 @@ describe('Alert', () => {
); );
// eslint-disable-next-line jest/no-standalone-expect // eslint-disable-next-line jest/no-standalone-expect
expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined'); 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 () => { 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" />); const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
expect(wrapper).toMatchRenderedSnapshot(); 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);
});
}); });

View File

@ -24,7 +24,7 @@ export interface AlertProps {
/** Close text to show */ /** Close text to show */
closeText?: React.ReactNode; closeText?: React.ReactNode;
/** Content of Alert */ /** Content of Alert */
message: React.ReactNode; message?: React.ReactNode;
/** Additional content of Alert */ /** Additional content of Alert */
description?: React.ReactNode; description?: React.ReactNode;
/** Callback when close Alert */ /** Callback when close Alert */
@ -177,12 +177,10 @@ const Alert: AlertInterface = ({
> >
{isShowIcon ? renderIconNode() : null} {isShowIcon ? renderIconNode() : null}
<div className={`${prefixCls}-content`}> <div className={`${prefixCls}-content`}>
<div className={`${prefixCls}-message`}>{message}</div> {message ? <div className={`${prefixCls}-message`}>{message}</div> : null}
<div className={`${prefixCls}-description`}>{description}</div> {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
</div> </div>
{action ? <div className={`${prefixCls}-action`}>{action}</div> : null} {action ? <div className={`${prefixCls}-action`}>{action}</div> : null}
{renderCloseIcon()} {renderCloseIcon()}
</div> </div>
)} )}

View File

@ -4213,9 +4213,6 @@ Array [
> >
You selected date: 2017-01-25 You selected date: 2017-01-25
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div>, </div>,
<div <div

View File

@ -14,9 +14,6 @@ exports[`ConfigProvider components Alert configProvider 1`] = `
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="config-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -35,9 +32,6 @@ exports[`ConfigProvider components Alert configProvider componentSize large 1`]
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="config-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -56,9 +50,6 @@ exports[`ConfigProvider components Alert configProvider componentSize middle 1`]
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="config-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -77,9 +68,6 @@ exports[`ConfigProvider components Alert configProvider virtual and dropdownMatc
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -98,9 +86,6 @@ exports[`ConfigProvider components Alert normal 1`] = `
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="ant-alert-description"
/>
</div> </div>
</div> </div>
`; `;
@ -119,9 +104,6 @@ exports[`ConfigProvider components Alert prefixCls 1`] = `
> >
Bamboo is Little Light Bamboo is Little Light
</div> </div>
<div
class="prefix-Alert-description"
/>
</div> </div>
</div> </div>
`; `;