test(motion): update unit test for createPresenceComponentVariant

Author: robertpenner

packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.test.tsx

@@ -14,13 +14,13 @@ jest.mock('./createPresenceComponent', () => {
   };
 });
 
-// TODO: replace `direction` param with something more concrete, less confusing
-const PRESENCE_MOTION: PresenceMotionFn<{ duration?: number; easing?: string }> = ({
+const PRESENCE_MOTION: PresenceMotionFn<{ outOpacity?: number; duration?: number; easing?: string }> = ({
+  outOpacity = 0,
   duration = 1000,
   easing = 'linear',
 }) => ({
-  enter: { keyframes: [], duration, easing },
-  exit: { keyframes: [], duration, easing },
+  enter: [{ keyframes: [{ opacity: outOpacity }, { opacity: 1 }], duration, easing }],
+  exit: [{ keyframes: [{ opacity: 1 }, { opacity: outOpacity }], duration, easing }],
 });
 const PRESENCE_COMPONENT = createPresenceComponent(PRESENCE_MOTION);
 
@@ -29,11 +29,16 @@ const MOTION_PARAMS = {
 };
 
 describe('createPresenceComponentVariant', () => {
-  // TODO: update for new implementation of createPresenceComponentVariant
-  it('appends override to the original motion', () => {
+  it('overrides motion parameters used within motion atom arrays', () => {
+    // variant params overriding the default motion params
+    const outOpacity = 0.3;
+    const duration = 500;
+    const easing = 'ease-in-out';
+
     const PresenceVariant = createPresenceComponentVariant(PRESENCE_COMPONENT, {
-      duration: 500,
-      easing: 'ease-in-out',
+      outOpacity,
+      duration,
+      easing,
     });
     const overrideFn = (createPresenceComponent as jest.Mock).mock.calls[0][0];
 
@@ -51,16 +56,20 @@ describe('createPresenceComponentVariant', () => {
 
     expect(overrideFn).toBeInstanceOf(Function);
     expect(overrideFn(MOTION_PARAMS)).toEqual({
-      enter: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-      exit: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
+      enter: [
+        {
+          duration,
+          easing,
+          keyframes: [{ opacity: outOpacity }, { opacity: 1 }],
+        },
+      ],
+      exit: [
+        {
+          duration,
+          easing,
+          keyframes: [{ opacity: 1 }, { opacity: outOpacity }],
+        },
+      ],
     });
   });
 });