From e6fc681383233ca23b5804257307389f2208c145 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Mon, 7 Nov 2022 11:51:23 +0100
Subject: [PATCH] test(react): clean up persona-coin test and use isConformant
 without side-effects

---
 ...-da22778f-cbbf-4200-b03c-752627517a9c.json |    7 +
 .../src/components/Persona/Persona.test.tsx   |   20 +-
 .../Persona/PersonaCoin/PersonaCoin.test.tsx  |    2 +-
 .../__snapshots__/PersonaCoin.test.tsx.snap   | 1832 -----------------
 .../src/components/Persona/test-utils.tsx     |   19 +
 5 files changed, 29 insertions(+), 1851 deletions(-)
 create mode 100644 change/@fluentui-react-da22778f-cbbf-4200-b03c-752627517a9c.json
 create mode 100644 packages/react/src/components/Persona/test-utils.tsx

diff --git a/change/@fluentui-react-da22778f-cbbf-4200-b03c-752627517a9c.json b/change/@fluentui-react-da22778f-cbbf-4200-b03c-752627517a9c.json
new file mode 100644
index 0000000000000..6c5b52d657952
--- /dev/null
+++ b/change/@fluentui-react-da22778f-cbbf-4200-b03c-752627517a9c.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "test(react): clean up persona-coin test and use isConformant without side-effects",
+  "packageName": "@fluentui/react",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react/src/components/Persona/Persona.test.tsx b/packages/react/src/components/Persona/Persona.test.tsx
index 425b1fd0f4897..b4c9656fdfcaa 100644
--- a/packages/react/src/components/Persona/Persona.test.tsx
+++ b/packages/react/src/components/Persona/Persona.test.tsx
@@ -8,8 +8,8 @@ import { mount, ReactWrapper } from 'enzyme';
 import { getIcon } from '../../Styling';
 import { PersonaPresence, PersonaSize } from './index';
 import { isConformant } from '../../common/isConformant';
-import type { IRenderFunction } from '../../Utilities';
-import type { IPersonaSharedProps, IPersonaProps, IPersonaCoinProps } from './index';
+import type { IPersonaSharedProps, IPersonaCoinProps } from './index';
+import { wrapPersona } from './test-utils';
 
 const testImage1x1 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
@@ -21,22 +21,6 @@ const STYLES = {
   red: '.ms-Persona-initials--red',
 };
 
-/**
- * function to override the default onRender callbacks
- */
-export const wrapPersona = (
-  example: IPersonaSharedProps,
-  shouldWrapPersonaCoin: boolean = false,
-): ((coinProps: IPersonaProps, defaultRenderer: IRenderFunction<IPersonaProps>) => JSX.Element | null) => {
-  return (coinProps, defaultCoinRenderer): JSX.Element | null => {
-    return shouldWrapPersonaCoin ? (
-      <span id="persona-coin-container">{defaultCoinRenderer(coinProps)}</span>
-    ) : (
-      defaultCoinRenderer(coinProps)
-    );
-  };
-};
-
 const customOnRenderPersonaFunction = (props: IPersonaCoinProps): JSX.Element | null => {
   return <Icon iconName="Dictionary" />;
 };
diff --git a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx
index 91db75a87a013..03db02d65eca2 100644
--- a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx
+++ b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { create } from '@fluentui/utilities/lib/test';
 import { setRTL } from '../../../Utilities';
 import { PersonaCoin } from './PersonaCoin';
-import { wrapPersona } from '../Persona.test';
+import { wrapPersona } from '../test-utils';
 
 const testImage1x1 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
diff --git a/packages/react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap b/packages/react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
index 587956ce7219a..346afa0cbf416 100644
--- a/packages/react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
+++ b/packages/react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap
@@ -1,1837 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Persona renders Persona children correctly 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size48
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 48px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 48px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size48
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 48px;
-            position: relative;
-            text-align: center;
-            width: 48px;
-          }
-      role="presentation"
-    >
-      <div
-        aria-hidden="true"
-        className=
-            ms-Persona-initials
-            {
-              background-color: #498205;
-              border-radius: 50%;
-              color: #ffffff;
-              font-size: 16px;
-              font-weight: 600;
-              height: 48px;
-              line-height: 46px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              -ms-high-contrast-adjust: none;
-              background-color: Window !important;
-              border: 1px solid WindowText;
-              box-sizing: border-box;
-              color: WindowText;
-              forced-color-adjust: none;
-            }
-            & i {
-              font-weight: 600;
-            }
-      >
-        <span>
-          KL
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 12px;
-          padding-right: 12px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Kat Larrson
-        <div
-          hidden={true}
-          id="tooltip15"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Kat Larrson
-        </div>
-      </div>
-    </div>
-    <span>
-      Persona Children
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Persona renders Persona correctly with UnknownPersona coin 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size48
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 48px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 48px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size48
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 48px;
-            position: relative;
-            text-align: center;
-            width: 48px;
-          }
-      role="presentation"
-    >
-      <div
-        aria-hidden="true"
-        className=
-            ms-Persona-initials
-            {
-              background-color: rgb(234, 234, 234);
-              border-radius: 50%;
-              color: rgb(168, 0, 0);
-              font-size: 16px;
-              font-weight: 600;
-              height: 48px;
-              line-height: 46px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              -ms-high-contrast-adjust: none;
-              background-color: Window !important;
-              border: 1px solid WindowText;
-              box-sizing: border-box;
-              color: WindowText;
-              forced-color-adjust: none;
-            }
-            & i {
-              font-weight: 600;
-            }
-      >
-        <i
-          aria-hidden={true}
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: inline-block;
-                font-family: "FabricMDL2Icons-1";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
-          data-icon-name="Help"
-        >
-          
-        </i>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 12px;
-          padding-right: 12px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Kat Larrson
-        <div
-          hidden={true}
-          id="tooltip2"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Kat Larrson
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Persona renders Persona correctly with image 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size48
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 48px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 48px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size48
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 48px;
-            position: relative;
-            text-align: center;
-            width: 48px;
-          }
-      role="presentation"
-    >
-      <div
-        className=
-            ms-Image
-            ms-Persona-image
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              border-radius: 50%;
-              border: 0px;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 48px;
-              left: 0px;
-              margin-right: 10px;
-              overflow: hidden;
-              perspective: 1px;
-              position: absolute;
-              top: 0px;
-              width: 48px;
-            }
-        style={
-          Object {
-            "height": 48,
-            "width": 48,
-          }
-        }
-      >
-        <img
-          alt=""
-          className=
-              ms-Image-image
-              ms-Image-image--cover
-              ms-Image-image--portrait
-              is-notLoaded
-              is-fadeIn
-              {
-                display: block;
-                height: 100%;
-                object-fit: cover;
-                opacity: 0;
-                width: 100%;
-              }
-          onError={[Function]}
-          onLoad={[Function]}
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII="
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 12px;
-          padding-right: 12px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Kat Larrson
-        <div
-          hidden={true}
-          id="tooltip1"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Kat Larrson
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Persona renders Persona correctly with initials 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size48
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 48px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 48px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size48
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 48px;
-            position: relative;
-            text-align: center;
-            width: 48px;
-          }
-      role="presentation"
-    >
-      <div
-        aria-hidden="true"
-        className=
-            ms-Persona-initials
-            {
-              background-color: #498205;
-              border-radius: 50%;
-              color: #ffffff;
-              font-size: 16px;
-              font-weight: 600;
-              height: 48px;
-              line-height: 46px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              -ms-high-contrast-adjust: none;
-              background-color: Window !important;
-              border: 1px solid WindowText;
-              box-sizing: border-box;
-              color: WindowText;
-              forced-color-adjust: none;
-            }
-            & i {
-              font-weight: 600;
-            }
-      >
-        <span>
-          KL
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 12px;
-          padding-right: 12px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Kat Larrson
-        <div
-          hidden={true}
-          id="tooltip0"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Kat Larrson
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Persona renders Persona correctly with no props 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size48
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 48px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 48px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size48
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 48px;
-            position: relative;
-            text-align: center;
-            width: 48px;
-          }
-      role="presentation"
-    >
-      <div
-        aria-hidden="true"
-        className=
-            ms-Persona-initials
-            {
-              background-color: #0078D4;
-              border-radius: 50%;
-              color: #ffffff;
-              font-size: 16px;
-              font-weight: 600;
-              height: 48px;
-              line-height: 46px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              -ms-high-contrast-adjust: none;
-              background-color: Window !important;
-              border: 1px solid WindowText;
-              box-sizing: border-box;
-              color: WindowText;
-              forced-color-adjust: none;
-            }
-            & i {
-              font-weight: 600;
-            }
-      >
-        <i
-          aria-hidden={true}
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: inline-block;
-                font-family: "FabricMDL2Icons-0";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
-          data-icon-name="Contact"
-        >
-          
-        </i>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 12px;
-          padding-right: 12px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  />
-</div>
-`;
-
-exports[`Persona renders Persona which calls onRenderCoin callback without imageUrl 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size100
-      ms-Persona--blocked
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 100px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size100
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 100px;
-            position: relative;
-            text-align: center;
-            width: 100px;
-          }
-      role="presentation"
-    >
-      <div
-        aria-hidden="true"
-        className=
-            ms-Persona-initials
-            {
-              background-color: #8E562E;
-              border-radius: 50%;
-              color: #ffffff;
-              font-size: 42px;
-              font-weight: 600;
-              height: 100px;
-              line-height: 100px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              -ms-high-contrast-adjust: none;
-              background-color: Window !important;
-              border: 1px solid WindowText;
-              box-sizing: border-box;
-              color: WindowText;
-              forced-color-adjust: none;
-            }
-            & i {
-              font-weight: 600;
-            }
-      >
-        <span>
-          SV
-        </span>
-      </div>
-      <span
-        id="persona-coin-container"
-      />
-      <div
-        className=
-            ms-Persona-presence
-            {
-              -ms-high-contrast-adjust: none;
-              background-clip: border-box;
-              background-color: #ffffff;
-              border-radius: 50%;
-              border: 2px solid #ffffff;
-              bottom: -2px;
-              box-sizing: content-box;
-              forced-color-adjust: none;
-              height: 28px;
-              position: absolute;
-              right: -2px;
-              text-align: center;
-              top: auto;
-              width: 28px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              background-color: WindowText;
-              border-color: Window;
-            }
-            &:after {
-              background-color: #C43148;
-              content: "";
-              height: 2px;
-              left: 0px;
-              position: absolute;
-              top: 50%;
-              transform: translateY(-50%) rotate(-45deg);
-              width: 100%;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:after {
-              background-color: Window;
-              left: 2px;
-              width: calc(100% - 4px);
-            }
-            &:before {
-              border-radius: 50%;
-              border: 2px solid #C43148;
-              box-sizing: border-box;
-              content: "";
-              height: 100%;
-              left: 0px;
-              position: absolute;
-              top: 0px;
-              width: 100%;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:before {
-              border-color: Window;
-              height: calc(100% - 2px);
-              left: 1px;
-              top: 1px;
-              width: calc(100% - 2px);
-            }
-        role="presentation"
-      >
-        <i
-          aria-hidden={true}
-          className=
-              ms-Icon-placeHolder
-              ms-Persona-presenceIcon
-              {
-                color: #ffffff;
-                display: inline-block;
-                font-size: 14px;
-                line-height: 28px;
-                vertical-align: top;
-                width: 1em;
-              }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: Window;
-              }
-          data-icon-name=""
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 24px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 20px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Swapnil Vaibhav
-        <div
-          hidden={true}
-          id="tooltip3"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Swapnil Vaibhav
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-secondaryText
-          {
-            color: #605e5c;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Software Engineer
-        <div
-          hidden={true}
-          id="tooltip4"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Software Engineer
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-tertiaryText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        In a meeting
-        <div
-          hidden={true}
-          id="tooltip5"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          In a meeting
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-optionalText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Available at 4:00pm
-        <div
-          hidden={true}
-          id="tooltip6"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Available at 4:00pm
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Persona renders Persona which calls onRenderPersonaCoin callback with custom render 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size100
-      ms-Persona--blocked
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 100px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <i
-    aria-hidden={true}
-    className=
-
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          display: inline-block;
-          font-family: "FabricMDL2Icons-1";
-          font-style: normal;
-          font-weight: normal;
-          speak: none;
-        }
-    data-icon-name="Dictionary"
-  >
-    
-  </i>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 24px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 20px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Swapnil Vaibhav
-        <div
-          hidden={true}
-          id="tooltip7"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Swapnil Vaibhav
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-secondaryText
-          {
-            color: #605e5c;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Software Engineer
-        <div
-          hidden={true}
-          id="tooltip8"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Software Engineer
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-tertiaryText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        In a meeting
-        <div
-          hidden={true}
-          id="tooltip9"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          In a meeting
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-optionalText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Available at 4:00pm
-        <div
-          hidden={true}
-          id="tooltip10"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Available at 4:00pm
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Persona renders correctly with onRender callback 1`] = `
-<div
-  className=
-      ms-Persona
-      ms-Persona--size100
-      ms-Persona--blocked
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        box-shadow: none;
-        box-sizing: border-box;
-        color: #323130;
-        display: flex;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100px;
-        margin-bottom: 0px;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        min-width: 100px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-        padding-right: 0px;
-        padding-top: 0px;
-        position: relative;
-      }
-      & .contextualHost {
-        display: none;
-      }
->
-  <div
-    className=
-        ms-Persona-coin
-        ms-Persona--size100
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-    role="presentation"
-  >
-    <div
-      className=
-          ms-Persona-imageArea
-          {
-            flex: 0 0 auto;
-            height: 100px;
-            position: relative;
-            text-align: center;
-            width: 100px;
-          }
-      role="presentation"
-    >
-      <div
-        className=
-            ms-Image
-            ms-Persona-image
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              border-radius: 50%;
-              border: 0px;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 100px;
-              left: 0px;
-              margin-right: 10px;
-              overflow: hidden;
-              perspective: 1px;
-              position: absolute;
-              top: 0px;
-              width: 100px;
-            }
-        style={
-          Object {
-            "height": 100,
-            "width": 100,
-          }
-        }
-      >
-        <img
-          alt=""
-          className=
-              ms-Image-image
-              ms-Image-image--cover
-              ms-Image-image--portrait
-              is-notLoaded
-              is-fadeIn
-              {
-                display: block;
-                height: 100%;
-                object-fit: cover;
-                opacity: 0;
-                width: 100%;
-              }
-          onError={[Function]}
-          onLoad={[Function]}
-          src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-male.png"
-        />
-      </div>
-      <div
-        className=
-            ms-Persona-presence
-            {
-              -ms-high-contrast-adjust: none;
-              background-clip: border-box;
-              background-color: #ffffff;
-              border-radius: 50%;
-              border: 2px solid #ffffff;
-              bottom: -2px;
-              box-sizing: content-box;
-              forced-color-adjust: none;
-              height: 28px;
-              position: absolute;
-              right: -2px;
-              text-align: center;
-              top: auto;
-              width: 28px;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              background-color: WindowText;
-              border-color: Window;
-            }
-            &:after {
-              background-color: #C43148;
-              content: "";
-              height: 2px;
-              left: 0px;
-              position: absolute;
-              top: 50%;
-              transform: translateY(-50%) rotate(-45deg);
-              width: 100%;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:after {
-              background-color: Window;
-              left: 2px;
-              width: calc(100% - 4px);
-            }
-            &:before {
-              border-radius: 50%;
-              border: 2px solid #C43148;
-              box-sizing: border-box;
-              content: "";
-              height: 100%;
-              left: 0px;
-              position: absolute;
-              top: 0px;
-              width: 100%;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:before {
-              border-color: Window;
-              height: calc(100% - 2px);
-              left: 1px;
-              top: 1px;
-              width: calc(100% - 2px);
-            }
-        role="presentation"
-      >
-        <i
-          aria-hidden={true}
-          className=
-              ms-Icon-placeHolder
-              ms-Persona-presenceIcon
-              {
-                color: #ffffff;
-                display: inline-block;
-                font-size: 14px;
-                line-height: 28px;
-                vertical-align: top;
-                width: 1em;
-              }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: Window;
-              }
-          data-icon-name=""
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Persona-details
-        {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          min-width: 0px;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 24px;
-          padding-top: 0;
-          text-align: left;
-          width: 100%;
-        }
-  >
-    <div
-      className=
-          ms-Persona-primaryText
-          {
-            color: #323130;
-            font-size: 20px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          &:hover {
-            color: #201f1e;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Swapnil Vaibhav
-        <div
-          hidden={true}
-          id="tooltip11"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Swapnil Vaibhav
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-secondaryText
-          {
-            color: #605e5c;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Software Engineer
-        <div
-          hidden={true}
-          id="tooltip12"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Software Engineer
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-tertiaryText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        In a meeting
-        <div
-          hidden={true}
-          id="tooltip13"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          In a meeting
-        </div>
-      </div>
-    </div>
-    <div
-      className=
-          ms-Persona-optionalText
-          {
-            color: #605e5c;
-            display: block;
-            font-size: 14px;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-      dir="auto"
-    >
-      <div
-        className=
-            ms-TooltipHost
-            {
-              display: inline;
-            }
-        onBlurCapture={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        role="none"
-      >
-        Available at 4:00pm
-        <div
-          hidden={true}
-          id="tooltip14"
-          style={
-            Object {
-              "border": 0,
-              "height": 1,
-              "margin": -1,
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "whiteSpace": "nowrap",
-              "width": 1,
-            }
-          }
-        >
-          Available at 4:00pm
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`PersonaCoin does not render the initials when showInitialsUntilImageLoads is false 1`] = `
 <div
   className=
diff --git a/packages/react/src/components/Persona/test-utils.tsx b/packages/react/src/components/Persona/test-utils.tsx
new file mode 100644
index 0000000000000..441f8e941bcc8
--- /dev/null
+++ b/packages/react/src/components/Persona/test-utils.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IRenderFunction } from '../../Utilities';
+import type { IPersonaProps, IPersonaSharedProps } from './index';
+
+/**
+ * function to override the default onRender callbacks
+ */
+export const wrapPersona = (
+  example: IPersonaSharedProps,
+  shouldWrapPersonaCoin: boolean = false,
+): ((coinProps: IPersonaProps, defaultRenderer: IRenderFunction<IPersonaProps>) => JSX.Element | null) => {
+  return (coinProps, defaultCoinRenderer): JSX.Element | null => {
+    return shouldWrapPersonaCoin ? (
+      <span id="persona-coin-container">{defaultCoinRenderer(coinProps)}</span>
+    ) : (
+      defaultCoinRenderer(coinProps)
+    );
+  };
+};