2022-04-06 11:07:15 +08:00
|
|
|
import { mount } from 'enzyme';
|
2022-06-22 14:57:09 +08:00
|
|
|
import React from 'react';
|
2016-12-14 14:48:09 +08:00
|
|
|
import Popover from '..';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { render } from '../../../tests/utils';
|
2020-01-02 19:10:16 +08:00
|
|
|
import ConfigProvider from '../../config-provider';
|
2016-12-14 14:48:09 +08:00
|
|
|
|
|
|
|
describe('Popover', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Popover);
|
|
|
|
|
2020-09-18 13:01:36 +08:00
|
|
|
it('should show overlay when trigger is clicked', () => {
|
2020-04-27 11:59:05 +08:00
|
|
|
const ref = React.createRef();
|
|
|
|
|
2017-07-07 20:26:08 +08:00
|
|
|
const popover = mount(
|
2020-04-27 11:59:05 +08:00
|
|
|
<Popover ref={ref} content="console.log('hello world')" title="code" trigger="click">
|
2016-12-14 14:48:09 +08:00
|
|
|
<span>show me your code</span>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Popover>,
|
2016-12-14 14:48:09 +08:00
|
|
|
);
|
|
|
|
|
2020-04-27 11:59:05 +08:00
|
|
|
expect(ref.current.getPopupDomNode()).toBe(null);
|
2016-12-14 14:48:09 +08:00
|
|
|
|
2017-07-07 20:26:08 +08:00
|
|
|
popover.find('span').simulate('click');
|
2020-09-18 13:01:36 +08:00
|
|
|
expect(popover.find('Trigger PopupInner').props().visible).toBeTruthy();
|
2020-03-10 13:57:02 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('shows content for render functions', () => {
|
|
|
|
const renderTitle = () => 'some-title';
|
|
|
|
const renderContent = () => 'some-content';
|
2020-04-27 11:59:05 +08:00
|
|
|
const ref = React.createRef();
|
2020-03-10 13:57:02 +08:00
|
|
|
|
|
|
|
const popover = mount(
|
2020-04-27 11:59:05 +08:00
|
|
|
<Popover ref={ref} content={renderContent} title={renderTitle} trigger="click">
|
2020-03-10 13:57:02 +08:00
|
|
|
<span>show me your code</span>
|
|
|
|
</Popover>,
|
|
|
|
);
|
|
|
|
|
|
|
|
popover.find('span').simulate('click');
|
|
|
|
|
2020-04-27 11:59:05 +08:00
|
|
|
const popup = ref.current.getPopupDomNode();
|
2020-03-10 13:57:02 +08:00
|
|
|
expect(popup).not.toBe(null);
|
|
|
|
expect(popup.innerHTML).toContain('some-title');
|
|
|
|
expect(popup.innerHTML).toContain('some-content');
|
|
|
|
expect(popup.innerHTML).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('handles empty title/content props safely', () => {
|
2020-04-27 11:59:05 +08:00
|
|
|
const ref = React.createRef();
|
|
|
|
|
2020-03-10 13:57:02 +08:00
|
|
|
const popover = mount(
|
2020-04-27 11:59:05 +08:00
|
|
|
<Popover trigger="click" ref={ref}>
|
2020-03-10 13:57:02 +08:00
|
|
|
<span>show me your code</span>
|
|
|
|
</Popover>,
|
|
|
|
);
|
|
|
|
|
|
|
|
popover.find('span').simulate('click');
|
|
|
|
|
2020-04-27 11:59:05 +08:00
|
|
|
const popup = ref.current.getPopupDomNode();
|
2022-02-07 15:28:46 +08:00
|
|
|
expect(popup).toBe(null);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not render popover when the title & content props is empty', () => {
|
|
|
|
const ref = React.createRef();
|
|
|
|
|
|
|
|
const popover = mount(
|
|
|
|
<Popover trigger="click" ref={ref} content="">
|
|
|
|
<span>show me your code</span>
|
|
|
|
</Popover>,
|
|
|
|
);
|
|
|
|
|
|
|
|
popover.find('span').simulate('click');
|
|
|
|
const popup = ref.current.getPopupDomNode();
|
|
|
|
|
|
|
|
expect(popup).toBe(null);
|
2016-12-14 14:48:09 +08:00
|
|
|
});
|
2019-07-09 11:46:21 +08:00
|
|
|
|
|
|
|
it('props#overlay do not warn anymore', () => {
|
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
|
|
|
|
const overlay = jest.fn();
|
2022-04-06 11:07:15 +08:00
|
|
|
render(
|
2019-07-09 11:46:21 +08:00
|
|
|
<Popover content="console.log('hello world')" title="code" trigger="click">
|
|
|
|
<span>show me your code</span>
|
|
|
|
</Popover>,
|
|
|
|
);
|
|
|
|
|
2022-04-06 11:07:15 +08:00
|
|
|
expect(errorSpy).not.toHaveBeenCalled();
|
2019-07-09 11:46:21 +08:00
|
|
|
expect(overlay).not.toHaveBeenCalled();
|
|
|
|
});
|
2020-01-02 19:10:16 +08:00
|
|
|
|
|
|
|
it(`should be rendered correctly in RTL direction`, () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<ConfigProvider direction="rtl">
|
|
|
|
<Popover title="RTL" visible>
|
|
|
|
<span>show me your Rtl demo</span>
|
|
|
|
</Popover>
|
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
2022-04-06 11:07:15 +08:00
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
2020-01-02 19:10:16 +08:00
|
|
|
});
|
2016-12-14 14:48:09 +08:00
|
|
|
});
|