import React from 'react';
import { mount } from 'enzyme';
import { SmileOutlined, LikeOutlined, HighlightOutlined } from '@ant-design/icons';
import KeyCode from 'rc-util/lib/KeyCode';
import copy from 'copy-to-clipboard';
import Title from '../Title';
import Link from '../Link';
import Paragraph from '../Paragraph';
import Base from '../Base'; // eslint-disable-line import/no-named-as-default
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import Typography from '../Typography';
import { sleep } from '../../../tests/utils';
import TextArea from '../../input/TextArea';
jest.mock('copy-to-clipboard');
describe('Typography', () => {
mountTest(Paragraph);
mountTest(Base);
mountTest(Title);
mountTest(Link);
rtlTest(Paragraph);
rtlTest(Base);
rtlTest(Title);
rtlTest(Link);
const LINE_STR_COUNT = 20;
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// Mock offsetHeight
const originOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')
.get;
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
get() {
let html = this.innerHTML;
html = html.replace(/<[^>]*>/g, '');
const lines = Math.ceil(html.length / LINE_STR_COUNT);
return lines * 16;
},
});
// Mock getComputedStyle
const originGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = ele => {
const style = originGetComputedStyle(ele);
style.lineHeight = '16px';
return style;
};
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
get: originOffsetHeight,
});
window.getComputedStyle = originGetComputedStyle;
});
describe('Title', () => {
it('warning if `level` not correct', () => {
mount(
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
);
});
});
describe('Base', () => {
describe('trigger ellipsis update', () => {
const fullStr =
'Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light';
it('should trigger update', async () => {
const onEllipsis = jest.fn();
const wrapper = mount(
{fullStr}
,
);
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little ...');
expect(onEllipsis).toHaveBeenCalledWith(true);
onEllipsis.mockReset();
wrapper.setProps({ ellipsis: { rows: 2, onEllipsis } });
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual(
'Bamboo is Little Light Bamboo is Litt...',
);
expect(onEllipsis).not.toHaveBeenCalled();
wrapper.setProps({ ellipsis: { rows: 99, onEllipsis } });
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual(fullStr);
expect(onEllipsis).toHaveBeenCalledWith(false);
wrapper.unmount();
});
it('should middle ellipsis', async () => {
const suffix = '--suffix';
const wrapper = mount(
{fullStr}
,
);
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual('Bamboo is...--suffix');
wrapper.unmount();
});
it('should front or middle ellipsis', async () => {
const suffix = '--The information is very important';
const wrapper = mount(
{fullStr}
,
);
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual('...--The information is very important');
wrapper.setProps({ ellipsis: { rows: 2, suffix } });
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual('Ba...--The information is very important');
wrapper.setProps({ ellipsis: { rows: 99, suffix } });
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual(fullStr + suffix);
wrapper.unmount();
});
it('connect children', async () => {
const bamboo = 'Bamboo';
const is = ' is ';
const wrapper = mount(
{bamboo}
{is}
Little
Light
,
);
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little...');
});
it('should expandable work', async () => {
const onExpand = jest.fn();
const wrapper = mount(
{fullStr}
,
);
await sleep(20);
wrapper.update();
wrapper.find('.ant-typography-expand').simulate('click');
expect(onExpand).toHaveBeenCalled();
await sleep(20);
wrapper.update();
expect(wrapper.find('p').text()).toEqual(fullStr);
});
it('should have custom expand style', async () => {
const symbol = 'more';
const wrapper = mount(
{fullStr}
,
);
await sleep(20);
wrapper.update();
expect(wrapper.find('.ant-typography-expand').text()).toEqual('more');
});
it('can use css ellipsis', () => {
const wrapper = mount();
expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();
});
});
describe('copyable', () => {
function copyTest(name, text, target, icon, tooltips) {
it(name, async () => {
jest.useFakeTimers();
const onCopy = jest.fn();
const wrapper = mount(
test copy
,
);
if (icon) {
expect(wrapper.find('.anticon-smile').length).toBeTruthy();
} else {
expect(wrapper.find('.anticon-copy').length).toBeTruthy();
}
wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
if (tooltips === undefined || tooltips === true) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Copy');
} else if (tooltips === false) {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else if (tooltips[0] === '' && tooltips[1] === '') {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else if (tooltips[0] === '' && tooltips[1]) {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else if (tooltips[1] === '' && tooltips[0]) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[0]);
} else {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[0]);
}
wrapper.find('.ant-typography-copy').first().simulate('click');
jest.useRealTimers();
wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
// tooltips 为 ['', 'xxx'] 时,切换时需要延时 mousenEnterDelay 的时长
if (tooltips && tooltips[0] === '' && tooltips[1]) {
await sleep(150);
}
expect(copy.lastStr).toEqual(target);
wrapper.update();
expect(onCopy).toHaveBeenCalled();
let copiedIcon = '.anticon-check';
if (icon && icon.length > 1) {
copiedIcon = '.anticon-like';
} else {
copiedIcon = '.anticon-check';
}
expect(wrapper.find(copiedIcon).length).toBeTruthy();
wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
if (tooltips === undefined || tooltips === true) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Copied');
} else if (tooltips === false) {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else if (tooltips[0] === '' && tooltips[1] === '') {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else if (tooltips[0] === '' && tooltips[1]) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[1]);
} else if (tooltips[1] === '' && tooltips[0]) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe('');
} else {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[1]);
}
jest.useFakeTimers();
jest.runAllTimers();
wrapper.update();
// Will set back when 3 seconds pass
expect(wrapper.find(copiedIcon).length).toBeFalsy();
wrapper.unmount();
jest.useRealTimers();
});
}
copyTest('basic copy', undefined, 'test copy');
copyTest('customize copy', 'bamboo', 'bamboo');
copyTest('customize copy icon', 'bamboo', 'bamboo', );
copyTest('customize copy icon by pass array', 'bamboo', 'bamboo', [
,
]);
copyTest('customize copy icon and copied icon ', 'bamboo', 'bamboo', [
,
,
]);
copyTest('customize copy show tooltips', 'bamboo', 'bamboo', undefined, true);
copyTest('customize copy hide tooltips', 'bamboo', 'bamboo', undefined, false);
copyTest('customize copy tooltips text', 'bamboo', 'bamboo', undefined, [
'click here',
'you clicked!!',
]);
copyTest('tooltips contains two empty text', 'bamboo', 'bamboo', undefined, ['', '']);
copyTest('tooltips contains one empty text', 'bamboo', 'bamboo', undefined, [
'',
'you clicked!!',
]);
copyTest('tooltips contains one empty text 2', 'bamboo', 'bamboo', undefined, [
'click here',
'',
]);
});
describe('editable', () => {
function testStep({ name = '', icon, tooltip } = {}, submitFunc, expectFunc) {
it(name, () => {
jest.useFakeTimers();
const onStart = jest.fn();
const onChange = jest.fn();
const className = 'test';
const style = {};
const wrapper = mount(
Bamboo
,
);
if (icon) {
expect(wrapper.find('.anticon-highlight').length).toBeTruthy();
} else {
expect(wrapper.find('.anticon-edit').length).toBeTruthy();
}
wrapper.find('.ant-typography-edit').first().simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
if (tooltip === undefined || tooltip === true) {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Edit');
} else if (tooltip === false) {
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
} else {
expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltip);
}
wrapper.find('.ant-typography-edit').first().simulate('click');
expect(onStart).toHaveBeenCalled();
// Should have className
const props = wrapper.find('div').props();
expect(props.style).toEqual(style);
expect(props.className.includes(className)).toBeTruthy();
wrapper.find(TextArea).simulate('change', {
target: { value: 'Bamboo' },
});
if (submitFunc) {
submitFunc(wrapper);
} else {
return;
}
if (expectFunc) {
expectFunc(onChange);
} else {
expect(onChange).toHaveBeenCalledWith('Bamboo');
expect(onChange).toHaveBeenCalledTimes(1);
}
});
}
testStep({ name: 'by key up' }, wrapper => {
// Not trigger when inComposition
wrapper.find(TextArea).simulate('compositionStart');
wrapper.find(TextArea).simulate('keyDown', { keyCode: KeyCode.ENTER });
wrapper.find(TextArea).simulate('compositionEnd');
wrapper.find(TextArea).simulate('keyUp', { keyCode: KeyCode.ENTER });
// Now trigger
wrapper.find(TextArea).simulate('keyDown', { keyCode: KeyCode.ENTER });
wrapper.find(TextArea).simulate('keyUp', { keyCode: KeyCode.ENTER });
});
testStep(
{ name: 'by esc key' },
wrapper => {
wrapper.find(TextArea).simulate('keyDown', { keyCode: KeyCode.ESC });
wrapper.find(TextArea).simulate('keyUp', { keyCode: KeyCode.ESC });
},
onChange => {
// eslint-disable-next-line jest/no-standalone-expect
expect(onChange).not.toHaveBeenCalled();
},
);
testStep({ name: 'by blur' }, wrapper => {
wrapper.find(TextArea).simulate('blur');
});
testStep({ name: 'customize edit icon', icon: });
testStep({ name: 'customize edit show tooltip', tooltip: true });
testStep({ name: 'customize edit hide tooltip', tooltip: false });
testStep({ name: 'customize edit tooltip text', tooltip: 'click to edit text' });
});
it('should focus at the end of textarea', () => {
const wrapper = mount(content);
wrapper.find('.ant-typography-edit').first().simulate('click');
const textareaNode = wrapper.find('textarea').getDOMNode();
expect(textareaNode.selectionStart).toBe(7);
expect(textareaNode.selectionEnd).toBe(7);
});
});
it('warning if use setContentRef', () => {
function refFunc() {}
mount();
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
);
});
});