[pull] main from MetaMask:main

app/component-library/components-temp/HeaderCenter/getHeaderCenterNavbarOptions.test.tsx

@@ -0,0 +1,115 @@
+// Third party dependencies.
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+// Internal dependencies.
+import getHeaderCenterNavbarOptions from './getHeaderCenterNavbarOptions';
+
+const TITLE_TEST_ID = 'header-center-title';
+const BACK_BUTTON_TEST_ID = 'header-center-back-button';
+const CLOSE_BUTTON_TEST_ID = 'header-center-close-button';
+
+describe('getHeaderCenterNavbarOptions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('return value', () => {
+    it('returns object with header function', () => {
+      const options = getHeaderCenterNavbarOptions({ title: 'Test' });
+
+      expect(options).toHaveProperty('header');
+      expect(typeof options.header).toBe('function');
+    });
+
+    it('returns React element when header function is called', () => {
+      const options = getHeaderCenterNavbarOptions({ title: 'Test' });
+
+      const headerElement = options.header();
+
+      expect(React.isValidElement(headerElement)).toBe(true);
+    });
+  });
+
+  describe('rendering', () => {
+    it('renders HeaderCenter with title', () => {
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        titleProps: { testID: TITLE_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId(TITLE_TEST_ID)).toBeOnTheScreen();
+    });
+
+    it('renders HeaderCenter with back button', () => {
+      const onBack = jest.fn();
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        onBack,
+        backButtonProps: { testID: BACK_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId(BACK_BUTTON_TEST_ID)).toBeOnTheScreen();
+    });
+
+    it('renders HeaderCenter with close button', () => {
+      const onClose = jest.fn();
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        onClose,
+        closeButtonProps: { testID: CLOSE_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId(CLOSE_BUTTON_TEST_ID)).toBeOnTheScreen();
+    });
+  });
+
+  describe('props forwarding', () => {
+    it('forwards onBack callback to HeaderCenter', () => {
+      const onBack = jest.fn();
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        onBack,
+        backButtonProps: { testID: BACK_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      fireEvent.press(getByTestId(BACK_BUTTON_TEST_ID));
+
+      expect(onBack).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards onClose callback to HeaderCenter', () => {
+      const onClose = jest.fn();
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        onClose,
+        closeButtonProps: { testID: CLOSE_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      fireEvent.press(getByTestId(CLOSE_BUTTON_TEST_ID));
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards testID to HeaderCenter container', () => {
+      const options = getHeaderCenterNavbarOptions({
+        title: 'Settings',
+        testID: 'custom-header',
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId('custom-header')).toBeOnTheScreen();
+    });
+  });
+});

app/component-library/components-temp/HeaderCenter/getHeaderCenterNavbarOptions.tsx

@@ -0,0 +1,32 @@
+// Third party dependencies.
+import React from 'react';
+
+// Internal dependencies.
+import HeaderCenter from './HeaderCenter';
+import { HeaderCenterProps } from './HeaderCenter.types';
+
+/**
+ * Returns React Navigation screen options with a HeaderCenter component.
+ *
+ * @example
+ * ```tsx
+ * const options = getHeaderCenterNavbarOptions({
+ *   title: 'Settings',
+ *   onBack: () => navigation.goBack(),
+ *   onClose: () => navigation.pop(),
+ *   includesTopInset: true,
+ * });
+ *
+ * <Stack.Screen name="Settings" options={options} />
+ * ```
+ *
+ * @param options - Props to pass to the HeaderCenter component.
+ * @returns React Navigation screen options object with header property.
+ */
+const getHeaderCenterNavbarOptions = (
+  options: HeaderCenterProps,
+): { header: () => React.ReactElement } => ({
+  header: () => <HeaderCenter {...options} />,
+});
+
+export default getHeaderCenterNavbarOptions;

app/component-library/components-temp/HeaderCenter/index.ts

@@ -1,2 +1,3 @@
 export { default } from './HeaderCenter';
+export { default as getHeaderCenterNavbarOptions } from './getHeaderCenterNavbarOptions';
 export type { HeaderCenterProps } from './HeaderCenter.types';

app/component-library/components-temp/HeaderWithTitleLeft/getHeaderWithTitleLeftNavbarOptions.test.tsx

@@ -0,0 +1,99 @@
+// Third party dependencies.
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+// Internal dependencies.
+import getHeaderWithTitleLeftNavbarOptions from './getHeaderWithTitleLeftNavbarOptions';
+
+const CONTAINER_TEST_ID = 'header-with-title-left-container';
+const BACK_BUTTON_TEST_ID = 'header-with-title-left-back-button';
+
+describe('getHeaderWithTitleLeftNavbarOptions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('return value', () => {
+    it('returns object with header function', () => {
+      const options = getHeaderWithTitleLeftNavbarOptions({});
+
+      expect(options).toHaveProperty('header');
+      expect(typeof options.header).toBe('function');
+    });
+
+    it('returns React element when header function is called', () => {
+      const options = getHeaderWithTitleLeftNavbarOptions({});
+
+      const headerElement = options.header();
+
+      expect(React.isValidElement(headerElement)).toBe(true);
+    });
+  });
+
+  describe('rendering', () => {
+    it('renders HeaderWithTitleLeft with titleLeftProps', () => {
+      const options = getHeaderWithTitleLeftNavbarOptions({
+        testID: CONTAINER_TEST_ID,
+        titleLeftProps: {
+          title: 'NFT Name',
+          topLabel: 'Collection',
+        },
+      });
+      const Header = options.header;
+      const { getByTestId, getByText } = render(<Header />);
+
+      expect(getByTestId(CONTAINER_TEST_ID)).toBeOnTheScreen();
+      expect(getByText('NFT Name')).toBeOnTheScreen();
+      expect(getByText('Collection')).toBeOnTheScreen();
+    });
+
+    it('renders HeaderWithTitleLeft with back button', () => {
+      const onBack = jest.fn();
+      const options = getHeaderWithTitleLeftNavbarOptions({
+        onBack,
+        backButtonProps: { testID: BACK_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId(BACK_BUTTON_TEST_ID)).toBeOnTheScreen();
+    });
+  });
+
+  describe('props forwarding', () => {
+    it('forwards onBack callback to HeaderWithTitleLeft', () => {
+      const onBack = jest.fn();
+      const options = getHeaderWithTitleLeftNavbarOptions({
+        onBack,
+        backButtonProps: { testID: BACK_BUTTON_TEST_ID },
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      fireEvent.press(getByTestId(BACK_BUTTON_TEST_ID));
+
+      expect(onBack).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards testID to HeaderWithTitleLeft container', () => {
+      const options = getHeaderWithTitleLeftNavbarOptions({
+        testID: 'custom-header',
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId('custom-header')).toBeOnTheScreen();
+    });
+
+    it('forwards titleSectionTestID to title section', () => {
+      const options = getHeaderWithTitleLeftNavbarOptions({
+        titleLeftProps: { title: 'Title' },
+        titleSectionTestID: 'title-section',
+      });
+      const Header = options.header;
+      const { getByTestId } = render(<Header />);
+
+      expect(getByTestId('title-section')).toBeOnTheScreen();
+    });
+  });
+});

app/component-library/components-temp/HeaderWithTitleLeft/getHeaderWithTitleLeftNavbarOptions.tsx

@@ -0,0 +1,34 @@
+// Third party dependencies.
+import React from 'react';
+
+// Internal dependencies.
+import HeaderWithTitleLeft from './HeaderWithTitleLeft';
+import { HeaderWithTitleLeftProps } from './HeaderWithTitleLeft.types';
+
+/**
+ * Returns React Navigation screen options with a HeaderWithTitleLeft component.
+ *
+ * @example
+ * ```tsx
+ * const options = getHeaderWithTitleLeftNavbarOptions({
+ *   onBack: () => navigation.goBack(),
+ *   titleLeftProps: {
+ *     title: 'NFT Name',
+ *     topLabel: 'Collection',
+ *   },
+ *   includesTopInset: true,
+ * });
+ *
+ * <Stack.Screen name="NFTDetails" options={options} />
+ * ```
+ *
+ * @param options - Props to pass to the HeaderWithTitleLeft component.
+ * @returns React Navigation screen options object with header property.
+ */
+const getHeaderWithTitleLeftNavbarOptions = (
+  options: HeaderWithTitleLeftProps,
+): { header: () => React.ReactElement } => ({
+  header: () => <HeaderWithTitleLeft {...options} />,
+});
+
+export default getHeaderWithTitleLeftNavbarOptions;

app/component-library/components-temp/HeaderWithTitleLeft/index.ts

@@ -1,2 +1,3 @@
 export { default } from './HeaderWithTitleLeft';
+export { default as getHeaderWithTitleLeftNavbarOptions } from './getHeaderWithTitleLeftNavbarOptions';
 export type { HeaderWithTitleLeftProps } from './HeaderWithTitleLeft.types';