chore: auto merge branches (#37711)

chore: Next merge master
2024-11-27 20:49:53 +08:00 · 2022-09-23 06:57:01 +00:00 · 2022-09-23 06:57:01 +00:00 · 5d37e6264d
commit 5d37e6264d
parent a05b9d92c5 2a754bd5ca
13 changed files with 148 additions and 83 deletions
--- a/components/affix/tests/Affix.test.tsx
+++ b/components/affix/tests/Affix.test.tsx
@ -3,7 +3,7 @@ import type { InternalAffixClass } from '..';
 import Affix from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, sleep, triggerResize } from '../../../tests/utils';
+import { render, sleep, triggerResize, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import { getObserverEntities } from '../utils';

@ -216,22 +216,31 @@ describe('Affix Render', () => {
    });

    // Trigger inner and outer element for the two <ResizeObserver>s.
-    it.each([
-      { selector: '.ant-btn' }, // inner
-      { selector: '.fixed' }, // outer
-    ])('trigger listener when size change', async ({ selector }) => {
-      const updateCalled = jest.fn();
-      const { container } = render(
-        <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
-        {
-          container: document.getElementById('mounter')!,
-        },
-      );
+    [
+      '.ant-btn', // inner
+      '.fixed', // outer
+    ].forEach(selector => {
+      it(`trigger listener when size change: ${selector}`, async () => {
+        jest.useFakeTimers();

-      updateCalled.mockReset();
-      triggerResize(container.querySelector(selector)!);
-      await sleep(20);
-      expect(updateCalled).toHaveBeenCalled();
+        const updateCalled = jest.fn();
+        const { container } = render(
+          <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
+          {
+            container: document.getElementById('mounter')!,
+          },
+        );
+
+        updateCalled.mockReset();
+        triggerResize(container.querySelector(selector)!);
+
+        await waitFakeTimer();
+
+        expect(updateCalled).toHaveBeenCalled();
+
+        jest.clearAllTimers();
+        jest.useRealTimers();
+      });
    });
  });
 });
--- a/components/divider/tests/index.test.ts
+++ b/components/divider/tests/index.test.ts
@ -1,6 +0,0 @@
-import Divider from '..';
-import mountTest from '../../../tests/shared/mountTest';
-
-describe('Divider', () => {
-  mountTest(Divider);
-});
--- a/components/divider/tests/index.test.tsx
+++ b/components/divider/tests/index.test.tsx
@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '../../../tests/utils';
+import Divider from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Divider', () => {
+  mountTest(Divider);
+
+  it('not show children when vertical', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(<Divider type="vertical">Bamboo</Divider>);
+    expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy();
+
+    errSpy.mockRestore();
+  });
+});
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
+import warning from '../_util/warning';

 import useStyle from './style';

@ -58,9 +59,18 @@ const Divider: React.FC<DividerProps> = props => {
    ...(hasCustomMarginRight && { marginRight: orientationMargin }),
  };

+  // Warning children not work in vertical mode
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !children || type !== 'vertical',
+      'Divider',
+      '`children` not working in `vertical` mode.',
+    );
+  }
+
  return wrapSSR(
    <div className={classString} {...restProps} role="separator">
-      {children && (
+      {children && type !== 'vertical' && (
        <span className={`${prefixCls}-inner-text`} style={innerStyle}>
          {children}
        </span>
--- a/components/form/tests/snapshots/index.test.tsx.snap
+++ b/components/form/tests/snapshots/index.test.tsx.snap
--- a/components/form/tests/index.test.tsx
+++ b/components/form/tests/index.test.tsx
@ -1,9 +1,9 @@
 import { mount } from 'enzyme';
 import React, { Component, useState } from 'react';
-import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import classNames from 'classnames';
 import Form from '..';
+import type { FormInstance } from '..';
 import * as Util from '../util';

 import Button from '../../button';
@ -20,7 +20,7 @@ import TreeSelect from '../../tree-select';

 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, act, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import Drawer from '../../drawer';
 import zhCN from '../../locale/zh_CN';
@ -38,10 +38,10 @@ describe('Form', () => {
  rtlTest(Form);
  rtlTest(Form.Item);

-  scrollIntoView.mockImplementation(() => {});
+  (scrollIntoView as any).mockImplementation(() => {});
  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

-  async function change(container, index, value, executeMockTimer) {
+  async function change(container: Element, index: number, value: any, executeMockTimer: boolean) {
    fireEvent.change(container.querySelectorAll('input')[index], {
      target: { value },
    });
@ -59,7 +59,7 @@ describe('Form', () => {

  beforeEach(() => {
    jest.useRealTimers();
-    scrollIntoView.mockReset();
+    (scrollIntoView as any).mockReset();
  });

  afterEach(() => {
@ -68,7 +68,7 @@ describe('Form', () => {

  afterAll(() => {
    errorSpy.mockRestore();
-    scrollIntoView.mockRestore();
+    (scrollIntoView as any).mockRestore();
  });

  describe('noStyle Form.Item', () => {
@ -143,11 +143,11 @@ describe('Form', () => {

      const { container } = render(<Demo />);
      await change(container, 0, '1', true);
-      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('aaa');
+      expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual('aaa');
      await change(container, 0, '2', true);
-      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('ccc');
+      expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual('ccc');
      await change(container, 0, '1', true);
-      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('aaa');
+      expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual('aaa');

      jest.useRealTimers();
    });
@ -356,9 +356,9 @@ describe('Form', () => {
  });

  describe('scrollToField', () => {
-    function test(name, genForm) {
+    function test(name: string, genForm: () => { props: any; getForm: () => FormInstance }) {
      it(name, () => {
-        let callGetForm;
+        let callGetForm: () => FormInstance = undefined!;

        const Demo = () => {
          const { props, getForm } = genForm();
@ -402,10 +402,10 @@ describe('Form', () => {

    // ref
    test('ref', () => {
-      let form;
+      let form: FormInstance;
      return {
        props: {
-          ref: instance => {
+          ref: (instance: FormInstance) => {
            form = instance;
          },
        },
@ -442,7 +442,7 @@ describe('Form', () => {
  it('Form.Item should support data-*、aria-* and custom attribute', () => {
    const wrapper = mount(
      <Form>
-        <Form.Item data-text="123" aria-hidden="true" cccc="bbbb">
+        <Form.Item data-text="123" aria-hidden="true" {...{ cccc: 'bbbb' }}>
          text
        </Form.Item>
      </Form>,
@ -547,13 +547,13 @@ describe('Form', () => {
    for (let i = 0; i < 3; i += 1) {
      await change(container, 0, 'bamboo', true);
      await change(container, 0, '', true);
-      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual(
+      expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual(
        "'name' is required",
      );

      await change(container, 0, 'p', true);
      await sleep(100);
-      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('not a p');
+      expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual('not a p');
    }
    /* eslint-enable */

@ -605,7 +605,7 @@ describe('Form', () => {
      return <Input />;
    };

-    const formRef = React.createRef();
+    const formRef = React.createRef<FormInstance>();

    mount(
      <div>
@ -620,13 +620,13 @@ describe('Form', () => {
      </div>,
      {
        strictMode: false,
-      },
+      } as any,
    );

    expect(shouldNotRender).toHaveBeenCalledTimes(1);
    expect(shouldRender).toHaveBeenCalledTimes(1);

-    formRef.current.setFieldsValue({ light: 'bamboo' });
+    formRef.current!.setFieldsValue({ light: 'bamboo' });
    await Promise.resolve();
    expect(shouldNotRender).toHaveBeenCalledTimes(1);
    expect(shouldRender).toHaveBeenCalledTimes(2);
@ -659,7 +659,7 @@ describe('Form', () => {

    await change(container, 0, '', true);
    expect(container.querySelector('.ant-form-item')).toHaveClass('ant-form-item-has-error');
-    expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('help');
+    expect(container.querySelector('.ant-form-item-explain')!.textContent).toEqual('help');

    jest.useRealTimers();
  });
@ -710,7 +710,7 @@ describe('Form', () => {

  it('`null` triggers warning and is treated as `undefined`', () => {
    const wrapper = mount(
-      <Form.Item name={null}>
+      <Form.Item name={null!}>
        <input />
      </Form.Item>,
    );
@ -747,7 +747,7 @@ describe('Form', () => {

  it('change `help` should not warning', () => {
    const Demo = () => {
-      const [error, setError] = React.useState(null);
+      const [error, setError] = React.useState<boolean | null>(null);

      return (
        <Form>
@ -770,7 +770,7 @@ describe('Form', () => {
    };

    const { container } = render(<Demo />);
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);

    expect(errorSpy).not.toHaveBeenCalled();
  });
@ -794,7 +794,9 @@ describe('Form', () => {

  // https://github.com/ant-design/ant-design/issues/33691
  it('should keep upper locale in nested ConfigProvider', async () => {
-    const wrapper = mount(
+    jest.useFakeTimers();
+
+    const { container } = render(
      <ConfigProvider locale={zhCN}>
        <ConfigProvider>
          <Form>
@ -806,11 +808,15 @@ describe('Form', () => {
      </ConfigProvider>,
    );

-    wrapper.find('form').simulate('submit');
-    await sleep(100);
-    wrapper.update();
-    await sleep(100);
-    expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('请输入Bamboo');
+    fireEvent.submit(container.querySelector('form')!);
+
+    // Repeat enough time for validator promise sequence
+    await waitFakeTimer();
+
+    expect(container.querySelector('.ant-form-item-explain')?.textContent).toEqual('请输入Bamboo');
+
+    jest.clearAllTimers();
+    jest.useRealTimers();
  });

  it('`name` support template when label is not provided', async () => {
@ -886,7 +892,7 @@ describe('Form', () => {

    const wrapper = mount(<App />, {
      strictMode: false,
-    });
+    } as any);
    for (let i = 0; i < 5; i += 1) {
      wrapper.find('button').simulate('click');
    }
@ -911,7 +917,7 @@ describe('Form', () => {

    const wrapper = mount(<Demo />, {
      strictMode: false,
-    });
+    } as any);
    renderTimes = 0;

    wrapper.find('input').simulate('change', {
@ -941,7 +947,7 @@ describe('Form', () => {
  });

  it('Remove Field should also reset error', async () => {
-    const Demo = ({ showA }) => (
+    const Demo = ({ showA }: { showA: boolean }) => (
      <Form>
        {showA ? (
          <Form.Item name="a" help="error">
@ -968,7 +974,7 @@ describe('Form', () => {
  it('no warning of initialValue & getValueProps & preserve', () => {
    render(
      <Form>
-        <Form.Item initialValue="bamboo" getValueProps={() => null} preserve={false}>
+        <Form.Item initialValue="bamboo" getValueProps={(() => null) as any} preserve={false}>
          <Input />
        </Form.Item>
      </Form>,
@ -1117,15 +1123,17 @@ describe('Form', () => {
      <Form>
        <Form.Item
          name="light"
-          _internalItemRender={{
-            mark: 'pro_table_render',
-            render: (_, doms) => (
-              <div id="_test">
-                {doms.input}
-                {doms.errorList}
-                {doms.extra}
-              </div>
-            ),
+          {...{
+            _internalItemRender: {
+              mark: 'pro_table_render',
+              render: (_: any, doms: any) => (
+                <div id="_test">
+                  {doms.input}
+                  {doms.errorList}
+                  {doms.extra}
+                </div>
+              ),
+            },
          }}
        >
          <input defaultValue="should warning" />
@ -1173,7 +1181,7 @@ describe('Form', () => {

    const wrapper = mount(<Demo />, { attachTo: document.body });
    expect(mockFn).toHaveBeenCalled();
-    expect(Util.getFieldId()).toBe(itemName);
+    expect((Util as any).getFieldId()).toBe(itemName); // Mock here

    // make sure input id is parentNode
    expect(wrapper.find(`#${itemName}`).exists()).toBeTruthy();
@ -1244,7 +1252,7 @@ describe('Form', () => {

  it('not warning when remove on validate', async () => {
    jest.useFakeTimers();
-    let rejectFn = null;
+    let rejectFn: Function = null!;

    const { container, unmount } = render(
      <Form>
@ -1381,7 +1389,7 @@ describe('Form', () => {
  it('should not affect Popup children style', () => {
    const Demo = () => (
      <Form>
-        <Form.Item labelCol={4} validateStatus="error">
+        <Form.Item validateStatus="error">
          <Modal open>
            <Select className="modal-select" />
          </Modal>
@ -1401,11 +1409,13 @@ describe('Form', () => {
  });

  it('Form.Item.useStatus should work', async () => {
+    jest.useFakeTimers();
+
    const {
      Item: { useStatus },
    } = Form;

-    const CustomInput = ({ className, value }) => {
+    const CustomInput = ({ className, value }: { className: string; value?: React.ReactNode }) => {
      const { status } = useStatus();
      return <div className={classNames(className, `custom-input-status-${status}`)}>{value}</div>;
    };
@ -1447,17 +1457,25 @@ describe('Form', () => {
    expect(errorSpy).toHaveBeenCalledWith(
      expect.stringContaining('Form.Item.useStatus should be used under Form.Item component.'),
    );
-    fireEvent.click(container.querySelector('.submit-button'));
-    await sleep(0);
+
+    fireEvent.click(container.querySelector('.submit-button')!);
+    await waitFakeTimer();
+
    expect(container.querySelector('.custom-input-required')?.classList).toContain(
      'custom-input-status-error',
    );
+
+    jest.clearAllTimers();
+    jest.useRealTimers();
  });

  it('item customize margin', async () => {
-    const computeSpy = jest.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
-      marginBottom: 24,
-    }));
+    const computeSpy = jest.spyOn(window, 'getComputedStyle').mockImplementation(
+      () =>
+        ({
+          marginBottom: 24,
+        } as any),
+    );

    const { container } = render(
      <Form>
@ -1467,7 +1485,7 @@ describe('Form', () => {
      </Form>,
    );

-    fireEvent.change(container.querySelector('input'), {
+    fireEvent.change(container.querySelector('input')!, {
      target: {
        value: '',
      },
--- a/components/locale/pt_PT.tsx
+++ b/components/locale/pt_PT.tsx
@ -31,7 +31,7 @@ const localeValues: Locale = {
    searchPlaceholder: 'Procurar...',
    itemUnit: 'item',
    itemsUnit: 'itens',
-    selectAll: 'Seleccionar Tudo',
+    selectAll: 'Selecionar tudo',
    selectInvert: 'Inverter a página actual',
  },
  Upload: {
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@ -109,9 +109,9 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t

 File icon realize by using switcherIcon. You can overwrite the style to hide it: <https://codesandbox.io/s/883vo47xp8>

-### Why defaultExpandedAll not working on ajax data?
+### Why defaultExpandAll not working on ajax data?

-`default` prefix prop only works when inited. So `defaultExpandedAll` has already executed when ajax load data. You can control `expandedKeys` or render Tree when data loaded to realize expanded all.
+`default` prefix prop only works when inited. So `defaultExpandAll` has already executed when ajax load data. You can control `expandedKeys` or render Tree when data loaded to realize expanded all.

 ### Virtual scroll limitation

--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@ -110,9 +110,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg

 文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式：<https://codesandbox.io/s/883vo47xp8>

-### defaultExpandedAll 在异步加载数据时为何不生效？
+### defaultExpandAll 在异步加载数据时为何不生效？

-`default` 前缀属性只有在初始化时生效，因而异步加载数据时 `defaultExpandedAll` 已经执行完成。你可以通过受控 `expandedKeys` 或者在数据加载完成后渲染 Tree 来实现全部展开。
+`default` 前缀属性只有在初始化时生效，因而异步加载数据时 `defaultExpandAll` 已经执行完成。你可以通过受控 `expandedKeys` 或者在数据加载完成后渲染 Tree 来实现全部展开。

 ### 虚拟滚动的限制

--- a/components/upload/utils.tsx
+++ b/components/upload/utils.tsx
@ -58,7 +58,7 @@ export const isImageUrl = (file: UploadFile): boolean => {
  const extension = extname(url);
  if (
    /^data:image\//.test(url) ||
-    /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i.test(extension)
+    /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico|heic|heif)$/i.test(extension)
  ) {
    return true;
  }
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@ -29,7 +29,7 @@ title: Third-Party Libraries
 | Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
 | Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
-| Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
+| Context Menu | [react-contexify](https://github.com/fkhadra/react-contexify) |
 | Emoji | [emoji-mart](https://github.com/missive/emoji-mart) |
 | Split View | [react-split-pane](https://github.com/tomkp/react-split-pane) |
 | Image Crop | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@ -29,7 +29,7 @@ title: 社区精选组件
 | 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
 | 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
-| 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
+| 右键菜单 | [react-contexify](https://github.com/fkhadra/react-contexify) |
 | Emoji | [emoji-mart](https://github.com/missive/emoji-mart) |
 | 分割面板 | [react-split-pane](https://github.com/tomkp/react-split-pane) |
 | 图片裁切 | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@ -64,3 +64,20 @@ export const triggerResize = (target: Element) => {

  target.getBoundingClientRect = originGetBoundingClientRect;
 };
+
+export async function waitFakeTimer(advanceTime = 1000) {
+  for (let i = 0; i < 20; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await act(async () => {
+      await Promise.resolve();
+
+      if (advanceTime > 0) {
+        jest.advanceTimersByTime(advanceTime);
+      } else {
+        jest.runAllTimers();
+      }
+    });
+  }
+}
+
+export * from '@testing-library/react';