Test slots of Avatar, AvatarGroup and Badge

Author: hbjORbj

packages/mui-joy/src/Avatar/Avatar.test.js

@@ -10,7 +10,7 @@ import PersonIcon from '../internal/svg-icons/Person';
 describe('<Avatar />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Avatar />, () => ({
+  describeConformance(<Avatar alt="dummy image" src="/dummy-image.jpg" />, () => ({
     classes,
     inheritComponent: 'div',
     render,
@@ -21,6 +21,10 @@ describe('<Avatar />', () => {
     testDeepOverrides: { slotName: 'fallback', slotClassName: classes.fallback },
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      img: { expectedClassName: classes.img },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
@@ -96,9 +100,7 @@ describe('<Avatar />', () => {
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(
-        <Avatar src="/fake.png" slotProps={{ img: { onError } }} />,
-      );
+      const { container } = render(<Avatar src="/fake.png" slotProps={{ img: { onError } }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
@@ -116,9 +118,7 @@ describe('<Avatar />', () => {
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(
-        <Avatar src="/fake.png" slotProps={{ img: { onError } }} />,
-      );
+      const { container } = render(<Avatar src="/fake.png" slotProps={{ img: { onError } }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);

packages/mui-joy/src/AvatarGroup/AvatarGroup.test.js

@@ -18,6 +18,9 @@ describe('<AvatarGroup />', () => {
     testComponentPropWith: 'span',
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 

packages/mui-joy/src/Badge/Badge.test.js

@@ -22,7 +22,7 @@ describe('<Badge />', () => {
   };
 
   describeConformance(
-    <Badge>
+    <Badge badgeContent="1">
       <button />
     </Badge>,
     () => ({
@@ -34,6 +34,10 @@ describe('<Badge />', () => {
       muiName: 'JoyBadge',
       testVariantProps: { color: 'neutral', variant: 'soft' },
       testCustomVariant: true,
+      slots: {
+        root: { expectedClassName: classes.root },
+        badge: { expectedClassName: classes.badge },
+      },
       skip: ['classesRoot', 'componentsProp'],
     }),
   );