test: add test case

components/typography/Base/Ellipsis.tsx

@@ -101,7 +101,7 @@ const Ellipsis: React.FC<EllipsisProps> = ({
   const mergedChildren = React.useMemo(() => {
     if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) {
       // if has lastLen, use it as temporary width to avoid lots of text to squeeze space.
-      if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS)
+      if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure)
         return children(sliceNodes(nodeList, lastLen), lastLen < totalLen);
 
       return children(nodeList, false);

components/typography/__tests__/ellipsis.test.tsx

@@ -45,7 +45,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 +433,78 @@ describe('Typography.Ellipsis', () => {
     });
     mockRectSpy.mockRestore();
   });
+
+  it('should not resize many times', async () => {
+    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 = (width: number) => {
+      currentWidth = width;
+      if (ref.current) triggerResize(ref.current);
+    };
+
+    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: () => currentWidth,
+      },
+      getBoundingClientRect() {
+        let html = this.innerHTML;
+        html = html.replace(/<[^>]*>/g, '');
+        const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+        return { height: lines * 16 };
+      },
+    });
+
+    const { container } = render(
+      <Base
+        ellipsis={{
+          rows: 2,
+        }}
+        ref={ref}
+        editable
+        component="p"
+      >
+        {fullStr}
+      </Base>,
+    );
+
+    // hijackings Math.ceil
+    const originalCeil = Math.ceil;
+    let hasDefaultStr = false;
+
+    // Math.ceil will be used for ellipsis's calculations;
+    Math.ceil = (value) => {
+      const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, '');
+      if (text && !text.includes('...')) {
+        hasDefaultStr = true;
+      }
+      return originalCeil.call(Math, value);
+    };
+
+    resize(50);
+    await waitFakeTimer(20, 1);
+    // ignore last result
+    hasDefaultStr = false;
+    resize(100);
+    await waitFakeTimer();
+
+    expect(hasDefaultStr).not.toBeTruthy();
+    // reset
+    mockRectSpy.mockRestore();
+    Math.ceil = originalCeil;
+  });
 });