test(motion): expand motion atom testing (microsoft#35079)

Author: robertpenner

change/@fluentui-react-motion-components-preview-b00c98db-15e4-4c49-b65b-c6f527be32d7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "test(motion): expand motion atom testing",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.test.ts

@@ -1,4 +1,28 @@
 import { fadeAtom } from './fade-atom';
+import {
+  expectValidAtomMotion,
+  expectReversedKeyframes,
+  expectCustomParameters,
+  expectKeyframeProperty,
+} from '../testing/atomTestUtils';
+
+/**
+ * Test utility for validating fade-specific atom properties.
+ */
+function expectFadeAtom(
+  atom: import('@fluentui/react-motion').AtomMotion,
+  direction: 'enter' | 'exit',
+  fromOpacity: number = 0,
+  toOpacity: number = 1,
+) {
+  expectValidAtomMotion(atom);
+
+  if (direction === 'enter') {
+    expectKeyframeProperty(atom, 'opacity', [fromOpacity, toOpacity]);
+  } else {
+    expectKeyframeProperty(atom, 'opacity', [toOpacity, fromOpacity]);
+  }
+}
 
 describe('fadeAtom', () => {
   it('creates proper keyframes for enter and exit directions', () => {
@@ -59,4 +83,51 @@ describe('fadeAtom', () => {
       fill: 'both',
     });
   });
+
+  // Enhanced tests using test utilities
+  it('creates valid atom motion objects for both directions', () => {
+    const enterAtom = fadeAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = fadeAtom({ direction: 'exit', duration: 300 });
+
+    expectValidAtomMotion(enterAtom);
+    expectValidAtomMotion(exitAtom);
+  });
+
+  it('creates properly reversed keyframes for enter and exit', () => {
+    const enterAtom = fadeAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = fadeAtom({ direction: 'exit', duration: 300 });
+
+    expectReversedKeyframes(enterAtom, exitAtom);
+  });
+
+  it('validates fade-specific behavior with test utility', () => {
+    const enterAtom = fadeAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = fadeAtom({ direction: 'exit', duration: 300 });
+
+    expectFadeAtom(enterAtom, 'enter');
+    expectFadeAtom(exitAtom, 'exit');
+  });
+
+  it('validates custom opacity values with test utility', () => {
+    const enterAtom = fadeAtom({ direction: 'enter', duration: 300, fromOpacity: 0.3 });
+    const exitAtom = fadeAtom({ direction: 'exit', duration: 300, fromOpacity: 0.3 });
+
+    expectFadeAtom(enterAtom, 'enter', 0.3, 1);
+    expectFadeAtom(exitAtom, 'exit', 0.3, 1);
+  });
+
+  it('validates custom timing parameters with test utility', () => {
+    const atom = fadeAtom({
+      direction: 'enter',
+      duration: 500,
+      delay: 200,
+      easing: 'ease-in-out',
+    });
+
+    expectCustomParameters(atom, {
+      duration: 500,
+      delay: 200,
+      easing: 'ease-in-out',
+    });
+  });
 });

packages/react-components/react-motion-components-preview/library/src/atoms/scale-atom.test.ts

@@ -0,0 +1,185 @@
+import { scaleAtom } from './scale-atom';
+import {
+  expectValidAtomMotion,
+  expectReversedKeyframes,
+  expectCustomParameters,
+  expectKeyframeProperty,
+} from '../testing/atomTestUtils';
+
+/**
+ * Test utility for validating scale-specific atom properties.
+ */
+function expectScaleAtom(
+  atom: import('@fluentui/react-motion').AtomMotion,
+  direction: 'enter' | 'exit',
+  fromScale: number = 0.9,
+  toScale: number = 1,
+) {
+  expectValidAtomMotion(atom);
+
+  if (direction === 'enter') {
+    expectKeyframeProperty(atom, 'scale', [fromScale, toScale]);
+  } else {
+    expectKeyframeProperty(atom, 'scale', [toScale, fromScale]);
+  }
+}
+
+describe('scaleAtom', () => {
+  it('creates proper keyframes for enter and exit directions', () => {
+    const enterAtom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+    });
+
+    const exitAtom = scaleAtom({
+      direction: 'exit',
+      duration: 300,
+    });
+
+    expect(enterAtom.keyframes).toEqual([{ scale: 0.9 }, { scale: 1 }]);
+    expect(exitAtom.keyframes).toEqual([{ scale: 1 }, { scale: 0.9 }]);
+  });
+
+  it('applies custom fromScale and toScale values', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+      fromScale: 0.5,
+      toScale: 1.2,
+    });
+
+    expect(atom.keyframes).toEqual([{ scale: 0.5 }, { scale: 1.2 }]);
+  });
+
+  it('uses default scale values when not provided', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+    });
+
+    expect(atom.keyframes).toEqual([{ scale: 0.9 }, { scale: 1 }]);
+  });
+
+  it('handles zero scale values correctly', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+      fromScale: 0,
+      toScale: 1,
+    });
+
+    expect(atom.keyframes).toEqual([{ scale: 0 }, { scale: 1 }]);
+  });
+
+  it('handles scale values greater than 1', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+      fromScale: 1.5,
+      toScale: 2.0,
+    });
+
+    expect(atom.keyframes).toEqual([{ scale: 1.5 }, { scale: 2.0 }]);
+  });
+
+  it('applies custom easing and delay', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 250,
+      easing: 'ease-out',
+      delay: 100,
+    });
+
+    expect(atom).toMatchObject({
+      duration: 250,
+      easing: 'ease-out',
+      delay: 100,
+    });
+  });
+
+  it('includes all expected properties in the returned atom', () => {
+    const atom = scaleAtom({
+      direction: 'exit',
+      duration: 400,
+      delay: 75,
+      easing: 'ease-in-out',
+      fromScale: 0.8,
+      toScale: 1.1,
+    });
+
+    expect(atom).toMatchObject({
+      keyframes: [{ scale: 1.1 }, { scale: 0.8 }], // Note: reversed for exit
+      duration: 400,
+      easing: 'ease-in-out',
+      delay: 75,
+    });
+  });
+
+  it('handles fractional scale values', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+      fromScale: 0.95,
+      toScale: 1.05,
+    });
+
+    expect(atom.keyframes).toEqual([{ scale: 0.95 }, { scale: 1.05 }]);
+  });
+
+  // Enhanced tests using test utilities
+  it('creates valid atom motion objects for both directions', () => {
+    const enterAtom = scaleAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = scaleAtom({ direction: 'exit', duration: 300 });
+
+    expectValidAtomMotion(enterAtom);
+    expectValidAtomMotion(exitAtom);
+  });
+
+  it('creates properly reversed keyframes for enter and exit', () => {
+    const enterAtom = scaleAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = scaleAtom({ direction: 'exit', duration: 300 });
+
+    expectReversedKeyframes(enterAtom, exitAtom);
+  });
+
+  it('validates scale-specific behavior with test utility', () => {
+    const enterAtom = scaleAtom({ direction: 'enter', duration: 300 });
+    const exitAtom = scaleAtom({ direction: 'exit', duration: 300 });
+
+    expectScaleAtom(enterAtom, 'enter');
+    expectScaleAtom(exitAtom, 'exit');
+  });
+
+  it('validates custom scale values with test utility', () => {
+    const enterAtom = scaleAtom({
+      direction: 'enter',
+      duration: 300,
+      fromScale: 0.5,
+      toScale: 1.2,
+    });
+    const exitAtom = scaleAtom({
+      direction: 'exit',
+      duration: 300,
+      fromScale: 0.5,
+      toScale: 1.2,
+    });
+
+    expectScaleAtom(enterAtom, 'enter', 0.5, 1.2);
+    expectScaleAtom(exitAtom, 'exit', 0.5, 1.2);
+  });
+
+  it('validates custom timing parameters with test utility', () => {
+    const atom = scaleAtom({
+      direction: 'enter',
+      duration: 350,
+      delay: 75,
+      easing: 'ease-out',
+    });
+
+    expectCustomParameters(atom, {
+      duration: 350,
+      delay: 75,
+      easing: 'ease-out',
+    });
+  });
+});