chore(react-persona): Add vr, conformance, and unit tests

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",

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 => (
+    <div className="testWrapper" style={{ maxWidth: '750px' }}>
+      {story()}
+    </div>
+  ))
+  .addDecorator(story => (
+    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+  ))
+  .addStory(
+    'basic',
+    () => (
+      <div
+        className="testWrapper"
+        style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+      >
+        <Persona name="Kevin Sturgis" secondaryText="Available" />
+        <Persona name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
+        <Persona presenceOnly name="Kevin Sturgis" secondaryText="Available" presence={{ status: 'available' }} />
+      </div>
+    ),
+    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
+  )
+  .addStory('single-double-lines', () => (
+    <div
+      className="testWrapper"
+      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+    >
+      <Persona name="Kevin Sturgis" />
+      <Persona presence={{ status: 'available' }} name="Kevin Sturgis" />
+      <Persona presenceOnly presence={{ status: 'available' }} name="Kevin Sturgis" />
+      <Persona name="Kevin Sturgis" secondaryText="Available" />
+      <Persona presence={{ status: 'available' }} name="Kevin Sturgis" secondaryText="Available" />
+      <Persona presenceOnly presence={{ status: 'available' }} name="Kevin Sturgis" secondaryText="Available" />
+    </div>
+  ))
+  .addStory('size-avatar', () => (
+    <div
+      className="testWrapper"
+      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+    >
+      {avatarSizes.map(size => (
+        <Persona avatar={{ size }} name="Kevin Sturgis" secondaryText="Software Engineer" key={size} />
+      ))}
+    </div>
+  ))
+  .addStory('size-presence', () => (
+    <div
+      className="testWrapper"
+      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+    >
+      {badgeSizes.map(size => (
+        <Persona
+          presenceOnly
+          presence={{ size, status: 'available' }}
+          name="Kevin Sturgis"
+          secondaryText="Available"
+          key={size}
+        />
+      ))}
+    </div>
+  ))
+  .addStory('scaling', () => (
+    <div
+      className="testWrapper"
+      style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '10px', maxWidth: '750px' }}
+    >
+      <Persona name="Kevin Sturgis" presence={{ status: 'away' }} />
+      <Persona name="Kevin Sturgis" presence={{ status: 'away' }} secondaryText="Away" />
+      <Persona
+        name="Kevin Sturgis"
+        presence={{ status: 'away' }}
+        secondaryText="Away"
+        tertiaryText="Software Engineer"
+      />
+      <Persona
+        name="Kevin Sturgis"
+        presence={{ status: 'away' }}
+        secondaryText="Away"
+        tertiaryText="Software Engineer"
+        quaternaryText="Last available 4:00 pm"
+      />
+    </div>
+  ));

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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(<Persona name="Kevin Sturgis" />);
+    expect(screen.queryByText('Kevin Sturgis')).toBeTruthy();
+  });
+
+  it('ignores name when primaryText is provided', () => {
+    render(<Persona name="Kevin Sturgis" primaryText="Custom Primary Text" />);
+    expect(screen.queryByText('Kevin Sturgis')).toBeFalsy();
+    expect(screen.queryByText('Custom Primary Text')).toBeTruthy();
   });
 });

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.