Skip to content

Commit 1551c1e

Browse files
author
mumiao
committed
Merge branch 'feat_v4' of https://github.com/DTStack/dt-react-component into feat_v4
2 parents 29c4ae6 + 8545358 commit 1551c1e

File tree

10 files changed

+474
-175
lines changed

10 files changed

+474
-175
lines changed

‎src/ellipsisText/__tests__/ellipsisText.test.tsx‎

Lines changed: 94 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
2-
import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
2+
import { render, cleanup, fireEvent, RenderResult } from '@testing-library/react';
33
import '@testing-library/jest-dom/extend-expect';
44
import EllipsisText from '../index';
55

6-
(window as any).document.createRange = () => ({
6+
(global as any).document.createRange = () => ({
77
selectNodeContents: jest.fn(),
88
getBoundingClientRect: jest.fn(() => ({
99
width: 500,
@@ -14,7 +14,7 @@ const defaultProps = {
1414
value: '我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本',
1515
};
1616

17-
let wrapper: any, element: any;
17+
let wrapper: RenderResult, element;
1818
describe('test ellipsis text if not set max width', () => {
1919
beforeEach(() => {
2020
jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockImplementation(() => 100);
@@ -23,14 +23,13 @@ describe('test ellipsis text if not set max width', () => {
2323
value: jest.fn(() => ({
2424
paddingLeft: '0px',
2525
paddingRight: '0px',
26+
cursor: 'pointer',
2627
})),
2728
});
28-
29-
wrapper = render(
30-
<div>
31-
<EllipsisText {...defaultProps} />
32-
</div>
33-
);
29+
document.documentElement.getBoundingClientRect = jest.fn().mockReturnValue({
30+
width: 600,
31+
});
32+
wrapper = render(<EllipsisText {...defaultProps} />);
3433
});
3534

3635
afterEach(() => {
@@ -46,6 +45,15 @@ describe('test ellipsis text if not set max width', () => {
4645
expect(element).toBeInTheDocument();
4746
expect(element.style.maxWidth).toBe('100px');
4847
});
48+
49+
test('render correct hover cursor in ellipsis', () => {
50+
const { getByText } = wrapper;
51+
const { value } = defaultProps;
52+
element = getByText(value);
53+
54+
expect(element).toBeInTheDocument();
55+
expect(element.style.cursor).toBe('pointer');
56+
});
4957
});
5058

5159
describe('auto calculate ellipsis text if the parent element does not exist', () => {
@@ -54,6 +62,7 @@ describe('auto calculate ellipsis text if the parent element does not exist', ()
5462
value: jest.fn(() => ({
5563
paddingLeft: '0px',
5664
paddingRight: '0px',
65+
cursor: 'pointer',
5766
})),
5867
});
5968

@@ -77,79 +86,110 @@ describe('auto calculate ellipsis text if the parent element does not exist', ()
7786
describe('test ellipsis text if set max width', () => {
7887
beforeEach(() => {
7988
Object.defineProperty(window, 'getComputedStyle', {
80-
value: () => ({
81-
getPropertyValue: (_prop: any) => {
82-
return '';
83-
},
84-
}),
89+
value: jest.fn(() => ({
90+
paddingLeft: '0px',
91+
paddingRight: '0px',
92+
cursor: 'pointer',
93+
})),
94+
});
95+
jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockImplementation(() => 100);
96+
jest.spyOn(document.documentElement, 'offsetWidth', 'get').mockImplementation(() => 600);
97+
document.documentElement.getBoundingClientRect = jest.fn().mockReturnValueOnce({
98+
width: 900,
8599
});
86-
87-
wrapper = render(
88-
<div>
89-
<EllipsisText {...defaultProps} maxWidth={100} />
90-
</div>
91-
);
92100
});
93101

94102
afterEach(() => {
95103
cleanup();
96104
jest.restoreAllMocks();
97105
});
98106

99-
test('render correct value in ellipsis', () => {
100-
const { getByText } = wrapper;
107+
test('The maximum is a number, render correct value in ellipsis', () => {
108+
const { container, getByText, getAllByText } = render(
109+
<EllipsisText {...defaultProps} maxWidth={100} />
110+
);
111+
101112
const { value } = defaultProps;
102113
element = getByText(value);
103114

104115
expect(element).toBeInTheDocument();
105116
expect(element.style.maxWidth).toBe('100px');
117+
expect(element.style.cursor).toBe('pointer');
118+
119+
fireEvent.mouseEnter(element);
120+
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
121+
expect(getAllByText(value).length).toBe(2);
122+
123+
fireEvent.mouseLeave(element);
124+
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
106125
});
107126

108-
test('render correct prompt info if mouse hover the text ', async () => {
109-
const { getByText, getAllByText, container } = wrapper;
127+
test('The maximum is a string，render correct value in ellipsis', () => {
128+
const { container, getByText, getAllByText } = render(
129+
<EllipsisText {...defaultProps} maxWidth="1000px" />
130+
);
110131
const { value } = defaultProps;
111132
element = getByText(value);
112133

113-
jest.useFakeTimers();
114-
fireEvent.mouseOver(element);
115-
jest.runAllTimers();
134+
expect(element).toBeInTheDocument();
135+
expect(element.style.maxWidth).toBe('900px');
136+
expect(element.style.cursor).toBe('pointer');
116137

117-
await waitFor(() => {
118-
expect(container.querySelector('.ant-tooltip-open')).toBeInTheDocument();
119-
expect(getAllByText(value).length).toBe(2);
120-
});
138+
fireEvent.mouseEnter(element);
139+
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
140+
expect(getAllByText(value).length).toBe(1);
141+
142+
fireEvent.mouseLeave(element);
121143
});
122-
});
144+
test('The maximum is a percent，render correct value in ellipsis', () => {
145+
const { container, getByText, getAllByText } = render(
146+
<EllipsisText {...defaultProps} maxWidth="90%" />
147+
);
148+
const { value } = defaultProps;
149+
element = getByText(value);
123150

124-
describe('test ellipsis text if in IE8', () => {
125-
beforeEach(() => {
126-
jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockImplementation(() => 100);
127-
jest.spyOn(document.documentElement, 'offsetWidth', 'get').mockImplementation(() => 100);
128-
Object.defineProperty(document.documentElement, 'currentStyle', {
129-
value: {
130-
paddingLeft: '0px',
131-
paddingRight: '0px',
132-
},
133-
});
151+
expect(element).toBeInTheDocument();
152+
expect(element.style.maxWidth).toBe('810px');
153+
expect(element.style.cursor).toBe('pointer');
134154

135-
wrapper = render(
136-
<div>
137-
<EllipsisText {...defaultProps} />
138-
</div>
139-
);
140-
});
155+
fireEvent.mouseEnter(element);
156+
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
157+
expect(getAllByText(value).length).toBe(1);
141158

142-
afterEach(() => {
143-
cleanup();
144-
jest.restoreAllMocks();
159+
fireEvent.mouseLeave(element);
145160
});
161+
test('The maximum is a relative，render correct value in ellipsis', () => {
162+
const { container, getAllByText, getByText } = render(
163+
<EllipsisText {...defaultProps} maxWidth="calc(100% - 200px)" />
164+
);
165+
const { value } = defaultProps;
166+
element = getByText(value);
146167

147-
test('render correct value in ellipsis', () => {
148-
const { getByText } = wrapper;
168+
expect(element).toBeInTheDocument();
169+
expect(element.style.maxWidth).toBe('700px');
170+
expect(element.style.cursor).toBe('pointer');
171+
172+
fireEvent.mouseEnter(element);
173+
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
174+
expect(getAllByText(value).length).toBe(1);
175+
176+
fireEvent.mouseLeave(element);
177+
});
178+
test('The maximum is a not comply with the rules，render correct value in ellipsis', () => {
179+
const { container, getByText, getAllByText } = render(
180+
<EllipsisText {...defaultProps} maxWidth="20.4" />
181+
);
149182
const { value } = defaultProps;
150183
element = getByText(value);
151184

152185
expect(element).toBeInTheDocument();
153-
expect(element.style.maxWidth).toBe('0');
186+
expect(element.style.maxWidth).toBe('900px');
187+
expect(element.style.cursor).toBe('pointer');
188+
189+
fireEvent.mouseEnter(element);
190+
expect(container.querySelector('.ant-tooltip-open')).toBeNull();
191+
expect(getAllByText(value).length).toBe(1);
192+
193+
fireEvent.mouseLeave(element);
154194
});
155195
});

‎src/ellipsisText/demos/basic.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export default () => {
55
return (
66
<EllipsisText
77
value={'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'}
8-
maxWidth={200}
98
/>
109
);
1110
};

‎src/ellipsisText/demos/flex.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { Divider } from 'antd';
3+
import { EllipsisText } from 'dt-react-component';
4+
5+
export default () => {
6+
return (
7+
<>
8+
<div
9+
style={{
10+
display: 'flex',
11+
}}
12+
>
13+
<EllipsisText
14+
value={
15+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
16+
}
17+
/>
18+
我是来捣乱的
19+
</div>
20+
<Divider />
21+
<div
22+
style={{
23+
display: 'flex',
24+
}}
25+
>
26+
我是来捣乱的
27+
<EllipsisText
28+
value={
29+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
30+
}
31+
/>
32+
</div>
33+
</>
34+
);
35+
};

‎src/ellipsisText/demos/inlineElement.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { EllipsisText } from 'dt-react-component';
3+
4+
export default () => {
5+
return (
6+
<div
7+
style={{
8+
width: 200,
9+
}}
10+
>
11+
<span>
12+
<EllipsisText
13+
value={
14+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
15+
}
16+
/>
17+
</span>
18+
</div>
19+
);
20+
};

‎src/ellipsisText/demos/maxWidth.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
2+
import { Radio, RadioChangeEvent, Divider } from 'antd';
23
import { EllipsisText } from 'dt-react-component';
34

45
export default () => {
6+
const [width, setWidth] = useState(200);
7+
8+
const onChange = (e: RadioChangeEvent) => {
9+
setWidth(e.target.value);
10+
};
11+
512
return (
6-
<EllipsisText
7-
value={'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'}
8-
/>
13+
<>
14+
<Radio.Group onChange={onChange} value={width}>
15+
<Radio value={200}>200px</Radio>
16+
<Radio value={300}>300px</Radio>
17+
<Radio value={'20%'}>20%</Radio>
18+
<Radio value={'50%'}>50%</Radio>
19+
<Radio value={'100%'}>100%</Radio>
20+
<Radio value={'calc(100% - 100px)'}>calc(100% - 100px)%</Radio>
21+
</Radio.Group>
22+
<Divider />
23+
<EllipsisText
24+
value={
25+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
26+
}
27+
maxWidth={width}
28+
/>
29+
</>
930
);
1031
};

‎src/ellipsisText/demos/multiple.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { EllipsisText } from 'dt-react-component';
3+
4+
export default () => {
5+
return (
6+
<div
7+
style={{
8+
width: '100%',
9+
}}
10+
>
11+
<EllipsisText
12+
value={
13+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
14+
}
15+
maxWidth={200}
16+
/>
17+
<EllipsisText
18+
value={
19+
'我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本'
20+
}
21+
maxWidth={'calc(100% - 200px)'}
22+
/>
23+
</div>
24+
);
25+
};

0 commit comments

Comments
 (0)