ant-design/components/typography/__tests__/index.test.tsx

import React from 'react';
import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard';
import KeyCode from 'rc-util/lib/KeyCode';
import { resetWarned } from 'rc-util/lib/warning';

import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render, waitFakeTimer, waitFor } from '../../../tests/utils';
import Base from '../Base';
import Link from '../Link';
import Paragraph from '../Paragraph';
import Text from '../Text';
import type { TitleProps } from '../Title';
import Title from '../Title';
import Typography from '../Typography';

jest.mock('copy-to-clipboard');

describe('Typography', () => {
  mountTest(Paragraph);
  mountTest(Base);
  mountTest(Title);
  mountTest(Link);

  rtlTest(Paragraph);
  rtlTest(Base);
  rtlTest(Title);
  rtlTest(Link);

  const LINE_STR_COUNT = 20;
  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

  // Mock offsetHeight
  const originOffsetHeight = Object.getOwnPropertyDescriptor(
    HTMLElement.prototype,
    'offsetHeight',
  )?.get;

  const mockGetBoundingClientRect = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');

  beforeAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
      get() {
        let html = this.innerHTML;
        html = html.replace(/<[^>]*>/g, '');
        const lines = Math.ceil(html.length / LINE_STR_COUNT);
        return lines * 16;
      },
    });
    mockGetBoundingClientRect.mockImplementation(function fn() {
      // @ts-ignore
      let html = this.innerHTML;
      html = html.replace(/<[^>]*>/g, '');
      const lines = Math.ceil(html.length / LINE_STR_COUNT);
      return { height: lines * 16 } as DOMRect;
    });
  });

  // Mock getComputedStyle
  const originGetComputedStyle = window.getComputedStyle;
  window.getComputedStyle = (ele) => {
    const style = originGetComputedStyle(ele);
    style.lineHeight = '16px';
    return style;
  };

  afterEach(() => {
    errorSpy.mockReset();
  });

  afterAll(() => {
    errorSpy.mockRestore();
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
      get: originOffsetHeight,
    });
    mockGetBoundingClientRect.mockRestore();
    window.getComputedStyle = originGetComputedStyle;
  });

  describe('Title', () => {
    it('warning if `level` not correct', () => {
      render(<Title level={false as unknown as TitleProps['level']} />);

      expect(errorSpy).toHaveBeenCalledWith(
        'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
      );
    });
  });

  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,
        target?: string,
        icon?: React.ReactNode,
        tooltips?: boolean | string[],
        format?: 'text/plain' | 'text/html',
      ): void {
        it(name, async () => {
          jest.useFakeTimers();
          const onCopy = jest.fn();
          const { container, unmount } = render(
            <Base component="p" copyable={{ text, onCopy, icon, tooltips, format }}>
              test copy
            </Base>,
          );

          if (icon) {
            expect(container.querySelector('.anticon-smile')).toBeTruthy();
          } else {
            expect(container.querySelector('.anticon-copy')).toBeTruthy();
          }

          // Mouse enter to show tooltip
          fireEvent.mouseEnter(container.querySelector('.ant-typography-copy')!);
          act(() => {
            jest.advanceTimersByTime(10000);
          });

          if (tooltips === undefined || tooltips === true) {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
          } else if (tooltips === false) {
            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
          } else if (tooltips[0] === '' && tooltips[1] === '') {
            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
          } else if (tooltips[0] === '' && tooltips[1]) {
            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
          } else if (tooltips[1] === '' && tooltips[0]) {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[0]);
          } else {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[0]);
          }

          // Click to copy
          fireEvent.click(container.querySelector('.ant-typography-copy')!);
          await waitFakeTimer(1);

          expect((copy as any).lastStr).toEqual(target);
          expect((copy as any).lastOptions.format).toEqual(format);
          expect(onCopy).toHaveBeenCalled();

          let copiedIcon = '.anticon-check';
          if (icon && (icon as string).length > 1) {
            copiedIcon = '.anticon-like';
          } else {
            copiedIcon = '.anticon-check';
          }

          expect(container.querySelector(copiedIcon)).toBeTruthy();

          // Timeout will makes copy tooltip back to origin
          fireEvent.mouseEnter(container.querySelector('.ant-typography-copy')!);
          await waitFakeTimer(15, 10);

          if (tooltips === undefined || tooltips === true) {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
          } else if (tooltips === false) {
            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
          } else if (tooltips[0] === '' && tooltips[1] === '') {
            expect(container.querySelector('.ant-tooltip-inner')).toBeFalsy();
          } else if (tooltips[0] === '' && tooltips[1]) {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
          } else if (tooltips[1] === '' && tooltips[0]) {
            // Tooltip will be hidden in this case, with content memoized
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[0]);
          } else {
            expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
          }

          // Will set back when 3 seconds pass
          await waitFakeTimer();
          expect(container.querySelector(copiedIcon)).toBeFalsy();

          unmount();
          jest.clearAllTimers();
          jest.useRealTimers();
        });
      }

      copyTest('basic copy', undefined, 'test copy');
      copyTest('customize copy', 'bamboo', 'bamboo');
      copyTest(
        'customize copy with plain text',
        'bamboo',
        'bamboo',
        undefined,
        undefined,
        'text/plain',
      );
      copyTest(
        'customize copy with html text',
        'bamboo',
        'bamboo',
        undefined,
        undefined,
        'text/html',
      );
      copyTest('customize copy icon with one', 'bamboo', 'bamboo', <SmileOutlined />);
      copyTest('customize copy icon by pass array', 'bamboo', 'bamboo', [
        <SmileOutlined key="copy-icon" />,
      ]);
      copyTest('customize copy icon and copied icon ', 'bamboo', 'bamboo', [
        <SmileOutlined key="copy-icon" />,
        <LikeOutlined key="copied-icon" />,
      ]);
      copyTest('customize copy show tooltips', 'bamboo', 'bamboo', undefined, true);
      copyTest('customize copy hide tooltips', 'bamboo', 'bamboo', undefined, false);
      copyTest('customize copy tooltips text', 'bamboo', 'bamboo', undefined, [
        'click here',
        'you clicked!!',
      ]);
      copyTest('tooltips contains two empty text', 'bamboo', 'bamboo', undefined, ['', '']);
      copyTest('tooltips contains one empty text', 'bamboo', 'bamboo', undefined, [
        '',
        'you clicked!!',
      ]);
      copyTest('tooltips contains one empty text 2', 'bamboo', 'bamboo', undefined, [
        'click here',
        '',
      ]);
    });

    describe('editable', () => {
      interface EditableConfig {
        name?: string;
        icon?: React.ReactNode;
        tooltip?: string | boolean;
        triggerType?: ('icon' | 'text')[];
        enterIcon?: React.ReactNode;
      }
      function testStep(
        { name = '', icon, tooltip, triggerType, enterIcon }: EditableConfig,
        submitFunc?: (container: ReturnType<typeof render>['container']) => void,
        expectFunc?: (callback: jest.Mock) => void,
      ) {
        it(name, async () => {
          jest.useFakeTimers();
          const onStart = jest.fn();
          const onChange = jest.fn();

          const className = 'test';
          const style: React.CSSProperties = { padding: 'unset' };

          const { container: wrapper } = render(
            <Paragraph
              editable={{ onChange, onStart, icon, tooltip, triggerType, enterIcon }}
              className={className}
              style={style}
            >
              Bamboo
            </Paragraph>,
          );

          if (triggerType === undefined || triggerType.includes('icon')) {
            if (icon) {
              expect(wrapper.querySelectorAll('.anticon-highlight').length).toBeGreaterThan(0);
            } else {
              expect(wrapper.querySelectorAll('.anticon-edit').length).toBeGreaterThan(0);
            }

            if (triggerType === undefined || !triggerType.includes('text')) {
              fireEvent.click(wrapper.firstChild!);
              expect(onStart).not.toHaveBeenCalled();
            }
            fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-edit')[0]);
            act(() => {
              jest.runAllTimers();
            });

            if (tooltip === undefined || tooltip === true) {
              await waitFor(() => {
                expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Edit');
              });
            } else if (tooltip === false) {
              await waitFor(() => {
                expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
              });
            } else {
              await waitFor(() => {
                expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltip);
              });
            }

            fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);

            expect(onStart).toHaveBeenCalled();
            if (triggerType?.includes('text')) {
              fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
              fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
              expect(onChange).not.toHaveBeenCalled();
            }
          }

          if (triggerType?.includes('text')) {
            if (!triggerType?.includes('icon')) {
              expect(wrapper.querySelectorAll('.anticon-highlight').length).toBe(0);
              expect(wrapper.querySelectorAll('.anticon-edit').length).toBe(0);
            }
            fireEvent.click(wrapper.firstChild!);
            expect(onStart).toHaveBeenCalled();
          }

          // Should have className
          const props = wrapper.querySelectorAll('div')[0];
          expect(props.getAttribute('style')).toContain('padding: unset');
          expect(props.className.includes(className)).toBeTruthy();

          fireEvent.change(wrapper.querySelector('textarea')!, { target: { value: 'Bamboo' } });

          if (enterIcon === undefined) {
            expect(
              wrapper.querySelectorAll('span.ant-typography-edit-content-confirm')[0].className,
            ).toContain('anticon-enter');
          } else if (enterIcon === null) {
            expect(
              wrapper.querySelectorAll('span.ant-typography-edit-content-confirm').length,
            ).toBe(0);
          } else {
            expect(
              wrapper.querySelectorAll('span.ant-typography-edit-content-confirm')[0].className,
            ).not.toContain('anticon-enter');
          }

          if (submitFunc) {
            submitFunc(wrapper);
          } else {
            return;
          }

          if (expectFunc) {
            expectFunc(onChange);
          } else {
            expect(onChange).toHaveBeenCalledWith('Bamboo');
            expect(onChange).toHaveBeenCalledTimes(1);
          }
        });
      }

      testStep({ name: 'by key up' }, (wrapper) => {
        // Not trigger when inComposition
        fireEvent.compositionStart(wrapper.querySelector('textarea')!);
        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
        fireEvent.compositionEnd(wrapper.querySelector('textarea')!);
        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });

        // Now trigger
        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
      });

      testStep(
        { name: 'by esc key' },
        (wrapper) => {
          fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
          fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
        },
        (onChange) => {
          // eslint-disable-next-line jest/no-standalone-expect
          expect(onChange).not.toHaveBeenCalled();
        },
      );

      testStep({ name: 'by blur' }, (wrapper) => {
        fireEvent.blur(wrapper.querySelector('textarea')!);
      });

      testStep({ name: 'customize edit icon', icon: <HighlightOutlined /> });
      testStep({ name: 'customize edit show tooltip', tooltip: true });
      testStep({ name: 'customize edit hide tooltip', tooltip: false });
      testStep({ name: 'customize edit tooltip text', tooltip: 'click to edit text' });
      testStep({ name: 'enter icon - default', enterIcon: undefined });
      testStep({ name: 'enter icon - null', enterIcon: null });
      testStep({ name: 'enter icon - custom', enterIcon: <CheckOutlined /> });

      testStep({ name: 'trigger by icon', triggerType: ['icon'] });
      testStep({ name: 'trigger by text', triggerType: ['text'] });
      testStep({ name: 'trigger by both icon and text', triggerType: ['icon', 'text'] });

      it('should trigger onEnd when type Enter', () => {
        const onEnd = jest.fn();
        const { container: wrapper } = render(<Paragraph editable={{ onEnd }}>Bamboo</Paragraph>);
        fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
        expect(onEnd).toHaveBeenCalledTimes(1);
      });

      it('should trigger onStart when type Start', () => {
        const onStart = jest.fn();
        const { container: wrapper } = render(<Paragraph editable={{ onStart }}>Bamboo</Paragraph>);
        fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.A });
        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.A });
        expect(onStart).toHaveBeenCalledTimes(1);
      });

      it('should trigger onCancel when type ESC', () => {
        const onCancel = jest.fn();
        const { container: wrapper } = render(
          <Paragraph editable={{ onCancel }}>Bamboo</Paragraph>,
        );
        fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
        expect(onCancel).toHaveBeenCalledTimes(1);
      });

      it('should only trigger focus on the first time', () => {
        let triggerTimes = 0;
        const { container: wrapper } = render(<Paragraph editable>Bamboo</Paragraph>);
        const editIcon = wrapper.querySelectorAll('.ant-typography-edit')[0];

        editIcon.addEventListener('focus', () => {
          triggerTimes += 1;
        });

        fireEvent.focus(editIcon);
        expect(triggerTimes).toEqual(1);

        fireEvent.click(editIcon);
        expect(triggerTimes).toEqual(1);

        fireEvent.change(wrapper.querySelector('textarea')!, { target: { value: 'good' } });

        expect(triggerTimes).toEqual(1);
      });
    });

    it('should focus at the end of textarea', () => {
      const { container: wrapper } = render(<Paragraph editable>content</Paragraph>);
      fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
      const textareaNode = wrapper.querySelector('textarea');
      expect(textareaNode?.selectionStart).toBe(7);
      expect(textareaNode?.selectionEnd).toBe(7);
    });
  });

  it('warning if use setContentRef', () => {
    const setContentRef = { setContentRef() {} } as any;
    render(<Typography {...setContentRef} />);
    expect(errorSpy).toHaveBeenCalledWith(
      'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
    );
  });

  it('no italic warning', () => {
    resetWarned();
    render(<Text italic>Little</Text>);
    expect(errorSpy).not.toHaveBeenCalled();
  });

  it('should get HTMLHeadingElement ref from Title', () => {
    const ref = React.createRef<HTMLHeadingElement>();
    render(<Title level={1} ref={ref} />);
    expect(ref.current instanceof HTMLHeadingElement).toBe(true);
  });

  it('should get HTMLDivElement ref from Paragraph', () => {
    const ref = React.createRef<HTMLDivElement>();
    render(<Paragraph ref={ref} />);
    expect(ref.current instanceof HTMLDivElement).toBe(true);
  });

  it('should get HTMLSpanElement ref from Text', () => {
    const ref = React.createRef<HTMLSpanElement>();
    render(<Text ref={ref} />);
    expect(ref.current instanceof HTMLSpanElement).toBe(true);
  });
});