[Badge][AvatarGroup][joy] js test replaced with ts test (#37089)

mui · May 4, 2023 · 028793c · 028793c
1 parent 3fe6e91
commit 028793c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/...i-joy/src/AvatarGroup/AvatarGroup.test.js → ...-joy/src/AvatarGroup/AvatarGroup.test.tsx b/...i-joy/src/AvatarGroup/AvatarGroup.test.js → ...-joy/src/AvatarGroup/AvatarGroup.test.tsx
@@ -33,7 +33,11 @@ describe('<AvatarGroup />', () => {
       </AvatarGroup>,
     );
 
-    const avatar = container.firstChild.firstChild;
+    const firstChild = container.firstChild;
+    if (firstChild === null) {
+      return;
+    }
+    const avatar = container.firstChild?.firstChild;
     expect(avatar).to.have.class(avatarClasses.colorPrimary);
     expect(avatar).to.have.class(avatarClasses.variantSolid);
     expect(avatar).to.have.class(avatarClasses.sizeSm);

diff --git a/packages/mui-joy/src/Badge/Badge.test.js → packages/mui-joy/src/Badge/Badge.test.tsx b/packages/mui-joy/src/Badge/Badge.test.js → packages/mui-joy/src/Badge/Badge.test.tsx
@@ -3,10 +3,10 @@ import { expect } from 'chai';
 import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
-import Badge, { badgeClasses as classes } from '@mui/joy/Badge';
+import Badge, { BadgeClassKey, BadgeOrigin, badgeClasses as classes } from '@mui/joy/Badge';
 
-function findBadge(container) {
-  return container.firstChild.querySelector('span');
+function findBadge(container: HTMLElement) {
+  return (container?.firstChild as HTMLElement)?.querySelector('span') ?? null;
 }
 
 describe('<Badge />', () => {
@@ -121,11 +121,13 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.class(classes.colorPrimary);
     });
 
-    ['primary', 'success', 'info', 'danger', 'neutral', 'warning'].forEach((color) => {
+    (['primary', 'success', 'info', 'danger', 'neutral', 'warning'] as const).forEach((color) => {
       it(`should render ${color}`, () => {
         const { container } = render(<Badge color={color} {...defaultProps} />);
 
-        expect(findBadge(container)).to.have.class(classes[`color${capitalize(color)}`]);
+        expect(findBadge(container)).to.have.class(
+          classes[`color${capitalize(color)}` as BadgeClassKey],
+        );
       });
     });
   });
@@ -136,11 +138,13 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.class(classes.sizeMd);
     });
 
-    ['sm', 'md', 'lg'].forEach((size) => {
+    (['sm', 'md', 'lg'] as const).forEach((size) => {
       it(`should render ${size}`, () => {
         const { container } = render(<Badge size={size} {...defaultProps} />);
 
-        expect(findBadge(container)).to.have.class(classes[`size${capitalize(size)}`]);
+        expect(findBadge(container)).to.have.class(
+          classes[`size${capitalize(size)}` as BadgeClassKey],
+        );
       });
     });
   });
@@ -151,11 +155,13 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.class(classes.variantSolid);
     });
 
-    ['outlined', 'soft', 'solid'].forEach((variant) => {
+    (['outlined', 'soft', 'solid'] as const).forEach((variant) => {
       it(`should render ${variant}`, () => {
         const { container } = render(<Badge variant={variant} {...defaultProps} />);
 
-        expect(findBadge(container)).to.have.class(classes[`variant${capitalize(variant)}`]);
+        expect(findBadge(container)).to.have.class(
+          classes[`variant${capitalize(variant)}` as BadgeClassKey],
+        );
       });
     });
   });
@@ -191,19 +197,21 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.class(classes.anchorOriginTopRight);
     });
 
-    [
-      { horizontal: 'left', vertical: 'top' },
-      { horizontal: 'left', vertical: 'bottom' },
-      { horizontal: 'right', vertical: 'top' },
-      { horizontal: 'right', vertical: 'bottom' },
-    ].forEach((anchorOrigin) => {
+    (
+      [
+        { horizontal: 'left', vertical: 'top' },
+        { horizontal: 'left', vertical: 'bottom' },
+        { horizontal: 'right', vertical: 'top' },
+        { horizontal: 'right', vertical: 'bottom' },
+      ] as BadgeOrigin[]
+    ).forEach((anchorOrigin) => {
       it(`should render ${anchorOrigin}`, () => {
-        const { container } = render(
-          <Badge badgeContent={1} {...defaultProps} anchorOrigin={anchorOrigin} />,
-        );
+        const { container } = render(<Badge {...defaultProps} anchorOrigin={anchorOrigin} />);
         expect(findBadge(container)).to.have.class(
           classes[
-            `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`
+            `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
+              anchorOrigin.horizontal,
+            )}` as BadgeClassKey
           ],
         );
       });