diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 5351f46a37840b..66c3ac40876f01 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -30,9 +30,10 @@
"@fluentui/react-image": "^9.0.6",
"@fluentui/react-input": "^9.2.0",
"@fluentui/react-label": "^9.0.6",
- "@fluentui/react-link": "^9.0.7",
- "@fluentui/react-menu": "^9.2.2",
- "@fluentui/react-popover": "^9.1.2",
+ "@fluentui/react-link": "^9.0.6",
+ "@fluentui/react-menu": "^9.2.1",
+ "@fluentui/react-persona": "^9.0.0",
+ "@fluentui/react-popover": "^9.1.1",
"@fluentui/react-positioning": "^9.2.0",
"@fluentui/react-provider": "^9.1.3",
"@fluentui/react-radio": "^9.0.7",
diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
new file mode 100644
index 00000000000000..301444b78b22e3
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { Persona } from '@fluentui/react-persona';
+import { AvatarSizes } from '@fluentui/react-avatar';
+import { BadgeProps } from '@fluentui/react-badge/src/Badge';
+
+const avatarSizes: AvatarSizes[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
+const badgeSizes: BadgeProps['size'][] = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'];
+
+storiesOf('Persona Converged', module)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .addDecorator(story => (
+ {story()}
+ ))
+ .addStory(
+ 'basic',
+ () => (
+
+ ),
+ { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
+ )
+ .addStory('single-double-lines', () => (
+
+ ))
+ .addStory('size-avatar', () => (
+
+ {avatarSizes.map(size => (
+
+ ))}
+
+ ))
+ .addStory('size-presence', () => (
+
+ {badgeSizes.map(size => (
+
+ ))}
+
+ ))
+ .addStory('scaling', () => (
+
+ ));
diff --git a/change/@fluentui-react-persona-4cad608c-a53b-4bca-9176-f15a73195704.json b/change/@fluentui-react-persona-4cad608c-a53b-4bca-9176-f15a73195704.json
new file mode 100644
index 00000000000000..7dbb8c9a01614d
--- /dev/null
+++ b/change/@fluentui-react-persona-4cad608c-a53b-4bca-9176-f15a73195704.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "chore: Add unit and conformance tests.",
+ "packageName": "@fluentui/react-persona",
+ "email": "esteban.230@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx b/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx
index a02701c4ca6e5d..e38bfa163a4d5f 100644
--- a/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx
+++ b/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx
@@ -1,10 +1,48 @@
-import { Persona } from './Persona';
+import * as React from 'react';
import { isConformant } from '../../common/isConformant';
+import { omit } from '@fluentui/react-utilities/src/utils/omit';
+import { Persona } from './Persona';
+import { personaClassNames } from './usePersonaStyles';
+import { render, screen } from '@testing-library/react';
describe('Persona', () => {
isConformant({
Component: Persona,
displayName: 'Persona',
- disabledTests: ['component-has-static-classnames-object'],
+ testOptions: {
+ 'has-static-classnames': [
+ {
+ props: {
+ name: 'Kevin Sturgis',
+ secondaryText: 'Software Engineer',
+ tertiaryText: 'Seattle, WA',
+ quaternaryText: 'Microsoft',
+ },
+ expectedClassNames: omit(personaClassNames, ['presence']),
+ },
+ {
+ props: {
+ presenceOnly: true,
+ presence: { status: 'available' },
+ name: 'Kevin Sturgis',
+ secondaryText: 'Software Engineer',
+ tertiaryText: 'Available',
+ quaternaryText: 'Microsoft',
+ },
+ expectedClassNames: omit(personaClassNames, ['avatar']),
+ },
+ ],
+ },
+ });
+
+ it('passes name to primaryText if no primaryText is provided', () => {
+ render();
+ expect(screen.queryByText('Kevin Sturgis')).toBeTruthy();
+ });
+
+ it('ignores name when primaryText is provided', () => {
+ render();
+ expect(screen.queryByText('Kevin Sturgis')).toBeFalsy();
+ expect(screen.queryByText('Custom Primary Text')).toBeTruthy();
});
});
diff --git a/packages/react-components/react-persona/src/components/Persona/usePersona.ts b/packages/react-components/react-persona/src/components/Persona/usePersona.ts
index 19363c236580bd..864e2c179f882c 100644
--- a/packages/react-components/react-persona/src/components/Persona/usePersona.ts
+++ b/packages/react-components/react-persona/src/components/Persona/usePersona.ts
@@ -1,8 +1,10 @@
import * as React from 'react';
-import { Avatar, AvatarProps } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-avatar';
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { PresenceBadge, PresenceBadgeProps } from '@fluentui/react-badge';
+import { PresenceBadge } from '@fluentui/react-badge';
+import type { AvatarProps } from '@fluentui/react-avatar';
import type { PersonaProps, PersonaState } from './Persona.types';
+import type { PresenceBadgeProps } from '@fluentui/react-badge';
/**
* Create the state required to render Persona.