From acddfcbcce8cc7538843c600a1e35341f102c1c6 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 01:45:04 -0600 Subject: [PATCH 1/8] adding tests --- .../src/stories/Persona.stories.tsx | 57 ++++++++++++++++ .../src/components/Persona/Persona.test.tsx | 67 ++++++++++++++++++- .../src/components/Persona/usePersona.ts | 9 +++ 3 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 apps/vr-tests-react-components/src/stories/Persona.stories.tsx 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..e1bff7917e0b07 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -0,0 +1,57 @@ +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 => ( + + ))} + + )); 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..330fefa3724696 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,73 @@ -import { Persona } from './Persona'; +import * as React from 'react'; import { isConformant } from '../../common/isConformant'; +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: { + presence: { status: 'available' }, + name: 'Kevin Sturgis', + secondaryText: 'Software Engineer', + tertiaryText: 'Seattle, WA', + quaternaryText: 'Available at 4:00pm', + }, + expectedClassNames: { + root: personaClassNames.root, + avatar: personaClassNames.avatar, + presence: personaClassNames.presence, + primaryText: personaClassNames.primaryText, + secondaryText: personaClassNames.secondaryText, + tertiaryText: personaClassNames.tertiaryText, + quaternaryText: personaClassNames.quaternaryText, + }, + }, + { + props: { + name: 'Kevin Sturgis', + secondaryText: 'Software Engineer', + tertiaryText: 'Seattle, WA', + }, + expectedClassNames: { + root: personaClassNames.root, + avatar: personaClassNames.avatar, + primaryText: personaClassNames.primaryText, + secondaryText: personaClassNames.secondaryText, + tertiaryText: personaClassNames.tertiaryText, + }, + }, + { + props: { + presenceOnly: true, + presence: { status: 'available' }, + name: 'Kevin Sturgis', + secondaryText: 'Software Engineer', + }, + expectedClassNames: { + root: personaClassNames.root, + presence: personaClassNames.presence, + primaryText: personaClassNames.primaryText, + secondaryText: personaClassNames.secondaryText, + }, + }, + ], + }, + }); + + it('passes name to primaryText if no primaryText is provided', () => { + render(); + expect(screen.queryByText('Kevin Sturgis')).toBeTruthy(); + }); + + it('uses 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..db4820d916087e 100644 --- a/packages/react-components/react-persona/src/components/Persona/usePersona.ts +++ b/packages/react-components/react-persona/src/components/Persona/usePersona.ts @@ -3,6 +3,8 @@ import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import { PresenceBadge, PresenceBadgeProps } from '@fluentui/react-badge'; import type { PersonaProps, PersonaState } from './Persona.types'; +import { personaClassNames } from './usePersonaStyles'; +import { mergeClasses } from '@griffel/react'; /** * Create the state required to render Persona. @@ -76,6 +78,13 @@ export const usePersona_unstable = (props: PersonaProps, ref: React.Ref Date: Thu, 29 Sep 2022 02:28:38 -0600 Subject: [PATCH 2/8] fixing test --- apps/vr-tests-react-components/package.json | 1 + .../vr-tests-react-components/src/stories/Persona.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 903941d89ea497..0729a4aa526408 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -31,6 +31,7 @@ "@fluentui/react-label": "^9.0.6", "@fluentui/react-link": "^9.0.6", "@fluentui/react-menu": "^9.2.1", + "@fluentui/react-persona": "9.0.0-alpha.0", "@fluentui/react-popover": "^9.1.1", "@fluentui/react-positioning": "^9.2.0", "@fluentui/react-provider": "^9.1.2", diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index e1bff7917e0b07..8236bfe7cb9833 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -44,14 +44,14 @@ storiesOf('Persona Converged', module) .addStory('size-avatar', () => ( <> {avatarSizes.map(size => ( - + ))} )) .addStory('size-presence', () => ( <> {badgeSizes.map(size => ( - + ))} )); From 5007895ff4bc71253e23387f073dc035a4ef80d9 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 10:13:07 -0600 Subject: [PATCH 3/8] fixing stories wrapper --- apps/vr-tests-react-components/src/stories/Persona.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index 8236bfe7cb9833..c21614f4b5cbcb 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -12,7 +12,7 @@ storiesOf('Persona Converged', module) .addDecorator(story => (
{story()}
From a6306f09d058ab6e98e48ea7b5d28d10e6ac0e6b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 10:54:18 -0600 Subject: [PATCH 4/8] adding more examples --- .../src/stories/Persona.stories.tsx | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index c21614f4b5cbcb..0afa3f7ae277a4 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -44,14 +44,39 @@ storiesOf('Persona Converged', module) .addStory('size-avatar', () => ( <> {avatarSizes.map(size => ( - + ))} )) .addStory('size-presence', () => ( <> {badgeSizes.map(size => ( - + ))} + )) + .addStory('scaling', () => ( + <> + + + + + )); From fed94efeadbbfff88e37488c7d25e87ab42a0360 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 14:32:09 -0600 Subject: [PATCH 5/8] updating wrapper --- .../src/stories/Persona.stories.tsx | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index 0afa3f7ae277a4..301444b78b22e3 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -10,10 +10,7 @@ const badgeSizes: BadgeProps['size'][] = ['tiny', 'extra-small', 'small', 'mediu storiesOf('Persona Converged', module) .addDecorator(story => ( -
+
{story()}
)) @@ -23,33 +20,45 @@ storiesOf('Persona Converged', module) .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', () => ( - <> +
- +
)); From d321c29e883062b5bd92804b5a4ef1c2dc0601b9 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 15:38:32 -0600 Subject: [PATCH 6/8] cleaning up imports --- .../react-persona/src/components/Persona/usePersona.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 db4820d916087e..bfcd2bed44e005 100644 --- a/packages/react-components/react-persona/src/components/Persona/usePersona.ts +++ b/packages/react-components/react-persona/src/components/Persona/usePersona.ts @@ -1,10 +1,12 @@ 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 type { PersonaProps, PersonaState } from './Persona.types'; -import { personaClassNames } from './usePersonaStyles'; import { mergeClasses } from '@griffel/react'; +import { personaClassNames } from './usePersonaStyles'; +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. From c7353e5433c7373005f8ceb2631443fc951de9c4 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 3 Oct 2022 09:52:43 -0600 Subject: [PATCH 7/8] adding requested changeS --- .../src/components/Persona/Persona.test.tsx | 39 ++++--------------- .../src/components/Persona/usePersona.ts | 9 ----- 2 files changed, 7 insertions(+), 41 deletions(-) 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 330fefa3724696..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,5 +1,6 @@ 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'; @@ -12,35 +13,12 @@ describe('Persona', () => { 'has-static-classnames': [ { props: { - presence: { status: 'available' }, name: 'Kevin Sturgis', secondaryText: 'Software Engineer', tertiaryText: 'Seattle, WA', - quaternaryText: 'Available at 4:00pm', - }, - expectedClassNames: { - root: personaClassNames.root, - avatar: personaClassNames.avatar, - presence: personaClassNames.presence, - primaryText: personaClassNames.primaryText, - secondaryText: personaClassNames.secondaryText, - tertiaryText: personaClassNames.tertiaryText, - quaternaryText: personaClassNames.quaternaryText, - }, - }, - { - props: { - name: 'Kevin Sturgis', - secondaryText: 'Software Engineer', - tertiaryText: 'Seattle, WA', - }, - expectedClassNames: { - root: personaClassNames.root, - avatar: personaClassNames.avatar, - primaryText: personaClassNames.primaryText, - secondaryText: personaClassNames.secondaryText, - tertiaryText: personaClassNames.tertiaryText, + quaternaryText: 'Microsoft', }, + expectedClassNames: omit(personaClassNames, ['presence']), }, { props: { @@ -48,13 +26,10 @@ describe('Persona', () => { presence: { status: 'available' }, name: 'Kevin Sturgis', secondaryText: 'Software Engineer', + tertiaryText: 'Available', + quaternaryText: 'Microsoft', }, - expectedClassNames: { - root: personaClassNames.root, - presence: personaClassNames.presence, - primaryText: personaClassNames.primaryText, - secondaryText: personaClassNames.secondaryText, - }, + expectedClassNames: omit(personaClassNames, ['avatar']), }, ], }, @@ -65,7 +40,7 @@ describe('Persona', () => { expect(screen.queryByText('Kevin Sturgis')).toBeTruthy(); }); - it('uses ignores name when primaryText is provided', () => { + 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 bfcd2bed44e005..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,6 @@ import * as React from 'react'; import { Avatar } from '@fluentui/react-avatar'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import { mergeClasses } from '@griffel/react'; -import { personaClassNames } from './usePersonaStyles'; import { PresenceBadge } from '@fluentui/react-badge'; import type { AvatarProps } from '@fluentui/react-avatar'; import type { PersonaProps, PersonaState } from './Persona.types'; @@ -80,13 +78,6 @@ export const usePersona_unstable = (props: PersonaProps, ref: React.Ref Date: Mon, 3 Oct 2022 10:09:45 -0600 Subject: [PATCH 8/8] change file --- ...react-persona-4cad608c-a53b-4bca-9176-f15a73195704.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-persona-4cad608c-a53b-4bca-9176-f15a73195704.json 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" +}