test: add test case

components/typography/__tests__/ellipsis.test.tsx

@@ -1,7 +1,14 @@
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { fireEvent, render, triggerResize, waitFakeTimer, waitFor } from '../../../tests/utils';
+import {
+  fireEvent,
+  render,
+  sleep,
+  triggerResize,
+  waitFakeTimer,
+  waitFor,
+} from '../../../tests/utils';
 import type { EllipsisConfig } from '../Base';
 import Base from '../Base';
 
@@ -45,7 +52,7 @@ describe('Typography.Ellipsis', () => {
 
     computeSpy = jest
       .spyOn(window, 'getComputedStyle')
-      .mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration));
+      .mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration);
   });
 
   afterEach(() => {
@@ -433,4 +440,84 @@ describe('Typography.Ellipsis', () => {
     });
     mockRectSpy.mockRestore();
   });
+
+  it('should not resize many times', async () => {
+    let resizeTimes = 0;
+    let currentWidth = 100;
+    // string conut is different with different width
+    const getLineStrCount = (width: number) => {
+      const res = width === 100 ? 20 : 17;
+      return res;
+    };
+
+    const ref = React.createRef<HTMLElement>();
+    const resize = async (width: number) => {
+      if (resizeTimes <= 10 && width !== currentWidth) {
+        resizeTimes++;
+        currentWidth = width;
+        if (ref.current) triggerResize(ref.current);
+        await waitFakeTimer(4, 1);
+
+        // wait for a while and trigger it resize again
+        return ref.current?.offsetWidth;
+      }
+    };
+    mockRectSpy = spyElementPrototypes(HTMLElement, {
+      offsetHeight: {
+        get() {
+          let html = this.innerHTML;
+          html = html.replace(/<[^>]*>/g, '');
+          const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+
+          return lines * 16;
+        },
+      },
+      offsetWidth: {
+        get() {
+          let html = this.innerHTML;
+          html = html.replace(/<[^>]*>/g, '');
+          const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+
+          // if height is over, set width smaller, like scrollbar
+          if (lines > 2) {
+            // makes value return first
+            setTimeout(() => {
+              resize(88.6);
+            }, 0);
+            return 88.6;
+          }
+          setTimeout(() => {
+            resize(100);
+          }, 0);
+          return 100;
+        },
+      },
+      getBoundingClientRect() {
+        let html = this.innerHTML;
+        html = html.replace(/<[^>]*>/g, '');
+        const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+        return { height: lines * 16 };
+      },
+    });
+
+    render(
+      <Base
+        ellipsis={{
+          rows: 2,
+        }}
+        title={`${fullStr}`}
+        ref={ref}
+        editable
+        component="p"
+      >
+        {fullStr}
+      </Base>,
+    );
+
+    triggerResize(ref.current!);
+    await waitFakeTimer();
+
+    expect(resizeTimes).not.toBeGreaterThan(2);
+    mockRectSpy.mockRestore();
+  });
 });