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.