merge

Author: jpuri

.cursor/rules/unit-testing-guidelines.mdc

@@ -0,0 +1,161 @@
+---
+description: Project Guidelines for Unit Testing
+globs: *.test.*
+alwaysApply: false
+---
+- Use (the unit testing guidelines)[https://github.com/MetaMask/contributor-docs/blob/main/docs/testing/unit-testing.md]
+
+# Developer Best Practices
+
+- Use meaningful test names that describe the purpose, not implementation details.
+```ts
+it('displays an error when input is invalid', () => { ... });
+```
+- Structure tests using the AAA pattern (Arrange, Act, Assert) for readability and maintainability.
+```ts
+// Arrange
+const input = 'bad';
+// Act
+const result = validate(input);
+// Assert
+expect(result).toBe(false);
+```
+- Each test must cover one behavior and be isolated from others.
+```ts
+it('returns true for valid email', () => { expect(isEmail('a@b.com')).toBe(true); });
+```
+- Favor focused assertions and clear structure.
+```ts
+expect(screen.getByText('Welcome')).toBeOnTheScreen();
+```
+- Avoid duplicated or polluted tests.
+```ts
+// Only define shared mocks once, not in every test
+beforeEach(() => mockReset());
+```
+- Use mocks only when necessary.
+```ts
+jest.mock('api'); // mock only when calling real API is not feasible
+```
+- Parameterize tests to cover all values (e.g., enums) with type-safe iteration.
+```ts
+it.each(['small', 'medium', 'large'] as const)('renders %s size', (size) => {
+  expect(renderComponent(size)).toBeOnTheScreen();
+});
+```
+- Prefer comments like "Given / When / Then" for test case clarity.
+```ts
+// Given a logged out user
+// When they visit the dashboard
+// Then they should be redirected to login
+```
+
+# Test Determinism & Brittleness
+
+- Avoid brittle tests: do not test internal state or UI snapshots for logic.
+- Only test public behavior, not implementation details.
+- Mock time, randomness, and external systems to ensure consistent results.
+```ts
+jest.useFakeTimers();
+jest.setSystemTime(new Date('2024-01-01'));
+```
+- Avoid relying on global state or hardcoded values (e.g., dates) or mock it.
+
+# Reviewer Responsibilities
+
+- Validate that tests fail when the code is broken (test the test).
+```ts
+// Break the SuT and make sure this test fails
+expect(result).toBe(false);
+```
+- Ensure tests use proper matchers (`toBeOnTheScreen` vs `toBeDefined`).
+- Do not approve PRs without reviewing snapshot diffs.
+- Reject tests with complex names combining multiple logical conditions (AND/OR).
+```ts
+// OK
+it('renders button when enabled')
+
+// NOT OK
+it('renders and disables button when input is empty or invalid')
+```
+
+# Refactoring Support
+
+- Ensure tests provide safety nets during refactors and logic changes. Run the tests before pushing commits!
+- Encourage small, testable components.
+- Unit tests must act as documentation for feature expectations.
+
+# Anti-patterns to Avoid
+
+- ❌ Do not consider snapshot coverage as functional coverage.
+```ts
+expect(component).toMatchSnapshot(); // 🚫 not behavior validation
+```
+- ❌ Do not rely on code coverage percentage without real assertions.
+```ts
+// 100% lines executed, but no assertions
+```
+- ❌ Do not use weak matchers like `toBeDefined` or `toBeTruthy` to assert element presence.
+```ts
+expect(queryByText('Item')).toBeOnTheScreen(); // ✅ use strong matchers
+```
+
+# Unit tests developement workflow
+
+- Always run unit tests after making code changes.
+```shell
+yarn test:unit
+```
+- Confirm all tests are passing before commit.
+- When a snapshot update is detected, confirm the changes are expected.
+- Do not blindly update snapshots without understanding the differences.
+
+# Reference Code Examples
+
+## ✅ Proper Test Structure (AAA)
+```ts
+it('indicates expired milk when past due date', () => {
+  // Arrange
+  const today = new Date('2025-06-01');
+  const milk = { expiration: new Date('2025-05-30') };
+
+  // Act
+  const result = isMilkGood(today, milk);
+
+  // Assert
+  expect(result).toBe(false);
+});
+```
+
+## ❌ Brittle Snapshot
+```ts
+it('renders the button', () => {
+  const { container } = render(<MyButton />);
+  expect(container).toMatchSnapshot(); // 🚫 fails on minor style changes
+});
+```
+
+## ✅ Robust UI Assertion
+```ts
+it('displays error message when API fails', async () => {
+  mockApi.failOnce();
+  const { findByText } = render(<MyComponent />);
+  expect(await findByText('Something went wrong')).toBeOnTheScreen();
+});
+```
+
+## ✅ Test the Test
+```ts
+it('hides selector when disabled', () => {
+  const { queryByTestId } = render(<Selector enabled={false} />);
+  expect(queryByTestId('IPFS_GATEWAY_SELECTED')).toBeNull();
+
+  // Intentionally break: render with enabled=true and see if test fails
+});
+```
+
+# Resources
+
+- Contributor docs: https://github.com/MetaMask/contributor-docs/blob/main/docs/testing/unit-testing.md
+- Jest Matchers: https://jestjs.io/docs/using-matchers
+- React Native Testing Library: https://testing-library.com/docs/react-native-testing-library/intro/

.github/CODEOWNERS

@@ -190,12 +190,6 @@ app/core/Engine/controllers/seedless-onboarding-controller  @MetaMask/web3auth
 app/components/Views/Onboarding @MetaMask/web3auth
 app/reducers/onboarding @MetaMask/web3auth
 
-# QA Team
-e2e/**               @MetaMask/qa
-wdio/**              @MetaMask/qa
-
-
-
 # Snapshots – no code owners assigned
 # This allows anyone with write access to approve changes to any *.snap files.
 # ⚠️ Note: Leaving this rule unassigned disables Code Owner review enforcement for snapshot files.

.js.env.example

@@ -133,4 +133,7 @@ export RAMP_INTERNAL_BUILD="true"
 
 
 # set seedless onboarding environment
-export WEB3AUTH_NETWORK="sapphire_devnet"
+export WEB3AUTH_NETWORK="sapphire_devnet"
+
+# Enable 7702 locally
+export MM_SMART_ACCOUNT_UI_ENABLED="true"

.storybook/main.js

@@ -2,10 +2,7 @@ module.exports = {
   stories: [
     '../app/component-library/components/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/base-components/**/*.stories.?(ts|tsx|js|jsx)',
-    '../app/component-library/components-temp/TagColored/**/*.stories.?(ts|tsx|js|jsx)',
-    '../app/component-library/components-temp/KeyValueRow/**/*.stories.?(ts|tsx|js|jsx)',
-    '../app/component-library/components-temp/Buttons/ButtonToggle/**/*.stories.?(ts|tsx|js|jsx)',
-    '../app/component-library/components-temp/SegmentedControl/**/*.stories.?(ts|tsx|js|jsx)',
+    '../app/component-library/components-temp/**/*.stories.?(ts|tsx|js|jsx)',
   ],
   addons: ['@storybook/addon-ondevice-controls'],
   framework: '@storybook/react-native',

.storybook/storybook.requires.js

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - feat(bridge): add "hardware wallets not supported" error when attempting Solana swap/bridge ([#15743](https://github.com/MetaMask/metamask-mobile/pull/15743))
 - feat(bridge): fetch all tokens for bridge input([#15993](https://github.com/MetaMask/metamask-mobile/pull/15993))
 - fix(bridge): don't show currency value unless amount is above zero ([#15798](https://github.com/MetaMask/metamask-mobile/pull/15798))
+- fix(bridge): prevent crash when viewing Solana asset details ([#16770](https://github.com/MetaMask/metamask-mobile/pull/16770))
 
 ## [7.47.1]
 

CHANGELOG.md

@@ -65,7 +65,7 @@ export const ListItemWithButtonSelect = {
         <Icon name={IconName.Clock} />
       </ListItemColumn>
       <ListItemColumn widthType={WidthType.Fill}>
-        <Text numberOfLines={1} variant={TextVariant.HeadingSMRegular}>
+        <Text numberOfLines={1} variant={TextVariant.BodyMD}>
           {'Sample Title'}
         </Text>
         <Text variant={TextVariant.BodyMD}>{'Sample Description'}</Text>

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.stories.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+
+// Test IDs
+export const MAINACTIONBUTTON_TEST_ID = 'main-action-button';
+export const MAINACTIONBUTTON_ICON_TEST_ID = 'main-action-button-icon';
+export const MAINACTIONBUTTON_LABEL_TEST_ID = 'main-action-button-label';

app/component-library/components-temp/MainActionButton/MainActionButton.constants.ts

@@ -0,0 +1,33 @@
+// External dependencies.
+import { IconName } from '../../components/Icons/Icon';
+
+// Internal dependencies.
+import { default as MainActionButtonComponent } from './MainActionButton';
+
+const MainActionButtonMeta = {
+  title: 'Components Temp / Main Action Button',
+  component: MainActionButtonComponent,
+  argTypes: {
+    iconName: {
+      options: IconName,
+      control: {
+        type: 'select',
+      },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+export default MainActionButtonMeta;
+
+export const MainActionButton = {
+  args: {
+    iconName: IconName.Add,
+    label: 'Add',
+    isDisabled: false,
+  },
+};

app/component-library/components-temp/MainActionButton/MainActionButton.stories.tsx

@@ -0,0 +1,59 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../util/theme/models';
+
+// Internal dependencies.
+import { MainActionButtonStyleSheetVars } from './MainActionButton.types';
+
+/**
+ * Style sheet function for MainActionButton component.
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: MainActionButtonStyleSheetVars;
+}) => {
+  const { theme, vars } = params;
+  const { style, isDisabled } = vars;
+
+  let backgroundColor = theme.colors.background.muted;
+
+  if (isDisabled) {
+    backgroundColor = theme.colors.background.muted;
+  }
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        backgroundColor,
+        borderRadius: 12,
+        padding: 8,
+        minWidth: 68,
+        minHeight: 68,
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity: isDisabled ? 0.5 : 1,
+      } as const,
+      style,
+    ),
+    pressed: {
+      backgroundColor: theme.colors.background.pressed,
+    },
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    label: {
+      textAlign: 'center',
+      marginTop: 2,
+    },
+  });
+};
+
+export default styleSheet;