import React from 'react'; import message, { actDestroy, actWrapper } from '..'; import { act } from '../../../tests/utils'; import App from '../../app'; import ConfigProvider, { defaultPrefixCls } from '../../config-provider'; import { awaitPromise, triggerMotionEnd } from './util'; describe('message.config', () => { beforeAll(() => { actWrapper(act); }); beforeEach(() => { jest.useFakeTimers(); }); afterEach(async () => { // Clean up message.destroy(); await triggerMotionEnd(); jest.useRealTimers(); await awaitPromise(); }); it('should be able to config top', async () => { message.config({ top: 100, }); message.info('whatever'); await awaitPromise(); expect(document.querySelector('.ant-message')).toHaveStyle({ top: '100px', }); }); it('should be able to config top with string value', async () => { message.config({ top: '10vh', }); message.info('test message'); await awaitPromise(); expect(document.querySelector('.ant-message')).toHaveStyle({ top: '10vh', }); }); it('should be able to config rtl', async () => { message.config({ rtl: true, }); message.info('whatever'); await awaitPromise(); expect(document.querySelector('.ant-message-rtl')).toBeTruthy(); }); it('should be able to config getContainer', async () => { const div = document.createElement('div'); div.className = 'custom-container'; document.body.appendChild(div); message.config({ getContainer: () => div, }); message.info('whatever'); await awaitPromise(); expect(div.querySelector('.ant-message')).toBeTruthy(); message.config({ getContainer: undefined, }); document.body.removeChild(div); }); it('should be able to config maxCount', async () => { message.config({ maxCount: 5, }); for (let i = 0; i < 10; i += 1) { message.info('test'); } message.info('last'); await awaitPromise(); const noticeWithoutLeaving = Array.from( document.querySelectorAll('.ant-message-notice-wrapper'), ).filter((ele) => !ele.classList.contains('ant-message-move-up-leave')); expect(noticeWithoutLeaving).toHaveLength(5); expect(noticeWithoutLeaving[4].textContent).toEqual('last'); await triggerMotionEnd(); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0); message.config({ maxCount: undefined, }); }); it('should be able to config duration', async () => { message.config({ duration: 5, }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1); act(() => { jest.advanceTimersByTime(4000); }); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1); act(() => { jest.advanceTimersByTime(2000); }); await triggerMotionEnd('.ant-message-notice-wrapper'); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0); message.config({ duration: undefined, }); }); it('customize prefix should auto get transition prefixCls', async () => { message.config({ prefixCls: 'light-message', }); message.info('bamboo'); await awaitPromise(); expect(document.querySelector('.light-message-move-up')).toBeTruthy(); message.config({ prefixCls: undefined, }); }); it('should be able to global config rootPrefixCls', async () => { ConfigProvider.config({ prefixCls: 'prefix-test', iconPrefixCls: 'bamboo' }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0); expect(document.querySelectorAll('.prefix-test-message-notice')).toHaveLength(1); expect(document.querySelectorAll('.bamboo-info-circle')).toHaveLength(1); ConfigProvider.config({ prefixCls: defaultPrefixCls, iconPrefixCls: null! }); }); it('should be able to config prefixCls', async () => { message.config({ prefixCls: 'prefix-test', }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0); expect(document.querySelectorAll('.prefix-test-notice')).toHaveLength(1); message.config({ prefixCls: '', // can be set to empty, ant default value is set in ConfigProvider }); }); it('should be able to config transitionName', async () => { message.config({ transitionName: '', }); message.info('last'); await awaitPromise(); expect(document.querySelector('.ant-message-notice')).toBeTruthy(); expect(document.querySelectorAll('.ant-move-up-enter')).toHaveLength(0); message.config({ transitionName: undefined, }); }); it('should be able to config getContainer, although messageInstance already exists', async () => { function createContainer(): [HTMLElement, VoidFunction] { const container = document.createElement('div'); document.body.appendChild(container); return [ container, () => { document.body.removeChild(container); }, ]; } const [container1, removeContainer1] = createContainer(); const [container2, removeContainer2] = createContainer(); expect(container1.querySelector('.ant-message-notice')).toBeFalsy(); expect(container2.querySelector('.ant-message-notice')).toBeFalsy(); message.config({ getContainer: () => container1, }); const messageText1 = 'mounted in container1'; message.info(messageText1); await awaitPromise(); expect(container1.querySelector('.ant-message-notice')!.textContent).toEqual(messageText1); // Config will directly change container message.config({ getContainer: () => container2, }); const messageText2 = 'mounted in container2'; message.info(messageText2); expect(container2.querySelectorAll('.ant-message-notice')[1]!.textContent).toEqual( messageText2, ); removeContainer1(); removeContainer2(); message.config({ getContainer: undefined }); }); it('should be able to config holderRender', async () => { actDestroy(); ConfigProvider.config({ holderRender: (children) => ( <ConfigProvider prefixCls="test" iconPrefixCls="icon"> {children} </ConfigProvider> ), }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.ant-message')).toHaveLength(0); expect(document.querySelectorAll('.anticon-info-circle')).toHaveLength(0); expect(document.querySelectorAll('.test-message')).toHaveLength(1); expect(document.querySelectorAll('.icon-info-circle')).toHaveLength(1); ConfigProvider.config({ holderRender: undefined }); }); it('should be able to config holderRender config rtl', async () => { document.body.innerHTML = ''; actDestroy(); ConfigProvider.config({ holderRender: (children) => <ConfigProvider direction="rtl">{children}</ConfigProvider>, }); message.info('last'); await awaitPromise(); expect(document.querySelector('.ant-message-rtl')).toBeTruthy(); document.body.innerHTML = ''; actDestroy(); message.config({ rtl: true }); message.info('last'); await awaitPromise(); expect(document.querySelector('.ant-message-rtl')).toBeTruthy(); document.body.innerHTML = ''; actDestroy(); message.config({ rtl: false }); message.info('last'); await awaitPromise(); expect(document.querySelector('.ant-message-rtl')).toBeFalsy(); message.config({ rtl: undefined }); ConfigProvider.config({ holderRender: undefined }); }); it('should be able to config holderRender and static config', async () => { // level 1 document.body.innerHTML = ''; actDestroy(); ConfigProvider.config({ prefixCls: 'prefix-1' }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.prefix-1-message')).toHaveLength(1); // level 2 document.body.innerHTML = ''; actDestroy(); ConfigProvider.config({ prefixCls: 'prefix-1', holderRender: (children) => <ConfigProvider prefixCls="prefix-2">{children}</ConfigProvider>, }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.prefix-2-message')).toHaveLength(1); // level 3 document.body.innerHTML = ''; actDestroy(); message.config({ prefixCls: 'prefix-3-message' }); message.info('last'); await awaitPromise(); expect(document.querySelectorAll('.prefix-3-message')).toHaveLength(1); // clear config message.config({ prefixCls: '' }); ConfigProvider.config({ prefixCls: '', iconPrefixCls: '', holderRender: undefined }); }); it('should be able to config holderRender use App', async () => { document.body.innerHTML = ''; actDestroy(); ConfigProvider.config({ holderRender: (children) => <App message={{ maxCount: 1 }}>{children}</App>, }); message.info('last'); message.info('last'); await awaitPromise(); const noticeWithoutLeaving = Array.from( document.querySelectorAll('.ant-message-notice-wrapper'), ).filter((ele) => !ele.classList.contains('ant-message-move-up-leave')); expect(noticeWithoutLeaving).toHaveLength(1); ConfigProvider.config({ holderRender: undefined }); }); });