test: add ellipsisText unit test

Author: kongshan

src/components/ellipsisText/__tests__/ellipsisText.test.tsx

@@ -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')
     })
 })

src/components/ellipsisText/index.tsx

@@ -75,7 +75,6 @@ class EllipsisText extends PureComponent<Props, State> {
   };
 
   onResize = () => {
-    if (!this.ellipsisRef) return;
     const { maxWidth } = this.props;
     const ellipsisNode = this.ellipsisRef;
     const rangeWidth = this.getRangeWidth(ellipsisNode);