test: update focus test

Author: tangjinzhou

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -8,7 +8,7 @@ import enUS from '../locale/en_US';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder } from '../util';
 import { getTimeProps, Components } from '.';
-import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
 import type { CommonProps, RangePickerProps } from './props';
@@ -56,15 +56,6 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
         props,
       );
       const pickerRef = ref();
-      onMounted(() => {
-        nextTick(() => {
-          if (process.env.NODE_ENV === 'test') {
-            if (props.autofocus) {
-              pickerRef.value?.focus();
-            }
-          }
-        });
-      });
       expose({
         focus: () => {
           pickerRef.value?.focus();

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -8,7 +8,7 @@ import enUS from '../locale/en_US';
 import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import { getTimeProps, Components } from '.';
-import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
 import type { CommonProps, DatePickerProps } from './props';
@@ -65,15 +65,6 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
           props,
         );
         const pickerRef = ref();
-        onMounted(() => {
-          nextTick(() => {
-            if (process.env.NODE_ENV === 'test') {
-              if (props.autofocus) {
-                pickerRef.value?.focus();
-              }
-            }
-          });
-        });
         expose({
           focus: () => {
             pickerRef.value?.focus();

components/input-number/index.tsx

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes, HTMLAttributes, App } from 'vue';
-import { watch, defineComponent, nextTick, onMounted, ref } from 'vue';
+import { watch, defineComponent, ref } from 'vue';
 import classNames from '../_util/classNames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
@@ -74,15 +74,6 @@ const InputNumber = defineComponent({
       focused.value = true;
       emit('focus', e);
     };
-    onMounted(() => {
-      nextTick(() => {
-        if (process.env.NODE_ENV === 'test') {
-          if (props.autofocus && !props.disabled) {
-            focus();
-          }
-        }
-      });
-    });
     return () => {
       const {
         class: className,

components/input/Input.tsx

@@ -246,11 +246,6 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      if (process.env.NODE_ENV === 'test') {
-        if (props.autofocus) {
-          focus();
-        }
-      }
       clearPasswordValueAttribute();
     });
     onBeforeUnmount(() => {

components/input/TextArea.tsx

@@ -4,7 +4,6 @@ import {
   defineComponent,
   getCurrentInstance,
   nextTick,
-  onMounted,
   ref,
   watch,
   watchEffect,
@@ -215,13 +214,6 @@ export default defineComponent({
       );
     };
 
-    onMounted(() => {
-      if (process.env.NODE_ENV === 'test') {
-        if (props.autofocus) {
-          focus();
-        }
-      }
-    });
     expose({
       focus,
       blur,

components/mentions/index.tsx

@@ -1,5 +1,5 @@
 import type { App, PropType, ExtractPropTypes } from 'vue';
-import { watch, ref, onMounted, defineComponent, nextTick } from 'vue';
+import { watch, ref, defineComponent } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import VcMentions, { Option } from '../vc-mentions';
@@ -156,16 +156,6 @@ const Mentions = defineComponent({
 
     expose({ focus, blur });
 
-    onMounted(() => {
-      nextTick(() => {
-        if (process.env.NODE_ENV === 'test') {
-          if (props.autofocus) {
-            focus();
-          }
-        }
-      });
-    });
-
     return () => {
       const {
         disabled,

components/vc-checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 // based on rc-checkbox 2.3.2
 import type { HTMLAttributes } from 'vue';
-import { nextTick, defineComponent, ref, watch, onMounted } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps } from '../_util/props-util';
@@ -37,15 +37,6 @@ export default defineComponent({
         checked.value = props.checked;
       },
     );
-    onMounted(() => {
-      nextTick(() => {
-        if (process.env.NODE_ENV === 'test') {
-          if (props.autofocus) {
-            inputRef.value?.focus();
-          }
-        }
-      });
-    });
     expose({
       focus() {
         inputRef.value?.focus();

components/vc-select/Selector/Input.tsx

@@ -1,6 +1,6 @@
 import { cloneElement } from '../../_util/vnode';
 import type { ExtractPropTypes, PropType, VNode } from 'vue';
-import { defineComponent, getCurrentInstance, inject, onMounted, withDirectives } from 'vue';
+import { defineComponent, inject, withDirectives } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import antInput from '../../_util/antInputDirective';
 import classNames from '../../_util/classNames';
@@ -48,17 +48,6 @@ const Input = defineComponent({
     let blurTimeout = null;
     const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any;
 
-    if (process.env.NODE_ENV === 'test') {
-      onMounted(() => {
-        const ins = getCurrentInstance();
-        if (props.autofocus) {
-          if (ins.vnode && ins.vnode.el) {
-            ins.vnode.el.focus();
-          }
-        }
-      });
-    }
-
     return () => {
       const {
         prefixCls,

tests/shared/focusTest.js

@@ -48,7 +48,7 @@ export default function focusTest(Component) {
 
     it('autofocus', async () => {
       const handleFocus = jest.fn();
-      mount(
+      const wrapper = mount(
         {
           render() {
             return <Component autofocus onFocus={handleFocus} />;
@@ -57,6 +57,10 @@ export default function focusTest(Component) {
         { attachTo: container, sync: false },
       );
       await sleep();
+      const focusEle = wrapper.findAll('[autofocus]');
+      if (focusEle.length) {
+        focusEle[0].trigger('focus');
+      }
       expect(handleFocus).toBeCalled();
     });
   });