chore(react-avatar): Adding unit and vr tests for AvatarGroup

apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx

@@ -0,0 +1,91 @@
+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<AvatarGroupProps> = props => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px' }}>
+      {sizes.map(size => (
+        <AvatarGroup key={size} size={size as AvatarGroupProps['size']} {...props}>
+          {names.map(name => (
+            <AvatarGroupItem key={name} name={name} />
+          ))}
+        </AvatarGroup>
+      ))}
+    </div>
+  );
+};
+
+// Non-interactive stories
+storiesOf('AvatarGroup Converged', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+  ))
+  .addStory('basic', () => <AvatarGroupList />, {
+    includeRtl: true,
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('layoutPie', () => <AvatarGroupList layout="pie" />)
+  .addStory('layoutStack', () => <AvatarGroupList layout="stack" />)
+  .addStory('overflowIndicator', () => <AvatarGroupList overflowIndicator="icon" />);
+
+// Interactive stories
+storiesOf('AvatarGroup Converged', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <Screener steps={new Screener.Steps().click('#show-overflow').snapshot('overflowConentOpen').end()}>
+      {story()}
+    </Screener>
+  ))
+  .addStory(
+    'overflowContent',
+    () => (
+      <AvatarGroup overflowButton={{ id: 'show-overflow' }}>
+        {names.map(name => (
+          <AvatarGroupItem key={name} name={name} />
+        ))}
+      </AvatarGroup>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  );

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"
+}

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(
+      <AvatarGroup>
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByText('+5')).toBeTruthy();
+  });
+
+  it('renders an icon overflow indicator when size is less than 24', () => {
+    render(
+      <AvatarGroup size={20}>
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByRole('button').textContent).toBe('');
+  });
+
+  it('ignores maxAvatars when using ap pie layout', () => {
+    render(
+      <AvatarGroup layout="pie">
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    // 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(
+      <AvatarGroup>
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    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(
+      <AvatarGroup layout="pie">
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    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(
       <AvatarGroup>
         <AvatarGroupItem name="Katri Athokas" />
         <AvatarGroupItem name="Elvia Atkins" />
@@ -32,6 +141,25 @@ describe('AvatarGroup', () => {
         <AvatarGroupItem name="Kevin Sturgis" />
       </AvatarGroup>,
     );
-    expect(result.container).toMatchSnapshot();
+
+    expect(screen.getByRole('group').children.length).toBe(5);
+  });
+
+  it('handles custom maxAvatars', () => {
+    render(
+      <AvatarGroup maxAvatars={8}>
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByRole('group').children.length).toBe(8);
   });
 });