2022-06-22 14:57:09 +08:00
|
|
|
import React from 'react';
|
2020-02-07 17:55:27 +08:00
|
|
|
import notification from '..';
|
2023-06-07 11:54:50 +08:00
|
|
|
import { fireEvent, pureRender, render } from '../../../tests/utils';
|
2020-02-07 17:55:27 +08:00
|
|
|
import ConfigProvider from '../../config-provider';
|
|
|
|
|
|
|
|
describe('notification.hooks', () => {
|
2022-05-11 14:26:18 +08:00
|
|
|
beforeEach(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2020-02-07 17:55:27 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
2020-02-07 17:55:27 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should work', () => {
|
|
|
|
const Context = React.createContext('light');
|
|
|
|
|
2022-08-26 16:00:38 +08:00
|
|
|
const Demo: React.FC = () => {
|
2020-02-07 17:55:27 +08:00
|
|
|
const [api, holder] = notification.useNotification();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConfigProvider prefixCls="my-test">
|
|
|
|
<Context.Provider value="bamboo">
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={() => {
|
|
|
|
api.open({
|
2022-05-11 14:26:18 +08:00
|
|
|
message: null,
|
2020-02-07 17:55:27 +08:00
|
|
|
description: (
|
|
|
|
<Context.Consumer>
|
2022-11-19 13:47:33 +08:00
|
|
|
{(name) => <span className="hook-test-result">{name}</span>}
|
2020-02-07 17:55:27 +08:00
|
|
|
</Context.Consumer>
|
|
|
|
),
|
|
|
|
duration: 0,
|
|
|
|
});
|
|
|
|
}}
|
2022-08-26 16:00:38 +08:00
|
|
|
>
|
|
|
|
test
|
|
|
|
</button>
|
2020-02-07 17:55:27 +08:00
|
|
|
{holder}
|
|
|
|
</Context.Provider>
|
|
|
|
</ConfigProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
const { container } = render(<Demo />);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
|
|
expect(document.querySelectorAll('.my-test-notification-notice')).toHaveLength(1);
|
|
|
|
expect(document.querySelector('.hook-test-result')!.textContent).toEqual('bamboo');
|
2020-02-07 17:55:27 +08:00
|
|
|
});
|
2020-05-21 10:36:18 +08:00
|
|
|
|
2020-06-07 21:47:07 +08:00
|
|
|
it('should work with success', () => {
|
|
|
|
const Context = React.createContext('light');
|
|
|
|
|
2022-08-26 16:00:38 +08:00
|
|
|
const Demo: React.FC = () => {
|
2020-06-07 21:47:07 +08:00
|
|
|
const [api, holder] = notification.useNotification();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConfigProvider prefixCls="my-test">
|
|
|
|
<Context.Provider value="bamboo">
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={() => {
|
|
|
|
api.success({
|
2022-05-11 14:26:18 +08:00
|
|
|
message: null,
|
2020-06-07 21:47:07 +08:00
|
|
|
description: (
|
|
|
|
<Context.Consumer>
|
2022-11-19 13:47:33 +08:00
|
|
|
{(name) => <span className="hook-test-result">{name}</span>}
|
2020-06-07 21:47:07 +08:00
|
|
|
</Context.Consumer>
|
|
|
|
),
|
|
|
|
duration: 0,
|
|
|
|
});
|
|
|
|
}}
|
2022-08-26 16:00:38 +08:00
|
|
|
>
|
|
|
|
test
|
|
|
|
</button>
|
2020-06-07 21:47:07 +08:00
|
|
|
{holder}
|
|
|
|
</Context.Provider>
|
|
|
|
</ConfigProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
const { container } = render(<Demo />);
|
|
|
|
fireEvent.click(container.querySelector('button')!);
|
|
|
|
expect(document.querySelectorAll('.my-test-notification-notice')).toHaveLength(1);
|
|
|
|
expect(document.querySelectorAll('.anticon-check-circle')).toHaveLength(1);
|
|
|
|
expect(document.querySelector('.hook-test-result')!.textContent).toEqual('bamboo');
|
2020-06-07 21:47:07 +08:00
|
|
|
});
|
|
|
|
|
2020-05-21 10:36:18 +08:00
|
|
|
it('should be same hook', () => {
|
|
|
|
let count = 0;
|
|
|
|
|
2022-08-26 16:00:38 +08:00
|
|
|
const Demo: React.FC = () => {
|
|
|
|
const [, forceUpdate] = React.useState([]);
|
2020-05-21 10:36:18 +08:00
|
|
|
const [api] = notification.useNotification();
|
|
|
|
React.useEffect(() => {
|
|
|
|
count += 1;
|
|
|
|
expect(count).toEqual(1);
|
2022-08-26 16:00:38 +08:00
|
|
|
forceUpdate([]);
|
2020-05-21 10:36:18 +08:00
|
|
|
}, [api]);
|
|
|
|
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
2022-08-26 16:00:38 +08:00
|
|
|
pureRender(<Demo />);
|
2020-05-21 10:36:18 +08:00
|
|
|
});
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
describe('not break in effect', () => {
|
|
|
|
it('basic', () => {
|
|
|
|
const Demo = () => {
|
|
|
|
const [api, holder] = notification.useNotification();
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
api.info({
|
|
|
|
message: null,
|
|
|
|
description: <div className="bamboo" />,
|
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return holder;
|
|
|
|
};
|
|
|
|
|
|
|
|
render(<Demo />);
|
|
|
|
|
|
|
|
expect(document.querySelector('.bamboo')).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('warning if user call update in render', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
const Demo = () => {
|
|
|
|
const [api, holder] = notification.useNotification();
|
|
|
|
const calledRef = React.useRef(false);
|
|
|
|
|
|
|
|
if (!calledRef.current) {
|
|
|
|
api.info({
|
|
|
|
message: null,
|
|
|
|
description: <div className="bamboo" />,
|
|
|
|
});
|
|
|
|
calledRef.current = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return holder;
|
|
|
|
};
|
|
|
|
|
|
|
|
render(<Demo />);
|
|
|
|
|
|
|
|
expect(document.querySelector('.bamboo')).toBeFalsy();
|
|
|
|
expect(errorSpy).toHaveBeenCalledWith(
|
|
|
|
'Warning: [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.',
|
|
|
|
);
|
|
|
|
|
|
|
|
errorSpy.mockRestore();
|
|
|
|
});
|
|
|
|
});
|
2020-02-07 17:55:27 +08:00
|
|
|
});
|