added tests

Author: bergarces

app/components/UI/Assets/PriceAlerts/Views/CreatePriceAlertView/CreatePriceAlertView.tsx

@@ -91,6 +91,7 @@ const CreatePriceAlertView: React.FC = () => {
     navigation.goBack();
   }, [navigation]);
 
+  // Narrow the alert union so each form receives only its supported alert type.
   const editingAbsoluteAlert =
     editingAlert?.type === 'absolute_price' ? editingAlert : undefined;
   const editingPercentAlert =

app/components/UI/Assets/PriceAlerts/Views/CreatePriceAlertView/CreatePriceAlertView.view.test.tsx

@@ -4,13 +4,16 @@ import {
   setupPriceAlertsApiMock,
   setupPriceAlertsPostMock,
   setupPriceAlertsPatchMock,
+  setupPercentPriceAlertsPostMock,
+  setupPercentPriceAlertsPatchMock,
   clearPriceAlertsApiMocks,
 } from '../../../../../../../tests/component-view/api-mocking/priceAlerts';
 import { describeForPlatforms } from '../../../../../../../tests/component-view/platform';
 import { act, fireEvent, waitFor } from '@testing-library/react-native';
 import {
   type AbsolutePriceAlert,
   CreatePriceAlertTestIds,
+  type PercentChangeAlert,
 } from '../../constants';
 
 beforeEach(() => {
@@ -32,6 +35,19 @@ const editingAlert: AbsolutePriceAlert = {
   createdAt: '2025-01-01T00:00:00.000Z',
 };
 
+const editingPercentAlert: PercentChangeAlert = {
+  id: 'percent-alert-1',
+  userId: 'user-1',
+  asset: 'eip155:1/slip44:60',
+  type: 'percent_change',
+  threshold: 10.5,
+  period: '1h',
+  direction: 'down',
+  recurring: true,
+  active: true,
+  createdAt: '2025-01-01T00:00:00.000Z',
+};
+
 describeForPlatforms('CreatePriceAlertView', () => {
   it('renders the Price Reaches form with keypad and quick-percentage pills', async () => {
     const { getByTestId, getByText } = renderCreatePriceAlertViewWithRoutes();
@@ -176,4 +192,128 @@ describeForPlatforms('CreatePriceAlertView', () => {
 
     await waitFor(() => expect(scope.isDone()).toBe(true));
   });
+
+  describe('percent-change alerts', () => {
+    it('switches to the percent form and updates direction and period', async () => {
+      const { getByTestId, getByText, queryByTestId } =
+        renderCreatePriceAlertViewWithRoutes();
+
+      fireEvent.press(getByTestId(CreatePriceAlertTestIds.TYPE_SEGMENT_CHANGE));
+      fireEvent.press(getByTestId(CreatePriceAlertTestIds.DIRECTION_TOGGLE));
+      fireEvent.press(getByTestId(CreatePriceAlertTestIds.PERIOD_SEGMENT_1H));
+
+      await waitFor(() => {
+        expect(
+          getByTestId(CreatePriceAlertTestIds.PERCENT_INPUT),
+        ).toBeOnTheScreen();
+        expect(
+          queryByTestId(CreatePriceAlertTestIds.TARGET_PRICE_INPUT),
+        ).not.toBeOnTheScreen();
+        expect(getByText('When price moves down')).toBeOnTheScreen();
+        expect(
+          getByTestId(CreatePriceAlertTestIds.PERIOD_SEGMENT_1H),
+        ).toHaveProp(
+          'accessibilityState',
+          expect.objectContaining({ selected: true }),
+        );
+      });
+    });
+
+    it('submits the selected percent configuration to the percent endpoint', async () => {
+      const scope = setupPercentPriceAlertsPostMock({
+        asset: 'eip155:1/slip44:60',
+        threshold: 10,
+        period: '1h',
+        direction: 'down',
+        recurring: false,
+      });
+      const { getByTestId, getByText } = renderCreatePriceAlertViewWithRoutes({
+        routeParams: { initialType: 'percent_change' },
+      });
+
+      fireEvent.press(getByTestId(CreatePriceAlertTestIds.DIRECTION_TOGGLE));
+      fireEvent.press(getByTestId(CreatePriceAlertTestIds.PERIOD_SEGMENT_1H));
+      fireEvent.press(getByText('1'));
+      fireEvent.press(getByText('0'));
+      fireEvent(
+        getByTestId(CreatePriceAlertTestIds.RECURRING_TOGGLE),
+        'valueChange',
+        false,
+      );
+
+      await act(async () => {
+        fireEvent.press(getByTestId(CreatePriceAlertTestIds.SET_ALERT_BUTTON));
+      });
+
+      await waitFor(() => expect(scope.isDone()).toBe(true));
+    });
+
+    it('prevents saving a duplicate percent configuration', async () => {
+      const { getByTestId, getByText, findByText } =
+        renderCreatePriceAlertViewWithRoutes({
+          routeParams: {
+            initialType: 'percent_change',
+            existingPercentAlerts: [
+              {
+                ...editingPercentAlert,
+                threshold: 10,
+                period: '24h',
+                direction: 'up',
+              },
+            ],
+          },
+        });
+
+      fireEvent.press(getByText('1'));
+      fireEvent.press(getByText('0'));
+
+      expect(
+        await findByText('An alert with this configuration already exists.'),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(CreatePriceAlertTestIds.SET_ALERT_BUTTON),
+      ).toBeDisabled();
+    });
+
+    it('locks immutable controls and PATCHes editable percent fields', async () => {
+      const scope = setupPercentPriceAlertsPatchMock(editingPercentAlert.id, {
+        threshold: 10.5,
+        recurring: false,
+      });
+      const { getByTestId } = renderCreatePriceAlertViewWithRoutes({
+        routeParams: {
+          editingAlert: editingPercentAlert,
+          existingPercentAlerts: [editingPercentAlert],
+        },
+      });
+
+      fireEvent(
+        getByTestId(CreatePriceAlertTestIds.RECURRING_TOGGLE),
+        'valueChange',
+        false,
+      );
+
+      expect(
+        getByTestId(CreatePriceAlertTestIds.TYPE_SEGMENT_TARGET),
+      ).toBeDisabled();
+      expect(
+        getByTestId(CreatePriceAlertTestIds.TYPE_SEGMENT_CHANGE),
+      ).toBeDisabled();
+      expect(
+        getByTestId(CreatePriceAlertTestIds.PERIOD_SEGMENT_1H),
+      ).toBeDisabled();
+      expect(
+        getByTestId(CreatePriceAlertTestIds.PERIOD_SEGMENT_24H),
+      ).toBeDisabled();
+      expect(
+        getByTestId(CreatePriceAlertTestIds.DIRECTION_TOGGLE),
+      ).toBeDisabled();
+
+      await act(async () => {
+        fireEvent.press(getByTestId(CreatePriceAlertTestIds.SET_ALERT_BUTTON));
+      });
+
+      await waitFor(() => expect(scope.isDone()).toBe(true));
+    });
+  });
 });

tests/component-view/api-mocking/priceAlerts.ts

@@ -11,10 +11,16 @@
 // eslint-disable-next-line import-x/no-extraneous-dependencies
 import nock, { type Scope } from 'nock';
 import { clearAllNockMocks, disableNetConnect } from './nockHelpers';
-import type { AbsolutePriceAlert } from '../../../app/components/UI/Assets/PriceAlerts/constants';
+import type {
+  AbsolutePriceAlert,
+  PercentChangeAlert,
+  SavePercentAlertParams,
+  UpdatePercentAlertParams,
+} from '../../../app/components/UI/Assets/PriceAlerts/constants';
 
 const PRICE_ALERTS_ORIGIN = 'https://price-alerts.dev-api.cx.metamask.io';
 const ALERTS_PATH = '/v1/alerts';
+const PERCENT_ALERTS_PATH = `${ALERTS_PATH}/percent-change`;
 
 export const mockPriceAlertsData: AbsolutePriceAlert[] = [
   {
@@ -51,6 +57,20 @@ export const mockCreatedAlert: AbsolutePriceAlert = {
   createdAt: '2025-06-01T00:00:00.000Z',
 };
 
+/** Fixture for the alert returned by POST /v1/alerts/percent-change in tests. */
+export const mockCreatedPercentAlert: PercentChangeAlert = {
+  id: 'percent-alert-new',
+  userId: 'user-1',
+  asset: 'eip155:1/slip44:60',
+  type: 'percent_change',
+  threshold: 10,
+  period: '1h',
+  direction: 'down',
+  recurring: false,
+  active: true,
+  createdAt: '2025-06-01T00:00:00.000Z',
+};
+
 /**
  * Sets up nock interceptors for the Price Alerts API.
  * Call in beforeEach of price-alerts view tests.
@@ -105,6 +125,31 @@ export function setupPriceAlertsPatchMock(alertId: string): Scope {
     .reply(200);
 }
 
+/**
+ * Registers a one-shot POST /v1/alerts/percent-change interceptor.
+ * Passing the expected body makes scope consumption verify the complete payload.
+ */
+export function setupPercentPriceAlertsPostMock(
+  expectedBody: SavePercentAlertParams,
+): Scope {
+  return nock(PRICE_ALERTS_ORIGIN)
+    .post(PERCENT_ALERTS_PATH, expectedBody)
+    .reply(201, mockCreatedPercentAlert);
+}
+
+/**
+ * Registers a one-shot PATCH /v1/alerts/percent-change/:id interceptor.
+ * Passing the expected body makes scope consumption verify the update payload.
+ */
+export function setupPercentPriceAlertsPatchMock(
+  alertId: string,
+  expectedBody: UpdatePercentAlertParams,
+): Scope {
+  return nock(PRICE_ALERTS_ORIGIN)
+    .patch(`${PERCENT_ALERTS_PATH}/${alertId}`, expectedBody)
+    .reply(200);
+}
+
 /**
  * Sets up a nock interceptor for GET /v1/alerts/supported-chains.
  * Used by TokenDetails to determine if the bell icon should be shown.