From 69f99423a1706d4db55cfc6eadd8ff0c0a918bb0 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 15 Mar 2020 19:57:08 +0100
Subject: [PATCH] add test case

---
 docs/pages/api-docs/avatar-group.md           |  4 +--
 .../src/AvatarGroup/AvatarGroup.d.ts          |  8 +++---
 .../src/AvatarGroup/AvatarGroup.js            | 26 +++++++++++++------
 .../src/AvatarGroup/AvatarGroup.test.js       | 16 ++++++++++++
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md
index 70d36efdf25dfe..bdd0d2e5ccb838 100644
--- a/docs/pages/api-docs/avatar-group.md
+++ b/docs/pages/api-docs/avatar-group.md
@@ -26,8 +26,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The avatars to stack. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | The spacing between avatars. A group with `small` spacing value has a larger overlap. |
-| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. |
+| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | Max avatars to show before +x. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | Spacing between avatars. |
 
 The `ref` is forwarded to the root element.
 
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
index bef1a9b5ba2292..62d7792bc53d98 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts
@@ -7,14 +7,14 @@ export interface AvatarGroupProps
    * The avatars to stack.
    */
   children: React.ReactNode;
-  /**
-   * Spacing between avatars.
-   */
-  spacing?: 'small' | 'medium' | number;
   /**
    * Max avatars to show before +x.
    */
   max?: number;
+  /**
+   * Spacing between avatars.
+   */
+  spacing?: 'small' | 'medium' | number;
 }
 
 export type AvatarGroupClassKey = 'root' | 'avatar';
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
index 4725cb1e84b4ef..273066efc309b9 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
@@ -23,7 +23,14 @@ export const styles = theme => ({
 });
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
-  const { children: childrenProp, classes, className, spacing = 'medium', max = 5, ...other } = props;
+  const {
+    children: childrenProp,
+    classes,
+    className,
+    spacing = 'medium',
+    max = 5,
+    ...other
+  } = props;
 
   const children = React.Children.toArray(childrenProp).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
@@ -54,14 +61,17 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
           },
         });
       })}
-      {extraAvatars ?
+      {extraAvatars ? (
         <Avatar
           className={classes.avatar}
           style={{
             zIndex: 0,
             marginLeft: spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing,
-          }}>+{extraAvatars}</Avatar>
-      : null}
+          }}
+        >
+          +{extraAvatars}
+        </Avatar>
+      ) : null}
     </div>
   );
 });
@@ -85,13 +95,13 @@ AvatarGroup.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * The spacing between avatars. A group with `small` spacing value has a larger overlap.
+   * Max avatars to show before +x.
    */
-  spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  max: PropTypes.number,
   /**
-   * The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any.
+   * Spacing between avatars.
    */
-  max: PropTypes.number,
+  spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
 };
 
 export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup);
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
index 422a8ebc3ddb9f..f1fbf364c49361 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
@@ -1,11 +1,15 @@
 import * as React from 'react';
+import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
+import { createClientRender } from 'test/utils/createClientRender';
 import AvatarGroup from './AvatarGroup';
+import { Avatar } from '@material-ui/core';
 
 describe('<AvatarGroup />', () => {
   let mount;
   let classes;
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
@@ -23,4 +27,16 @@ describe('<AvatarGroup />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
+
+  it('should not display all the avatars', () => {
+    const { container } = render(
+      <AvatarGroup max={1}>
+        <Avatar src="broken-url" />
+        <Avatar src="broken-url" />
+        <Avatar src="broken-url" />
+      </AvatarGroup>,
+    );
+    expect(container.querySelectorAll('img').length).to.equal(1);
+    expect(container.textContent).to.equal('+2');
+  });
 });