add test case

mui · Mar 15, 2020 · d008c8e · d008c8e
1 parent 0546c18
commit d008c8e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git 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
@@ -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>
   );
 });

diff --git 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');
+  });
 });