From 3a44a6c21838d7c9ef5cc009bdd02bd28dd348f5 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 13:34:26 -0600 Subject: [PATCH 01/19] adding testing to AvatarGroup --- .../src/stories/AvatarGroup.stories.tsx | 86 +++++++++++ .../react-avatar/etc/react-avatar.api.md | 2 - .../AvatarGroup/AvatarGroup.test.tsx | 140 +++++++++++++++++- .../__snapshots__/AvatarGroup.test.tsx.snap | 87 ----------- .../react-badge/etc/react-badge.api.md | 2 - 5 files changed, 220 insertions(+), 97 deletions(-) create mode 100644 apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx delete mode 100644 packages/react-components/react-avatar/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx new file mode 100644 index 00000000000000..9582c87142ed0f --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import Screener from 'screener-storybook/src/screener'; +import { AvatarGroup, AvatarGroupItem, AvatarGroupProps } from '@fluentui/react-avatar'; +import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; + +const names = [ + 'Katri Athokas', + 'Elvia Atkins', + 'Mauricio August', + 'Colin Ballinger', + 'Lydia Bauer', + 'Amanda Brady', + 'Henry Brill', + 'Celeste Burton', + 'Robin Counts', + 'Tim Deboer', + 'Cameron Evans', + 'Isaac Fielder', + 'Cecil Folk', + 'Miguel Garcia', + 'Wanda Howard', + 'Mona Kane', + 'Kat Larsson', + 'Ashley McCarthy', + 'Johnie McConnell', + 'Allan Munger', + 'Erik Nason', + 'Kristin Patterson', + 'Daisy Phillips', + 'Carole Poland', + 'Carlos Slattery', + 'Robert Tolbert', + 'Kevin Sturgis', + 'Charlotte Waltson', + 'Elliot Woodward', +]; + +const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; + +const AvatarGroupList: React.FC = props => { + return ( +
+ {sizes.map(size => ( + + {names.map(name => ( + + ))} + + ))} +
+ ); +}; + +// Non-interactive stories +storiesOf('AvatarGroup Converged', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => ( + {story()} + )) + .addStory('basic', () => , { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('layoutPie', () => ) + .addStory('layoutStack', () => ) + .addStory('overflowIndicator', () => ); + +// Interactive stories +storiesOf('AvatarGroup Converged', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => ( + + {story()} + + )) + .addStory('overflowContent', () => ( + + {names.map(name => ( + + ))} + + )); diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md index 59bcfcd878bdc5..d03f2802ffeb5b 100644 --- a/packages/react-components/react-avatar/etc/react-avatar.api.md +++ b/packages/react-components/react-avatar/etc/react-avatar.api.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx index 50ff191fa4ac91..9c2a7759c5bf49 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx @@ -2,24 +2,133 @@ import * as React from 'react'; import { AvatarGroup } from './AvatarGroup'; import { AvatarGroupItem } from '../AvatarGroupItem'; import { isConformant } from '../../common/isConformant'; -import { render } from '@testing-library/react'; +import { render, screen, within } from '@testing-library/react'; describe('AvatarGroup', () => { - // TODO: Remove component-has-static-classnames-object from disabled tests. isConformant({ Component: AvatarGroup, displayName: 'AvatarGroup', disabledTests: [ 'component-has-static-classname', 'component-has-static-classname-exported', + // AvatarGroup's overflowContent is rendered in a portal, therefore this test won't work 'component-has-static-classnames-object', ], }); - // TODO add more tests here, and create visual regression tests in /apps/vr-tests + it('renders an overflow indicator when AvatarGroupItems overflow', () => { + render( + + + + + + + + + + + , + ); + + expect(screen.getByText('+5')).toBeTruthy(); + }); + + it('renders an icon overflow indicator when size is less than 24', () => { + render( + + + + + + + + + + + , + ); + + expect(screen.getByRole('button').textContent).toBe(''); + }); + + it('ignores maxAvatars when using ap pie layout', () => { + render( + + + + + + + + + + + , + ); + + // maxAvatars is 3 when the layout is pie, but it also renders a transparent button + // so it needs to check for 3 children + 1 button + expect(screen.getByRole('group').children.length).toBe(4); + }); + + it('renders the avatars in the correct order when using a stack or spread layout', () => { + render( + + + + + + + + + + + , + ); + + const avatarChildren = screen.getByRole('group').children; + + expect(avatarChildren.item(0)?.textContent).toBe('AM'); + expect(avatarChildren.item(1)?.textContent).toBe('DP'); + expect(avatarChildren.item(2)?.textContent).toBe('RT'); + expect(avatarChildren.item(3)?.textContent).toBe('KS'); + }); + + it('renders all AvatarGroupItems inside the overflowContent when using a pie layout', () => { + const { baseElement } = render( + + + + + + + + + + + , + ); + + const button = screen.getByRole('button'); + button.click(); + // overflowContent is rendered in a portal, so using baseElement let's you access its content + const avatarGroupItems = within(baseElement as HTMLElement).getAllByRole('listitem'); + const avatarGroupItemAvatars = avatarGroupItems.map(item => within(item).getByRole('img')); - it('renders a default state', () => { - const result = render( + expect(avatarGroupItemAvatars[0].textContent).toBe('KA'); + expect(avatarGroupItemAvatars[1].textContent).toBe('EA'); + expect(avatarGroupItemAvatars[2].textContent).toBe('CE'); + expect(avatarGroupItemAvatars[3].textContent).toBe('WH'); + expect(avatarGroupItemAvatars[4].textContent).toBe('MK'); + expect(avatarGroupItemAvatars[5].textContent).toBe('AM'); + expect(avatarGroupItemAvatars[6].textContent).toBe('DP'); + expect(avatarGroupItemAvatars[7].textContent).toBe('RT'); + expect(avatarGroupItemAvatars[8].textContent).toBe('KS'); + }); + + it('handles maxAvatars', () => { + render( @@ -32,6 +141,25 @@ describe('AvatarGroup', () => { , ); - expect(result.container).toMatchSnapshot(); + + expect(screen.getByRole('group').children.length).toBe(5); + }); + + it('handles custom maxAvatars', () => { + render( + + + + + + + + + + + , + ); + + expect(screen.getByRole('group').children.length).toBe(8); }); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/react-components/react-avatar/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap deleted file mode 100644 index bfa93f39543024..00000000000000 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +++ /dev/null @@ -1,87 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AvatarGroup renders a default state 1`] = ` -
-
-
- - - AM - - -
-
- - - DP - - -
-
- - - RT - - -
-
- - - KS - - -
- -
-
-`; diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md index e7b0bdb0adc5d3..d465f365e1742d 100644 --- a/packages/react-components/react-badge/etc/react-badge.api.md +++ b/packages/react-components/react-badge/etc/react-badge.api.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; From 88a1d6e455c833832d73dd92d93b75dab163de68 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 13:46:32 -0600 Subject: [PATCH 02/19] restore badge api file --- packages/react-components/react-badge/etc/react-badge.api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md index d465f365e1742d..e7b0bdb0adc5d3 100644 --- a/packages/react-components/react-badge/etc/react-badge.api.md +++ b/packages/react-components/react-badge/etc/react-badge.api.md @@ -4,6 +4,8 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; From c352c71ff430979005b926abc2116226ae899001 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 13:47:51 -0600 Subject: [PATCH 03/19] change fileS --- ...-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json diff --git a/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json b/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json new file mode 100644 index 00000000000000..6b4b3a53ac4477 --- /dev/null +++ b/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Adding unit tests for AvatarGroup. ", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From 24dd47604ffb3150445f88f608d96fd8b957a865 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 14:57:04 -0600 Subject: [PATCH 04/19] reverting api file --- packages/react-components/react-avatar/etc/react-avatar.api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md index d03f2802ffeb5b..59bcfcd878bdc5 100644 --- a/packages/react-components/react-avatar/etc/react-avatar.api.md +++ b/packages/react-components/react-avatar/etc/react-avatar.api.md @@ -4,6 +4,8 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; From 4e958740d030ff2b0a81c8afe4e8beba187ae904 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 15:14:35 -0600 Subject: [PATCH 05/19] fixing interactive story in vr-tests --- .../src/stories/AvatarGroup.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 9582c87142ed0f..6627607588b0eb 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -72,13 +72,13 @@ storiesOf('AvatarGroup Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( {story()} )) .addStory('overflowContent', () => ( - + {names.map(name => ( ))} From 71002e549f7ee05b6f37215bdb8043f253067e8b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 16:54:13 -0600 Subject: [PATCH 06/19] fixing cropping of interactive story --- .../src/stories/AvatarGroup.stories.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 6627607588b0eb..60d8eabdba4343 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -71,16 +71,21 @@ storiesOf('AvatarGroup Converged', module) storiesOf('AvatarGroup Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - + {story()} )) - .addStory('overflowContent', () => ( - - {names.map(name => ( - - ))} - - )); + .addStory( + 'overflowContent', + () => ( + + {names.map(name => ( + + ))} + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ); From eee2ddc392ba256bd44e8fa09fc71b6f645bdc2f Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Jun 2022 17:18:38 -0600 Subject: [PATCH 07/19] possible border radius fix --- .../src/components/AvatarGroup/useAvatarGroupStyles.ts | 2 +- .../src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index 047014c096cf61..fbdd89498531b1 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -47,7 +47,7 @@ const useOverflowButtonStyles = makeStyles({ color: tokens.colorNeutralForeground1, backgroundColor: tokens.colorNeutralBackground1, ...shorthands.borderColor(tokens.colorNeutralStroke1), - ...shorthands.borderRadius(tokens.borderRadiusCircular), + ...shorthands.borderRadius('50%'), ...shorthands.borderStyle('solid'), ...shorthands.padding(0), }, diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index db27f04cfb75dc..faea4c5019670f 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -28,7 +28,7 @@ const useRootStyles = makeStyles({ ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), }, nonOverflowItem: { - ...shorthands.borderRadius(tokens.borderRadiusCircular), + ...shorthands.borderRadius('50%'), }, }); From 63f5ace42fb69c400085425030b3c4f716ba60c8 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 15 Jun 2022 08:54:26 -0600 Subject: [PATCH 08/19] removing unnecessary div --- .../src/stories/AvatarGroup.stories.tsx | 4 ++-- .../src/components/AvatarGroup/useAvatarGroupStyles.ts | 2 +- .../components/AvatarGroupItem/useAvatarGroupItemStyles.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 60d8eabdba4343..a33e698949ad31 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -40,7 +40,7 @@ const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; const AvatarGroupList: React.FC = props => { return ( -
+ <> {sizes.map(size => ( {names.map(name => ( @@ -48,7 +48,7 @@ const AvatarGroupList: React.FC = props => { ))} ))} -
+ ); }; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index fbdd89498531b1..047014c096cf61 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -47,7 +47,7 @@ const useOverflowButtonStyles = makeStyles({ color: tokens.colorNeutralForeground1, backgroundColor: tokens.colorNeutralBackground1, ...shorthands.borderColor(tokens.colorNeutralStroke1), - ...shorthands.borderRadius('50%'), + ...shorthands.borderRadius(tokens.borderRadiusCircular), ...shorthands.borderStyle('solid'), ...shorthands.padding(0), }, diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index faea4c5019670f..db27f04cfb75dc 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -28,7 +28,7 @@ const useRootStyles = makeStyles({ ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), }, nonOverflowItem: { - ...shorthands.borderRadius('50%'), + ...shorthands.borderRadius(tokens.borderRadiusCircular), }, }); From 4e116a6fdd6e2b8c07592032846c15cea6e5222a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 15 Jun 2022 09:26:06 -0600 Subject: [PATCH 09/19] reverting changes --- .../src/stories/AvatarGroup.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index a33e698949ad31..60d8eabdba4343 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -40,7 +40,7 @@ const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; const AvatarGroupList: React.FC = props => { return ( - <> +
{sizes.map(size => ( {names.map(name => ( @@ -48,7 +48,7 @@ const AvatarGroupList: React.FC = props => { ))} ))} - +
); }; From a7780101058ef030bf21a0e45601a829130425ad Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 15 Jun 2022 16:11:13 -0600 Subject: [PATCH 10/19] possible fix --- .../useAvatarGroupItemStyles.ts | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index db27f04cfb75dc..1dae51c9aa3e3f 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -98,6 +98,15 @@ const useStackStyles = makeStyles({ base: { outlineColor: tokens.colorNeutralBackground2, outlineStyle: 'solid', + + // this is needed for webkit browsers, otherwise the outline won't be circular + '&::after': { + content: "''", + ...shorthands.borderRadius(tokens.borderRadiusCircular), + height: '100%', + position: 'absolute', + width: '100%', + }, }, thick: { outlineWidth: tokens.strokeWidthThick }, thicker: { outlineWidth: tokens.strokeWidthThicker }, @@ -191,13 +200,13 @@ export const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: if (layout === 'stack') { layoutClasses.push(stackStyles.base); - if (size < 56) { - layoutClasses.push(stackStyles.thick); - } else if (size < 72) { - layoutClasses.push(stackStyles.thicker); - } else { - layoutClasses.push(stackStyles.thickest); - } + // if (size < 56) { + // layoutClasses.push(stackStyles.thick); + // } else if (size < 72) { + // layoutClasses.push(stackStyles.thicker); + // } else { + // layoutClasses.push(stackStyles.thickest); + // } if (size < 24) { layoutClasses.push(stackStyles.xxs); From 2b19bdb5b8edfeb73705c29b678bf30a172cfb5e Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 15 Jun 2022 18:10:39 -0600 Subject: [PATCH 11/19] sync --- .../AvatarGroup/useAvatarGroupStyles.ts | 1 + .../useAvatarGroupItemStyles.ts | 41 ++++++++++++------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index 047014c096cf61..7c15335fbc24a5 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -40,6 +40,7 @@ const useStyles = makeStyles({ const useOverflowButtonStyles = makeStyles({ base: { display: 'inline-flex', + // boxSizing: 'content-box', position: 'relative', flexShrink: 0, justifyContent: 'center', diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index 1dae51c9aa3e3f..f2a6aee223b2b6 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -96,21 +96,32 @@ const usePieStyles = makeStyles({ const useStackStyles = makeStyles({ base: { - outlineColor: tokens.colorNeutralBackground2, - outlineStyle: 'solid', - - // this is needed for webkit browsers, otherwise the outline won't be circular '&::after': { content: "''", ...shorthands.borderRadius(tokens.borderRadiusCircular), - height: '100%', position: 'absolute', + // outlineColor: tokens.colorNeutralBackground2, + outlineColor: 'red', + outlineStyle: 'solid', + height: '100%', width: '100%', }, }, - thick: { outlineWidth: tokens.strokeWidthThick }, - thicker: { outlineWidth: tokens.strokeWidthThicker }, - thickest: { outlineWidth: tokens.strokeWidthThickest }, + thick: { + '&::after': { + outlineWidth: tokens.strokeWidthThick, + }, + }, + thicker: { + '&::after': { + outlineWidth: tokens.strokeWidthThicker, + }, + }, + thickest: { + '&::after': { + outlineWidth: tokens.strokeWidthThickest, + }, + }, xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } }, xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } }, s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } }, @@ -200,13 +211,13 @@ export const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: if (layout === 'stack') { layoutClasses.push(stackStyles.base); - // if (size < 56) { - // layoutClasses.push(stackStyles.thick); - // } else if (size < 72) { - // layoutClasses.push(stackStyles.thicker); - // } else { - // layoutClasses.push(stackStyles.thickest); - // } + if (size < 56) { + layoutClasses.push(stackStyles.thick); + } else if (size < 72) { + layoutClasses.push(stackStyles.thicker); + } else { + layoutClasses.push(stackStyles.thickest); + } if (size < 24) { layoutClasses.push(stackStyles.xxs); From 67427091e8e75a12d2890f4c3d2e4ab4e3af1338 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 15 Jun 2022 20:37:09 -0600 Subject: [PATCH 12/19] reverting files to deal with issue in another PR --- .../AvatarGroup/useAvatarGroupStyles.ts | 1 - .../useAvatarGroupItemStyles.ts | 30 ++++--------------- 2 files changed, 5 insertions(+), 26 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index 7c15335fbc24a5..047014c096cf61 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -40,7 +40,6 @@ const useStyles = makeStyles({ const useOverflowButtonStyles = makeStyles({ base: { display: 'inline-flex', - // boxSizing: 'content-box', position: 'relative', flexShrink: 0, justifyContent: 'center', diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index f2a6aee223b2b6..db27f04cfb75dc 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -96,32 +96,12 @@ const usePieStyles = makeStyles({ const useStackStyles = makeStyles({ base: { - '&::after': { - content: "''", - ...shorthands.borderRadius(tokens.borderRadiusCircular), - position: 'absolute', - // outlineColor: tokens.colorNeutralBackground2, - outlineColor: 'red', - outlineStyle: 'solid', - height: '100%', - width: '100%', - }, - }, - thick: { - '&::after': { - outlineWidth: tokens.strokeWidthThick, - }, - }, - thicker: { - '&::after': { - outlineWidth: tokens.strokeWidthThicker, - }, - }, - thickest: { - '&::after': { - outlineWidth: tokens.strokeWidthThickest, - }, + outlineColor: tokens.colorNeutralBackground2, + outlineStyle: 'solid', }, + thick: { outlineWidth: tokens.strokeWidthThick }, + thicker: { outlineWidth: tokens.strokeWidthThicker }, + thickest: { outlineWidth: tokens.strokeWidthThickest }, xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } }, xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } }, s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } }, From 9956bd362f6c2219e6c43f1c8b98690382d5a841 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 17 Jun 2022 12:33:26 -0600 Subject: [PATCH 13/19] Update change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json Co-authored-by: Makoto Morimoto --- ...tui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json b/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json index 6b4b3a53ac4477..3ce8f528ae52b8 100644 --- a/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json +++ b/change/@fluentui-react-avatar-0ebe3e03-9d8f-48f7-a4c0-2a95b7014e2e.json @@ -1,7 +1,7 @@ { - "type": "prerelease", + "type": "none", "comment": "chore: Adding unit tests for AvatarGroup. ", "packageName": "@fluentui/react-avatar", "email": "esteban.230@hotmail.com", - "dependentChangeType": "patch" + "dependentChangeType": "none" } From 9b4bd3ff343e8f06ea30c3ddc1826c74a393f0f1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 17 Jun 2022 12:33:37 -0600 Subject: [PATCH 14/19] Update apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx Co-authored-by: Makoto Morimoto --- .../src/stories/AvatarGroup.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 60d8eabdba4343..edd2931cb664f4 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -71,7 +71,7 @@ storiesOf('AvatarGroup Converged', module) storiesOf('AvatarGroup Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - + {story()} )) From 233ae01f96e2c9be260c85199cdd7b16523db690 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 17 Jun 2022 12:33:48 -0600 Subject: [PATCH 15/19] Update packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx Co-authored-by: Sean Monahan --- .../src/components/AvatarGroup/AvatarGroup.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx index 9c2a7759c5bf49..40105d09dc6ff8 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx @@ -52,7 +52,7 @@ describe('AvatarGroup', () => { expect(screen.getByRole('button').textContent).toBe(''); }); - it('ignores maxAvatars when using ap pie layout', () => { + it('ignores maxAvatars when using pie layout', () => { render( From d8e1a19e9b5ea37056b6b9b53b45c46be19eb3e0 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 17 Jun 2022 14:00:16 -0600 Subject: [PATCH 16/19] covering stack and pie for rtl+HCM+dark mode --- .../src/stories/AvatarGroup.stories.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index edd2931cb664f4..293ce51d537682 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -63,8 +63,16 @@ storiesOf('AvatarGroup Converged', module) includeHighContrast: true, includeDarkMode: true, }) - .addStory('layoutPie', () => ) - .addStory('layoutStack', () => ) + .addStory('layoutPie', () => , { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('layoutStack', () => , { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }) .addStory('overflowIndicator', () => ); // Interactive stories From 7a64e8ba396bafdff03ac44260688fa9a8c37a3a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 17 Jun 2022 14:23:57 -0600 Subject: [PATCH 17/19] updating vr-tests --- .../src/stories/AvatarGroup.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 293ce51d537682..d6d7ef2145aabe 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -59,17 +59,14 @@ storiesOf('AvatarGroup Converged', module) {story()} )) .addStory('basic', () => , { - includeRtl: true, includeHighContrast: true, includeDarkMode: true, }) .addStory('layoutPie', () => , { - includeRtl: true, includeHighContrast: true, includeDarkMode: true, }) .addStory('layoutStack', () => , { - includeRtl: true, includeHighContrast: true, includeDarkMode: true, }) From 563c3ba083db5974e6041903f79aacabee988eab Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Thu, 23 Jun 2022 17:49:34 -0600 Subject: [PATCH 18/19] updating classname tests for AvatarGroup --- .../AvatarGroup/AvatarGroup.test.tsx | 49 +++++++++++++++++-- .../components/AvatarGroup/useAvatarGroup.tsx | 9 ---- .../AvatarGroupItem/AvatarGroupItem.test.tsx | 6 ++- 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx index 40105d09dc6ff8..afd352337a0650 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx @@ -2,7 +2,25 @@ import * as React from 'react'; import { AvatarGroup } from './AvatarGroup'; import { AvatarGroupItem } from '../AvatarGroupItem'; import { isConformant } from '../../common/isConformant'; -import { render, screen, within } from '@testing-library/react'; +import { render, RenderResult, screen, within } from '@testing-library/react'; +import { avatarGroupClassNames } from './useAvatarGroupStyles'; + +// testing-library's queryByRole function doesn't look inside portals +function queryByRoleList(result: RenderResult) { + const lists = result.baseElement.querySelectorAll('*[role="list"]'); + if (!lists?.length) { + return null; + } else { + expect(lists.length).toBe(1); + return lists.item(0) as HTMLElement; + } +} + +const getOverflowContentElement = (result: RenderResult) => { + // overflowButton needs to be clicked otherwise overflowContent won't be rendered. + result.queryByRole('button')?.click(); + return queryByRoleList(result)!; +}; describe('AvatarGroup', () => { isConformant({ @@ -11,9 +29,34 @@ describe('AvatarGroup', () => { disabledTests: [ 'component-has-static-classname', 'component-has-static-classname-exported', - // AvatarGroup's overflowContent is rendered in a portal, therefore this test won't work - 'component-has-static-classnames-object', + 'make-styles-overrides-win', ], + testOptions: { + 'has-static-classnames': [ + { + props: {}, + expectedClassNames: { + root: avatarGroupClassNames.root, + overflowButton: avatarGroupClassNames.overflowButton, + overflowContent: avatarGroupClassNames.overflowContent, + }, + getPortalElement: getOverflowContentElement, + }, + ], + }, + requiredProps: { + children: [ + , + , + , + , + , + , + , + , + , + ], + }, }); it('renders an overflow indicator when AvatarGroupItems overflow', () => { diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx index 048a3eeffd8ab0..cf87dc41e70776 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import { MoreHorizontalRegular } from '@fluentui/react-icons'; import { PopoverSurface } from '@fluentui/react-popover'; @@ -19,14 +18,6 @@ export const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref< const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props; const childrenArray = React.Children.toArray(children); - if ( - process.env.NODE_ENV !== 'production' && - childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem) - ) { - // eslint-disable-next-line no-console - console.warn("AvatarGroup's children must be of type AvatarGroupItems."); - } - let rootChildren = childrenArray; let overflowChildren; let overflowButtonChildren; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx index 35216e231fbc27..2298b41cba76fa 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx @@ -14,7 +14,11 @@ describe('AvatarGroupItem', () => { isConformant({ Component: AvatarGroupItem, displayName: 'AvatarGroupItem', - disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'], + disabledTests: [ + 'component-has-static-classname', + 'component-has-static-classname-exported', + 'make-styles-overrides-win', + ], primarySlot: 'avatar', renderOptions: { wrapper: ContextWrapper, From 8cad6e42c3da7dee89a8629bd302dbaa8e7d24c8 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Tue, 28 Jun 2022 12:59:56 -0600 Subject: [PATCH 19/19] adding color to diviers --- .../src/components/AvatarGroup/useAvatarGroupStyles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index 9b33bd69d5bf6b..ab5e115998e290 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -22,6 +22,7 @@ const useStyles = makeStyles({ }, pie: { clipPath: 'circle(50%)', + backgroundColor: tokens.colorTransparentStroke, '@media (forced-colors: active)': { backgroundColor: 'CanvasText', },