test: refactor alert tests (#36954)

* add userEvent dependence * Alert(test): refactor closable test with userEvent and more precise expect api * Alert(test): remove duplicate test of closable * Alert(test): remove duplicate test of closable * Alert(test): refactor attributes setting tests * Alert(test): refactor ErrorBoundary tests * Alert(test): refactor ErrorBoundary tests * Alert(test): refactor ErrorBoundary tests * Alert(test): refactor Popconfirm tests * Alert(test): refactor icon test * Alert(test): refactor tooltip test * Alert(test): remove useless descible for perventing nesting Co-authored-by: ian.xufeng <ian.xufeng@shopee.com>
2025-01-18 14:13:37 +08:00 · 2022-09-19 13:41:00 +08:00 · 2022-09-19 13:41:00 +08:00 · 82a971a433
commit 82a971a433
parent 583d08b473
3 changed files with 54 additions and 125 deletions
--- a/components/alert/tests/snapshots/index.test.tsx.snap
+++ b/components/alert/tests/snapshots/index.test.tsx.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Alert action of Alert custom action 1`] = `
+exports[`Alert custom action 1`] = `
 <div
  class="ant-alert ant-alert-success"
  data-show="true"
@ -74,29 +74,6 @@ exports[`Alert action of Alert custom action 1`] = `
 </div>
 `;

-exports[`Alert could accept none react element icon 1`] = `
-<div
-  class="ant-alert ant-alert-success"
-  data-show="true"
-  role="alert"
->
-  <span
-    class="ant-alert-icon"
-  >
-    icon
-  </span>
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      Success Tips
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
@ -108,30 +85,3 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
  />
 </div>
 `;
-
-exports[`Alert support closeIcon 1`] = `
-<div
-  class="ant-alert ant-alert-warning ant-alert-no-icon"
-  data-show="true"
-  role="alert"
->
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
-    </div>
-  </div>
-  <button
-    class="ant-alert-close-icon"
-    tabindex="0"
-    type="button"
-  >
-    <span>
-      close
-    </span>
-  </button>
-</div>
-`;
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -1,8 +1,9 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep, act } from '../../../tests/utils';
+import { render, act, screen } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@ -21,9 +22,9 @@ describe('Alert', () => {
    jest.useRealTimers();
  });

-  it('could be closed', () => {
+  it('should show close button and could be closed', async () => {
    const onClose = jest.fn();
-    const { container } = render(
+    render(
      <Alert
        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
        type="warning"
@ -32,125 +33,102 @@ describe('Alert', () => {
      />,
    );

-    jest.useFakeTimers();
-    fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
+    await userEvent.click(screen.getByRole('button', { name: /close/i }));
+
    act(() => {
      jest.runAllTimers();
    });
-    expect(onClose).toHaveBeenCalled();
-    jest.useRealTimers();
+
+    expect(onClose).toBeCalledTimes(1);
  });

-  describe('action of Alert', () => {
-    it('custom action', () => {
-      const { container } = render(
-        <Alert
-          message="Success Tips"
-          type="success"
-          showIcon
-          action={
-            <Button size="small" type="text">
-              UNDO
-            </Button>
-          }
-          closable
-        />,
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
-  it('support closeIcon', () => {
+  it('custom action', () => {
    const { container } = render(
      <Alert
+        message="Success Tips"
+        type="success"
+        showIcon
+        action={
+          <Button size="small" type="text">
+            UNDO
+          </Button>
+        }
        closable
-        closeIcon={<span>close</span>}
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
      />,
    );
    expect(container.firstChild).toMatchSnapshot();
  });

-  describe('data and aria props', () => {
-    it('sets data attributes on input', () => {
-      const { container } = render(<Alert data-test="test-id" data-id="12345" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('data-test')).toBe('test-id');
-      expect(input.getAttribute('data-id')).toBe('12345');
-    });
-
-    it('sets aria attributes on input', () => {
-      const { container } = render(<Alert aria-describedby="some-label" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('aria-describedby')).toBe('some-label');
-    });
-
-    it('sets role attribute on input', () => {
-      const { container } = render(<Alert role="status" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('role')).toBe('status');
-    });
+  it('should sets data attributes on alert when pass attributes to props', () => {
+    render(
+      <Alert data-test="test-id" data-id="12345" aria-describedby="some-label" message={null} />,
+    );
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveAttribute('data-test', 'test-id');
+    expect(alert).toHaveAttribute('data-id', '12345');
+    expect(alert).toHaveAttribute('aria-describedby', 'some-label');
  });

-  it('ErrorBoundary', () => {
+  it('sets role attribute on input', () => {
+    render(<Alert role="status" message={null} />);
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should show error as ErrorBoundary when children have error', () => {
    jest.spyOn(console, 'error').mockImplementation(() => undefined);
    // eslint-disable-next-line no-console
    expect(console.error).toHaveBeenCalledTimes(0);
    // @ts-expect-error
    // eslint-disable-next-line react/jsx-no-undef
    const ThrowError = () => <NotExisted />;
-    const { container } = render(
+    render(
      <ErrorBoundary>
        <ThrowError />
      </ErrorBoundary>,
    );
-    // eslint-disable-next-line jest/no-standalone-expect
-    expect(container.textContent).toContain('ReferenceError: NotExisted is not defined');
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ReferenceError: NotExisted is not defined',
+    );
    // eslint-disable-next-line no-console
    (console.error as any).mockRestore();
  });

  it('could be used with Tooltip', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const { container } = render(
-      <Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
+    render(
+      <Tooltip title="xxx" mouseEnterDelay={0}>
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
        />
      </Tooltip>,
    );
-    // wrapper.find('.ant-alert').simulate('mouseenter');
-    fireEvent.mouseEnter(container.querySelector('.ant-alert')!);
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
+
+    await userEvent.hover(screen.getByRole('alert'));
+
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

  it('could be used with Popconfirm', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const { container } = render(
-      <Popconfirm ref={ref} title="xxx">
+    render(
+      <Popconfirm title="xxx">
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
        />
      </Popconfirm>,
    );
-    fireEvent.click(container.querySelector('.ant-alert')!);
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
+    await userEvent.click(screen.getByRole('alert'));
+
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

  it('could accept none react element icon', () => {
-    const { container } = render(
-      <Alert message="Success Tips" type="success" showIcon icon="icon" />,
-    );
-    expect(container.firstChild).toMatchSnapshot();
+    render(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
+
+    expect(screen.getByRole('alert')).toHaveTextContent(/success tips/i);
+    expect(screen.getByRole('alert')).toHaveTextContent(/icon/i);
  });

  it('should not render message div when no message', () => {
--- a/package.json
+++ b/package.json
@ -119,6 +119,7 @@
    "@ant-design/react-slick": "~0.29.1",
    "@babel/runtime": "^7.18.3",
    "@ctrl/tinycolor": "^3.4.0",
+    "@testing-library/user-event": "^14.4.2",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.2.0",
    "lodash": "^4.17.21",