fix: remove mock transition when test env #4565

Author: tangjinzhou

components/_util/transition.tsx

@@ -5,14 +5,7 @@ import type {
   TransitionGroupProps,
   TransitionProps,
 } from 'vue';
-import {
-  onUpdated,
-  getCurrentInstance,
-  defineComponent,
-  nextTick,
-  Transition as T,
-  TransitionGroup as TG,
-} from 'vue';
+import { nextTick, Transition as T, TransitionGroup as TG } from 'vue';
 import { tuple } from './type';
 
 const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
@@ -26,9 +19,6 @@ const getTransitionDirection = (placement: SelectCommonPlacement | undefined) =>
 };
 
 export const getTransitionProps = (transitionName: string, opt: TransitionProps = {}) => {
-  if (process.env.NODE_ENV === 'test') {
-    return opt;
-  }
   const transitionProps: TransitionProps = transitionName
     ? {
         name: transitionName,
@@ -71,54 +61,6 @@ export const getTransitionGroupProps = (transitionName: string, opt: TransitionP
 let Transition = T;
 let TransitionGroup = TG;
 
-if (process.env.NODE_ENV === 'test') {
-  let warn = true;
-  Transition = defineComponent({
-    name: 'TransitionForTest',
-    inheritAttrs: false,
-    setup(_props, { slots, attrs }) {
-      const instance = getCurrentInstance();
-      if (warn) {
-        console.warn('application runing at test env, you should build use production env');
-        warn = false;
-      }
-      onUpdated(() => {
-        const child = instance.subTree.children[0];
-        if (child && child.dirs && child.dirs[0]) {
-          const value = child.dirs[0].value;
-          const oldValue = child.dirs[0].oldValue;
-          if (!value && value !== oldValue) {
-            nextTick(() => {
-              if (attrs.onAfterLeave) {
-                (attrs as any).onAfterLeave(instance.vnode.el);
-              }
-            });
-          }
-        }
-      });
-      return () => {
-        return slots.default?.();
-      };
-    },
-  }) as any;
-  TransitionGroup = defineComponent({
-    name: 'TransitionGroupForTest',
-    inheritAttrs: false,
-    props: ['tag', 'class'],
-    setup(props, { slots }) {
-      return () => {
-        const { tag: Tag, ...rest } = props;
-        const children = slots.default?.() || [];
-        if (Tag) {
-          return <Tag {...rest}>{children}</Tag>;
-        } else {
-          return children;
-        }
-      };
-    },
-  });
-}
-
 export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
   deadline?: boolean;
 };

components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap

@@ -7,7 +7,7 @@ exports[`QuarterPicker reset select item when popup close 1`] = `
   </div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-quarter-panel">

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -9,7 +9,7 @@ exports[`RangePicker customize separator 1`] = `
   <!---->
   <div>
     <!---->
-    <div class="ant-picker-dropdown ant-picker-dropdown-range" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-picker-dropdown-range ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-range-wrapper ant-picker-date-range-wrapper" style="min-width: 0px;">
         <div class="ant-picker-range-arrow" style="left: 0px;"></div>
         <div class="ant-picker-panel-container" style="margin-left: 0px;">

components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap

@@ -7,7 +7,7 @@ exports[`WeekPicker should support style prop 1`] = `
   </div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-week-panel">

components/date-picker/__tests__/__snapshots__/other.test.js.snap

@@ -9,7 +9,7 @@ exports[`Picker format by locale date 1`] = `
   <div class="ant-picker-input"><input readonly="" placeholder="请选择日期" title="2000-01-01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-date-panel">
@@ -188,7 +188,7 @@ exports[`Picker format by locale dateTime 1`] = `
   <div class="ant-picker-input"><input readonly="" placeholder="请选择日期" title="2000-01-01 00:00:00" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-datetime-panel">
@@ -824,7 +824,7 @@ exports[`Picker format by locale month 1`] = `
   <div class="ant-picker-input"><input readonly="" placeholder="请选择月份" title="2000-01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-month-panel">
@@ -898,7 +898,7 @@ exports[`Picker format by locale week 1`] = `
   <div class="ant-picker-input"><input readonly="" placeholder="请选择周" title="2000-1st" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
   <div>
     <!---->
-    <div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
+    <div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
       <div class="ant-picker-panel-container">
         <div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
           <div class="ant-picker-week-panel">

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -4,9 +4,9 @@ exports[`Modal render correctly 1`] = `
 <div>
   <div></div>
   <div class="ant-modal-root">
-    <div class="ant-modal-mask"></div>
+    <div class="ant-modal-mask fade-enter fade-enter-prepare"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div style="width: 520px;" class="ant-modal" role="document">
+      <div style="width: 520px;" class="ant-modal zoom-enter zoom-enter-prepare" role="document">
         <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
@@ -28,9 +28,9 @@ exports[`Modal render correctly 2`] = `
 <div>
   <div style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;" class="ant-scrolling-effect"></div>
   <div class="ant-modal-root">
-    <div class="ant-modal-mask"></div>
+    <div class="ant-modal-mask fade-enter fade-enter-prepare"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div style="width: 520px;" class="ant-modal" role="document">
+      <div style="width: 520px;" class="ant-modal zoom-enter zoom-enter-prepare" role="document">
         <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
@@ -52,9 +52,9 @@ exports[`Modal render without footer 1`] = `
 <div>
   <div></div>
   <div class="ant-modal-root">
-    <div class="ant-modal-mask"></div>
+    <div class="ant-modal-mask fade-enter fade-enter-prepare"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div style="width: 520px;" class="ant-modal" role="document">
+      <div style="width: 520px;" class="ant-modal zoom-enter zoom-enter-prepare" role="document">
         <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
@@ -70,9 +70,9 @@ exports[`Modal render without footer 1`] = `
 
 exports[`Modal should work with getContainer=false 1`] = `
 <div class="ant-modal-root">
-  <div class="ant-modal-mask"></div>
+  <div class="ant-modal-mask fade-enter fade-enter-prepare"></div>
   <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-    <div style="width: 520px;" class="ant-modal" role="document">
+    <div style="width: 520px;" class="ant-modal zoom-enter zoom-enter-prepare" role="document">
       <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
       <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
         <!---->

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -106,13 +106,13 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
 exports[`Table.rowSelection render with default selection correctly 1`] = `
 <div>
   <!---->
-  <div class="ant-dropdown" style="pointer-events: none; display: none;">
+  <div class="ant-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
     <div class="ant-dropdown-content">
       <!---->
       <ul class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light" role="menu" data-menu-list="true">
         <div>
           <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip zoom-big-fast-enter zoom-big-fast-enter-prepare" style="pointer-events: none; display: none;">
             <div class="ant-tooltip-content">
               <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
               <div class="ant-tooltip-inner" role="tooltip">
@@ -126,7 +126,7 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
         </li>
         <div>
           <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip zoom-big-fast-enter zoom-big-fast-enter-prepare" style="pointer-events: none; display: none;">
             <div class="ant-tooltip-content">
               <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
               <div class="ant-tooltip-inner" role="tooltip">
@@ -140,7 +140,7 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
         </li>
         <div>
           <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip zoom-big-fast-enter zoom-big-fast-enter-prepare" style="pointer-events: none; display: none;">
             <div class="ant-tooltip-content">
               <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
               <div class="ant-tooltip-inner" role="tooltip">