fix(react-dialog): set transition status to undefined for test environment

change/@fluentui-react-dialog-6091ac61-07dc-43d4-87d0-90f15c513098.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: set default DialogTransitionProvider value to `undefined` to remove animation styles from test environment.",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx

@@ -3,6 +3,9 @@ import { render } from '@testing-library/react';
 import { Dialog } from './Dialog';
 import { DialogProps } from './Dialog.types';
 import { isConformant } from '../../testing/isConformant';
+import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { DialogSurface, DialogSurfaceProps } from '../../DialogSurface';
 
 describe('Dialog', () => {
   isConformant<DialogProps>({
@@ -22,8 +25,6 @@ describe('Dialog', () => {
     ],
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(
       <Dialog>
@@ -32,4 +33,33 @@ describe('Dialog', () => {
     );
     expect(result.container).toMatchSnapshot();
   });
+
+  it('Testing DialogSurface with toBeVisible works as expected', () => {
+    // eslint-disable-next-line @griffel/styles-file
+    const useStyles = makeStyles({
+      root: {
+        left: '2px',
+      },
+    });
+    const CustomDialogSurface = React.forwardRef<HTMLDivElement, DialogSurfaceProps>((props, ref) => {
+      const styles = useStyles();
+      return <DialogSurface ref={ref} className={mergeClasses(styles.root, props.className)} {...props} />;
+    });
+
+    const result = render(
+      <Dialog>
+        <DialogTrigger disableButtonEnhancement>
+          <button data-testid="trigger">Open dialog</button>
+        </DialogTrigger>
+        <CustomDialogSurface>
+          <div data-testid="surface-content">content in surface</div>
+        </CustomDialogSurface>
+      </Dialog>,
+    );
+
+    result.getByTestId('trigger').click();
+
+    expect(result.getByTestId('surface-content')).toBeInTheDocument();
+    expect(result.getByTestId('surface-content')).toBeVisible();
+  });
 });

packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx

@@ -17,7 +17,7 @@ export const renderDialog_unstable = (state: DialogState, contextValues: DialogC
       <DialogSurfaceProvider value={contextValues.dialogSurface}>
         {trigger}
         {process.env.NODE_ENV === 'test' ? (
-          state.open && <DialogTransitionProvider value={'entered'}>{content}</DialogTransitionProvider>
+          state.open && <DialogTransitionProvider value={undefined}>{content}</DialogTransitionProvider>
         ) : (
           <Transition
             mountOnEnter

packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts

@@ -35,6 +35,9 @@ export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &
   // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.
   Pick<DialogContextValue, 'isNestedDialog'> &
   Pick<PortalProps, 'mountNode'> & {
-    // This is only optional to avoid breaking changes, it should be mandatory and in fact it is always defined internally.
+    /**
+     * Transition status for animation.
+     * In test environment, this is always `undefined`.
+     */
     transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
   };

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

@@ -39,18 +39,19 @@ const useRootBaseStyle = makeResetStyles({
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
   },
-
-  // initial style before animation:
-  opacity: 0,
-  transitionDuration: tokens.durationGentle,
-  transitionProperty: 'opacity, transform, box-shadow',
-  // // FIXME: https://github.com/microsoft/fluentui/issues/29473
-  transitionTimingFunction: tokens.curveDecelerateMid,
-  boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',
-  transform: 'scale(0.85) translateZ(0)',
 });
 
 const useRootStyles = makeStyles({
+  animated: {
+    // initial style before animation:
+    opacity: 0,
+    transitionDuration: tokens.durationGentle,
+    transitionProperty: 'opacity, transform, box-shadow',
+    // // FIXME: https://github.com/microsoft/fluentui/issues/29473
+    transitionTimingFunction: tokens.curveDecelerateMid,
+    boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',
+    transform: 'scale(0.85) translateZ(0)',
+  },
   unmounted: {},
   entering: {},
   entered: {
@@ -101,7 +102,7 @@ const useBackdropStyles = makeStyles({
  * Apply styling to the DialogSurface slots based on the state
  */
 export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {
-  const { isNestedDialog, root, backdrop, transitionStatus = 'unmounted' } = state;
+  const { isNestedDialog, root, backdrop, transitionStatus } = state;
 
   const rootBaseStyle = useRootBaseStyle();
   const rootStyles = useRootStyles();
@@ -112,7 +113,8 @@ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): Dial
   root.className = mergeClasses(
     dialogSurfaceClassNames.root,
     rootBaseStyle,
-    rootStyles[transitionStatus],
+    transitionStatus && rootStyles.animated,
+    transitionStatus && rootStyles[transitionStatus],
     root.className,
   );
 
@@ -121,7 +123,7 @@ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): Dial
       dialogSurfaceClassNames.backdrop,
       backdropBaseStyle,
       isNestedDialog && backdropStyles.nestedDialogBackdrop,
-      backdropStyles[transitionStatus],
+      transitionStatus && backdropStyles[transitionStatus],
       backdrop.className,
     );
   }

packages/react-components/react-dialog/src/contexts/dialogTransitionContext.ts

@@ -4,12 +4,12 @@ import { TransitionStatus } from 'react-transition-group';
 /**
  * @internal
  */
-export type DialogTransitionContextValue = TransitionStatus;
+export type DialogTransitionContextValue = TransitionStatus | undefined;
 
 /**
  * @internal
  */
-const defaultContextValue: DialogTransitionContextValue = 'unmounted';
+const defaultContextValue: DialogTransitionContextValue = undefined;
 
 // Contexts should default to undefined
 /**