Merge branch 'main' into feat-tmcu-591-homepage-hub-tabs-ui

Author: vinnyhoward

.eslintrc.js

@@ -385,6 +385,33 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/*.test.{js,ts,tsx,jsx}', '**/*.spec.{js,ts,tsx,jsx}'],
+      plugins: ['jest'],
+      rules: {
+        // Prevent new file-based snapshots. Inline snapshots (toMatchInlineSnapshot)
+        // are still allowed as they keep assertions co-located with the test.
+        'jest/no-restricted-matchers': [
+          'error',
+          {
+            toMatchSnapshot:
+              'Use toMatchInlineSnapshot() or an explicit assertion instead. File-based snapshots are being phased out.',
+          },
+        ],
+      },
+    },
+    {
+      // Matches CODEOWNERS `**/snaps/**` and `**/Snaps/**` (@MetaMask/core-platform).
+      // ESLint cannot read CODEOWNERS.
+      files: [
+        '**/snaps/**/*.{test,spec}.{js,ts,tsx,jsx}',
+        '**/Snaps/**/*.{test,spec}.{js,ts,tsx,jsx}',
+      ],
+      plugins: ['jest'],
+      rules: {
+        'jest/no-restricted-matchers': 'off',
+      },
+    },
     // ── Perps controller Core-alignment override ──
     // Enforces the same ESLint rules that Core's @metamask/eslint-config
     // applies to packages/perps-controller so that code written in mobile

app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.test.tsx

@@ -3,16 +3,20 @@ import React from 'react';
 import { render, screen } from '@testing-library/react-native';
 
 // Internal dependencies.
+import { BADGENETWORK_TEST_ID } from '../Badge/variants/BadgeNetwork/BadgeNetwork.constants';
 import BadgeWrapper from './BadgeWrapper';
 import {
   SAMPLE_BADGEWRAPPER_PROPS,
   BADGE_WRAPPER_BADGE_TEST_ID,
 } from './BadgeWrapper.constants';
 
 describe('BadgeWrapper', () => {
-  it('should render BadgeWrapper correctly', () => {
-    const { toJSON } = render(<BadgeWrapper {...SAMPLE_BADGEWRAPPER_PROPS} />);
-    expect(toJSON()).toMatchSnapshot();
-    expect(screen.getByTestId(BADGE_WRAPPER_BADGE_TEST_ID)).toBeDefined();
+  it('renders anchor content, network badge, and wrapper test id', () => {
+    render(<BadgeWrapper {...SAMPLE_BADGEWRAPPER_PROPS} />);
+
+    expect(screen.getByTestId(BADGE_WRAPPER_BADGE_TEST_ID)).toBeOnTheScreen();
+    expect(screen.getByText('C')).toBeOnTheScreen();
+    expect(screen.getByTestId(BADGENETWORK_TEST_ID)).toBeOnTheScreen();
+    expect(screen.getByTestId('network-avatar-image')).toBeOnTheScreen();
   });
 });

app/component-library/components/Badges/BadgeWrapper/__snapshots__/BadgeWrapper.test.tsx.snap

@@ -26,14 +26,15 @@ const styleSheet = (params: { theme: Theme }) => {
       borderRadius: 12,
       padding,
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: 'flex-start',
     },
     avatar: {
+      marginTop: -4,
       marginRight: 16,
     },
     labelsContainer: {
       flex: 1,
-      justifyContent: 'center',
+      justifyContent: 'flex-start',
     },
     label: {
       color: colors.text.default,

app/component-library/components/Toast/Toast.styles.ts

@@ -1,10 +1,12 @@
 // Third party dependencies.
 import React, { createRef } from 'react';
+import { StyleSheet } from 'react-native';
 import { render, screen, act } from '@testing-library/react-native';
 
 // Internal dependencies.
 import Toast from './Toast';
 import { ToastRef, ToastVariants, ToastOptions } from './Toast.types';
+import { ToastSelectorsIDs } from './ToastModal.testIds';
 
 // react-native-reanimated is already mocked globally via setUpTests() in testSetup.js
 
@@ -163,4 +165,24 @@ describe('Toast', () => {
     expect(screen.queryByText('In Progress')).toBeNull();
     expect(screen.getByText('Success')).toBeOnTheScreen();
   });
+
+  it('uses flex-start justifyContent on labels container by default', async () => {
+    const toastOptions: ToastOptions = {
+      variant: ToastVariants.Plain,
+      labelOptions: [{ label: 'Aligned label' }],
+      hasNoTimeout: true,
+    };
+
+    render(<Toast ref={toastRef} />);
+
+    await act(async () => {
+      toastRef.current?.showToast(toastOptions);
+      jest.runAllTimers();
+    });
+
+    const labelsContainer = screen.getByTestId(ToastSelectorsIDs.CONTAINER);
+    const flat = StyleSheet.flatten(labelsContainer.props.style);
+
+    expect(flat.justifyContent).toBe('flex-start');
+  });
 });