fix: quick switch between microtasks should have correct status (#11)

Author: buhichan

src/hooks/useStatus.ts

@@ -126,7 +126,7 @@ export default function useStatus(
     }
   }, [status]);
 
-  const [startStep, step] = useStepQueue((newStep) => {
+  const [startStep, step] = useStepQueue(status, (newStep) => {
     // Only prepare step can be skip
     if (newStep === STEP_PREPARE) {
       const onPrepare = eventHandlers[STEP_PREPARE];

src/hooks/useStepQueue.ts

@@ -6,6 +6,7 @@ import {
   STEP_START,
   STEP_ACTIVATED,
   STEP_NONE,
+  MotionStatus,
 } from '../interface';
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import useNextFrame from './useNextFrame';
@@ -27,6 +28,7 @@ export function isActive(step: StepStatus) {
 }
 
 export default (
+  status: MotionStatus,
   callback: (
     step: StepStatus,
   ) => Promise<void> | void | typeof SkipStep | typeof DoStep,
@@ -68,7 +70,7 @@ export default (
         });
       }
     }
-  }, [step]);
+  }, [status, step]);
 
   React.useEffect(
     () => () => {

tests/CSSMotion.spec.tsx

@@ -186,7 +186,7 @@ describe('CSSMotion', () => {
       expect(boxNode.hasClass('transition-appear-active')).toBeFalsy();
     });
 
-    it('quick switch should have correct status', () => {
+    it('quick switch should have correct status', async () => {
       const wrapper = mount(
         <CSSMotion motionName="transition">
           {({ style, className }) => (
@@ -208,7 +208,23 @@ describe('CSSMotion', () => {
         wrapper.update();
       });
 
-      const boxNode = wrapper.find('.motion-box');
+      let boxNode = wrapper.find('.motion-box');
+      expect(boxNode.hasClass('transition')).toBeTruthy();
+      expect(boxNode.hasClass('transition-leave')).toBeTruthy();
+      expect(boxNode.hasClass('transition-leave-active')).toBeTruthy();
+
+      wrapper.setProps({ visible: true });
+      await act(() => {
+        return Promise.resolve().then(() => {
+          wrapper.setProps({ visible: false });
+        });
+      });
+      act(() => {
+        jest.runAllTimers();
+        wrapper.update();
+      });
+
+      boxNode = wrapper.find('.motion-box');
       expect(boxNode.hasClass('transition')).toBeTruthy();
       expect(boxNode.hasClass('transition-leave')).toBeTruthy();
       expect(boxNode.hasClass('transition-leave-active')).toBeTruthy();