chore: fixing badge component linting (#675)

## **Description**

This PR fixes linting violations in the BadgeNetwork and BadgeWrapper
components in the design-system-react package by:
1. Removing ESLint ignores for these components in the config
2. Improving test assertions using `toStrictEqual` instead of `toEqual`
3. Adding proper null checks before accessing parent elements
4. Implementing proper mock functions with return values
5. Adding the unicode flag to regex for better internationalization
support
6. Improving code comments and spacing

## **Related issues**

Part of: #657

## **Manual testing steps**

1. Run ESLint on the project to verify no linting errors
2. Run the tests to confirm all tests still pass
3. Verify the Badge components render correctly in Storybook

## **Screenshots/Recordings**

Not applicable for linting fixes.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

eslint.config.mjs

@@ -28,8 +28,6 @@ const config = createConfig([
       'packages/design-system-react/src/components/AvatarGroup/AvatarGroup.tsx',
       'packages/design-system-react/src/components/AvatarNetwork/AvatarNetwork.test.tsx',
       'packages/design-system-react/src/components/AvatarToken/AvatarToken.test.tsx',
-      'packages/design-system-react/src/components/BadgeNetwork/BadgeNetwork.test.tsx',
-      'packages/design-system-react/src/components/BadgeWrapper/BadgeWrapper.test.tsx',
       'packages/design-system-react/src/components/temp-components/Jazzicon/Jazzicon.test.tsx',
       'packages/design-system-react/src/components/temp-components/Jazzicon/Jazzicon.tsx',
       'packages/design-system-react/src/components/temp-components/Maskicon/Maskicon.test.tsx',

packages/design-system-react/src/components/BadgeNetwork/BadgeNetwork.test.tsx

@@ -8,9 +8,9 @@ describe('BadgeNetwork', () => {
     render(<BadgeNetwork name="TestNet" src="icon.png" data-testid="badge" />);
 
     const wrapper = screen.getByTestId('badge');
-    const classList = wrapper.className.split(/\s+/);
+    const classList = wrapper.className.split(/\s+/u);
 
-    expect(classList).toEqual(
+    expect(classList).toStrictEqual(
       expect.arrayContaining([
         'h-[18px]',
         'w-[18px]',

packages/design-system-react/src/components/BadgeWrapper/BadgeWrapper.test.tsx

@@ -5,6 +5,7 @@ import {
   BadgeWrapperPosition,
   BadgeWrapperPositionAnchorShape,
 } from '../../types';
+
 import { BadgeWrapper } from './BadgeWrapper';
 
 describe('BadgeWrapper', () => {
@@ -18,7 +19,10 @@ describe('BadgeWrapper', () => {
       bottom: 0,
       x: 0,
       y: 0,
-      toJSON: () => {},
+      toJSON: () => {
+        // Empty implementation needed for mock
+        return '';
+      },
     });
   });
   afterEach(() => {
@@ -45,8 +49,11 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ bottom: '0px', right: '0px' });
+    const badgeEl = screen.getByTestId('badge');
+    // Ensure the parent element exists
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    // Apply styles check only after confirming parent exists
+    expect(badgeEl.parentElement).toHaveStyle({ bottom: '0px', right: '0px' });
   });
 
   it('applies BottomLeft position correctly', () => {
@@ -58,8 +65,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ bottom: '0px', left: '0px' });
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({ bottom: '0px', left: '0px' });
   });
 
   it('applies TopLeft position correctly', () => {
@@ -71,8 +79,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ top: '0px', left: '0px' });
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({ top: '0px', left: '0px' });
   });
 
   it('applies TopRight position correctly', () => {
@@ -84,8 +93,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ top: '0px', right: '0px' });
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({ top: '0px', right: '0px' });
   });
 
   it('respects positionXOffset and positionYOffset', () => {
@@ -98,8 +108,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ bottom: '10px', right: '5px' });
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({ bottom: '10px', right: '5px' });
   });
 
   it('uses Rectangular anchor shape (no extra shape offset)', () => {
@@ -113,8 +124,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({ bottom: '4px', right: '3px' });
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({ bottom: '4px', right: '3px' });
   });
 
   it('overrides with customPosition when provided', () => {
@@ -124,8 +136,9 @@ describe('BadgeWrapper', () => {
         <div data-testid="anchor" />
       </BadgeWrapper>,
     );
-    const badgeDiv = screen.getByTestId('badge').parentElement!;
-    expect(badgeDiv).toHaveStyle({
+    const badgeEl = screen.getByTestId('badge');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    expect(badgeEl.parentElement).toHaveStyle({
       top: '1px',
       right: '2px',
       bottom: '3px',
@@ -175,7 +188,10 @@ describe('BadgeWrapper', () => {
       bottom: 0,
       x: 0,
       y: 0,
-      toJSON: () => {},
+      toJSON: () => {
+        // Empty implementation needed for mock
+        return '';
+      },
     };
     const badgeRect = {
       width: 20,
@@ -186,7 +202,10 @@ describe('BadgeWrapper', () => {
       bottom: 0,
       x: 0,
       y: 0,
-      toJSON: () => {},
+      toJSON: () => {
+        // Empty implementation needed for mock
+        return '';
+      },
     };
     jest
       .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
@@ -199,7 +218,12 @@ describe('BadgeWrapper', () => {
       </BadgeWrapper>,
     );
 
-    const badgeDiv = screen.getByTestId('badge-m').parentElement!;
+    const badgeEl = screen.getByTestId('badge-m');
+    expect(badgeEl.parentElement).toBeInTheDocument();
+    // We can assert that parentElement exists since we checked it's in the document
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const badgeDiv = badgeEl.parentElement!;
+
     // Computed offsets:
     // anchorShapeXOffset = 100 * .1464 = 14.64
     // badgeCenteringXOffset = 20/2 = 10