Browse Source

fix: Invalid regular expression for particular ellipsis content (#27383)

* fix:  Invalid regular expression for particular ellipsis content

* fix: ellipsisContent is possibly nullable

* test: add test cases for ellipsis string with parentheses
pull/27388/head
Troy Li 4 years ago
committed by GitHub
parent
commit
07d4022e18
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      components/typography/Base.tsx
  2. 35
      components/typography/__tests__/index.test.js

2
components/typography/Base.tsx

@ -472,7 +472,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
}
// show rest content as title on symbol
restContent = restContent?.replace(new RegExp(`^${ellipsisContent}`), '');
restContent = restContent?.slice(String(ellipsisContent || '').length);
// We move full content to outer element to avoid repeat read the content by accessibility
textNode = (

35
components/typography/__tests__/index.test.js

@ -104,6 +104,41 @@ describe('Typography', () => {
wrapper.unmount();
});
it('string with parentheses', async () => {
const parenthesesStr = `Ant Design, a design language (for background applications, is refined by
Ant UED Team. Ant Design, a design language for background applications,
is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language
for background applications, is refined by Ant UED Team. Ant Design, a
design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by
Ant UED Team.`;
const onEllipsis = jest.fn();
const wrapper = mount(
<Base ellipsis={{ onEllipsis }} component="p" editable>
{parenthesesStr}
</Base>,
);
await sleep(20);
wrapper.update();
expect(wrapper.text()).toEqual('Ant Design, a des...');
const ellipsisSpan = wrapper.find('span[title]');
expect(ellipsisSpan.text()).toEqual('...');
expect(ellipsisSpan.props().title)
.toEqual(`ign language (for background applications, is refined by
Ant UED Team. Ant Design, a design language for background applications,
is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language
for background applications, is refined by Ant UED Team. Ant Design, a
design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by
Ant UED Team.`);
onEllipsis.mockReset();
wrapper.unmount();
});
it('should middle ellipsis', async () => {
const suffix = '--suffix';
const wrapper = mount(

Loading…
Cancel
Save