feat: unit test fix and change getStyle methods

DTStack · Jan 19, 2021 · 4b864ff · 4b864ff
1 parent 938f3fa
commit 4b864ff
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/components/editCell/__tests__/editCell.test.tsx b/src/components/editCell/__tests__/editCell.test.tsx
@@ -3,6 +3,13 @@ import EditCell from '../index';
 import { render, fireEvent, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
+(global as any).document.createRange = () => ({
+    selectNodeContents: jest.fn(),
+    getBoundingClientRect: jest.fn(() => ({
+        width: 500
+    }))
+});
+
 const defaultProps = {
     value: 'test editCell',
     keyField: 'name',

diff --git a/src/components/ellipsisText/__tests__/ellipsisText.test.tsx b/src/components/ellipsisText/__tests__/ellipsisText.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import EllipsisText from '../index';
 
 (global as any).document.createRange = () => ({
@@ -21,6 +21,13 @@ describe('test ellipsis text if not set max width', () => {
             .mockImplementation(() => 100);
         jest.spyOn(document.documentElement, 'offsetWidth', 'get')
             .mockImplementation(() => 600);
+        Object.defineProperty(window, 'getComputedStyle', {
+            value: jest.fn(() => ({
+                paddingLeft: '0px',
+                paddingRight: '0px'
+            })
+            )
+        });
 
         wrapper = render(
             <div>
@@ -42,19 +49,18 @@ describe('test ellipsis text if not set max width', () => {
         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(() => {
+        Object.defineProperty(window, 'getComputedStyle', {
+            value: () => ({
+                getPropertyValue: (prop) => {
+                    return '';
+                }
+            })
+        });
+
         wrapper = render(
             <div>
                 <EllipsisText {...defaultProps} maxWidth={100}/>

diff --git a/src/components/ellipsisText/index.tsx b/src/components/ellipsisText/index.tsx
@@ -44,7 +44,7 @@ export default class EllipsisText extends PureComponent<Props, State> {
     const stylePadding =
       window?.getComputedStyle(dom)[attr] || dom.currentStyle[attr];
 
-    return stylePadding.slice(0, -2);
+    return parseInt(stylePadding.replace('px', ''));
   };
 
   // 最近块级父元素-除省略文本元素外其余元素的宽
@@ -72,7 +72,6 @@ export default class EllipsisText extends PureComponent<Props, State> {
     const rangeWidth = this.getRangeWidth(ellipsisNode);
     const ellipsisWidth = this.getMaxWidth(ellipsisNode.parentElement);
     ellipsisNode.style.display = "inline-block";
-
     this.setState({
       actMaxWidth: ellipsisWidth,
       isEllipsis: rangeWidth > (maxWidth || ellipsisWidth)