-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
kongshan
committed
Jan 15, 2021
1 parent
906459e
commit ee4beff
Showing
2 changed files
with
103 additions
and
14 deletions.
There are no files selected for viewing
116 changes: 103 additions & 13 deletions
116
src/components/ellipsisText/__tests__/ellipsisText.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,126 @@ | ||
import * as React from 'react'; | ||
import '@testing-library/jest-dom/extend-expect'; | ||
import { render, cleanup } from '@testing-library/react'; | ||
import { render, cleanup, fireEvent } from '@testing-library/react'; | ||
import EllipsisText from '../index'; | ||
|
||
(global as any).document.createRange = () => ({ | ||
selectNodeContents: jest.fn(), | ||
getBoundingClientRect: jest.fn(() => ({ | ||
width: 500 | ||
})) | ||
}); | ||
|
||
const defaultProps = { | ||
value: 'ellipsis-Test' | ||
value: '我是很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本' | ||
} | ||
|
||
let wrapper | ||
describe('test ellipsis text if not full display', () => { | ||
(global as any).document.createRange = () => ({ | ||
selectNodeContents: jest.fn(), | ||
getBoundingClientRect: jest.fn(() => ({ | ||
width: 1000 | ||
})) | ||
}); | ||
|
||
let wrapper, element | ||
describe('test ellipsis text if not set max width', () => { | ||
beforeEach(() => { | ||
jest.spyOn(document.documentElement, 'scrollWidth', 'get') | ||
.mockImplementation(() => 100); | ||
jest.spyOn(document.documentElement, 'offsetWidth', 'get') | ||
.mockImplementation(() => 600); | ||
|
||
wrapper = render( | ||
<div style={{ width: 500 }}> | ||
<div> | ||
<EllipsisText {...defaultProps} /> | ||
</div> | ||
); | ||
}) | ||
|
||
afterEach(() => { | ||
cleanup() | ||
jest.restoreAllMocks() | ||
}) | ||
|
||
test('render correct value in ellipsis', () => { | ||
const { getByText } = wrapper | ||
const { value } = defaultProps | ||
element = getByText(value) | ||
|
||
expect(element).toBeInTheDocument() | ||
expect(element.style.maxWidth).toBe('100px') | ||
}) | ||
|
||
test('render correct value in ellipsis', () => { | ||
const { getByText } = wrapper | ||
const { value } = defaultProps | ||
element = getByText(value) | ||
|
||
expect(element).toBeInTheDocument() | ||
expect(element.style.maxWidth).toBe('100px') | ||
}) | ||
}) | ||
|
||
describe('test ellipsis text if set max width', () => { | ||
beforeEach(() => { | ||
wrapper = render( | ||
<div> | ||
<EllipsisText {...defaultProps} maxWidth={100}/> | ||
</div> | ||
); | ||
}) | ||
|
||
afterEach(() => { | ||
cleanup() | ||
jest.restoreAllMocks() | ||
}) | ||
|
||
test('render correct value in ellipsis', () => { | ||
const { getByText } = wrapper | ||
const { value } = defaultProps | ||
element = getByText(value) | ||
|
||
expect(element).toBeInTheDocument() | ||
expect(element.style.maxWidth).toBe('100px') | ||
}) | ||
|
||
test('render correct prompt info if mouse hover the text ', () => { | ||
const { getByText, getAllByText, baseElement } = wrapper | ||
const { value } = defaultProps | ||
element = getByText(value) | ||
|
||
jest.useFakeTimers() | ||
fireEvent.mouseOver(element) | ||
jest.runAllTimers() | ||
|
||
expect(baseElement.querySelector('.ant-tooltip-open')).toBeInTheDocument() | ||
expect(getAllByText(value).length).toBe(2) | ||
}) | ||
}) | ||
|
||
describe('test ellipsis text if in IE8', () => { | ||
beforeEach(() => { | ||
jest.spyOn(document.documentElement, 'scrollWidth', 'get') | ||
.mockImplementation(() => 100); | ||
jest.spyOn(document.documentElement, 'offsetWidth', 'get') | ||
.mockImplementation(() => 100); | ||
Object.defineProperty(document.documentElement, 'currentStyle', { | ||
value: { | ||
paddingLeft: '0px', | ||
paddingRight: '0px' | ||
} | ||
}); | ||
|
||
wrapper = render( | ||
<div> | ||
<EllipsisText {...defaultProps}/> | ||
</div> | ||
); | ||
}) | ||
|
||
afterEach(() => { | ||
cleanup() | ||
jest.restoreAllMocks() | ||
}) | ||
|
||
test('render correct value in ellipsis', () => { | ||
const { getByText } = wrapper | ||
const { value } = defaultProps | ||
element = getByText(value) | ||
|
||
expect(getByText('ellipsis-Test')).toBeInTheDocument() | ||
expect(element).toBeInTheDocument() | ||
expect(element.style.maxWidth).toBe('0') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters