fix: Typography tooltip bug (#37754)

* chore: basic

* fix: diff icon logic

* fix: Tooltip logic

* chore: fix lint

components/typography/Base/index.tsx

@@ -107,6 +107,9 @@ function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: b
 }
 
 function toList<T>(val: T | T[]): T[] {
+  if (val === false) {
+    return [false, false] as T[];
+  }
   return Array.isArray(val) ? val : [val];
 }
 

components/typography/__tests__/index.test.tsx

@@ -5,7 +5,7 @@ import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep, waitFor, act } from '../../../tests/utils';
+import { fireEvent, render, waitFor, act, waitFakeTimer } from '../../../tests/utils';
 import Base from '../Base';
 import Link from '../Link';
 import Paragraph from '../Paragraph';
@@ -88,6 +88,14 @@ describe('Typography', () => {
 
   describe('Base', () => {
     describe('copyable', () => {
+      /**
+       * @param name Test case name
+       * @param text Origin text context
+       * @param target Copy to clipboard text
+       * @param icon Icon
+       * @param tooltips Tooltip config
+       * @param format Copy context format
+       */
       function copyTest(
         name: string,
         text?: string,
@@ -99,60 +107,45 @@ describe('Typography', () => {
         it(name, async () => {
           jest.useFakeTimers();
           const onCopy = jest.fn();
-          const { container: wrapper, unmount } = render(
+          const { container, unmount } = render(
             <Base component="p" copyable={{ text, onCopy, icon, tooltips, format }}>
               test copy
             </Base>,
           );
 
           if (icon) {
-            expect(wrapper.querySelectorAll('.anticon-smile').length).toBeGreaterThan(0);
+            expect(container.querySelector('.anticon-smile')).toBeTruthy();
           } else {
-            expect(wrapper.querySelectorAll('.anticon-copy').length).toBeGreaterThan(0);
+            expect(container.querySelector('.anticon-copy')).toBeTruthy();
           }
 
-          fireEvent.mouseEnter(wrapper.querySelector('.ant-typography-copy')!);
+          // Mouse enter to show tooltip
+          fireEvent.mouseEnter(container.querySelector('.ant-typography-copy')!);
           act(() => {
-            jest.runAllTimers();
+            jest.advanceTimersByTime(10000);
           });
 
           if (tooltips === undefined || tooltips === true) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
-            });
           } else if (tooltips === false) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
-              expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
-            });
           } else if ((tooltips as any)[0] === '' && (tooltips as any)[1] === '') {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
-              expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
-            });
           } else if ((tooltips as any)[0] === '' && (tooltips as any)[1]) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
-              expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
-            });
           } else if ((tooltips as any)[1] === '' && (tooltips as any)[0]) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+              (tooltips as any)[0],
-                (tooltips as any)[0],
+            );
-              );
-            });
           } else {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+              (tooltips as any)[0],
-                (tooltips as any)[0],
+            );
-              );
-            });
           }
 
-          fireEvent.click(wrapper.querySelector('.ant-typography-copy')!);
+          // Click to copy
-          jest.useRealTimers();
+          fireEvent.click(container.querySelector('.ant-typography-copy')!);
-          fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
+          await waitFakeTimer(1);
-          // tooltips 为 ['', 'xxx'] 时，切换时需要延时 mouseEnterDelay 的时长
-          if (tooltips && (tooltips as any)[0] === '' && (tooltips as any)[1]) {
-            await sleep(150);
-          }
 
           expect((copy as any).lastStr).toEqual(target);
           expect((copy as any).lastOptions.format).toEqual(format);
@@ -165,43 +158,32 @@ describe('Typography', () => {
             copiedIcon = '.anticon-check';
           }
 
-          expect(wrapper.querySelectorAll(copiedIcon).length).toBeGreaterThan(0);
+          expect(container.querySelector(copiedIcon)).toBeTruthy();
-          fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
+
+          // Timeout will makes copy tooltip back to origin
+          fireEvent.mouseEnter(container.querySelector('.ant-typography-copy')!);
+          await waitFakeTimer(15, 10);
 
           if (tooltips === undefined || tooltips === true) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
-            });
           } else if (tooltips === false) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
-              expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
-            });
           } else if (tooltips[0] === '' && tooltips[1] === '') {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
-              expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
-            });
           } else if (tooltips[0] === '' && tooltips[1]) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
-            });
           } else if (tooltips[1] === '' && tooltips[0]) {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('');
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('');
-            });
           } else {
-            await waitFor(() => {
+            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
-              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
-            });
           }
 
-          jest.useFakeTimers();
-          fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
-          jest.runAllTimers();
-
           // Will set back when 3 seconds pass
-          await sleep(3000);
+          await waitFakeTimer();
-          expect(wrapper.querySelectorAll(copiedIcon).length).toBe(0);
+          expect(container.querySelector(copiedIcon)).toBeFalsy();
+
           unmount();
+          jest.clearAllTimers();
           jest.useRealTimers();
         });
       }
@@ -209,7 +191,7 @@ describe('Typography', () => {
       copyTest('basic copy', undefined, 'test copy');
       copyTest('customize copy', 'bamboo', 'bamboo');
       copyTest(
-        'costomize copy with plain text',
+        'customize copy with plain text',
         'bamboo',
         'bamboo',
         undefined,
@@ -217,14 +199,14 @@ describe('Typography', () => {
         'text/plain',
       );
       copyTest(
-        'costomize copy with html text',
+        'customize copy with html text',
         'bamboo',
         'bamboo',
         undefined,
         undefined,
         'text/html',
       );
-      copyTest('customize copy icon', 'bamboo', 'bamboo', <SmileOutlined />);
+      copyTest('customize copy icon with one', 'bamboo', 'bamboo', <SmileOutlined />);
       copyTest('customize copy icon by pass array', 'bamboo', 'bamboo', [
         <SmileOutlined key="copy-icon" />,
       ]);

tests/utils.tsx

@@ -63,8 +63,8 @@ export const triggerResize = (target: Element) => {
   target.getBoundingClientRect = originGetBoundingClientRect;
 };
 
-export async function waitFakeTimer(advanceTime = 1000) {
+export async function waitFakeTimer(advanceTime = 1000, times = 20) {
-  for (let i = 0; i < 20; i += 1) {
+  for (let i = 0; i < times; i += 1) {
     // eslint-disable-next-line no-await-in-loop
     await act(async () => {
       await Promise.resolve();