test: Redesign Signature Decoding Simulation

app/components/Views/confirmations/Confirm/Confirm.test.tsx

@@ -57,7 +57,7 @@ describe('Confirm', () => {
     expect(getByText('Estimated changes')).toBeDefined();
     expect(
       getByText(
-        'You’re signing into a site and there are no predicted changes to your account.',
+        "You're signing into a site and there are no predicted changes to your account.",
       ),
     ).toBeDefined();
     expect(getByText('Request from')).toBeDefined();

app/components/Views/confirmations/components/Confirm/Info/TypedSignV1/TypedSignV1.test.tsx

@@ -12,7 +12,7 @@ describe('TypedSignV1', () => {
     expect(getByText('Estimated changes')).toBeDefined();
     expect(
       getByText(
-        'You’re signing into a site and there are no predicted changes to your account.',
+        "You're signing into a site and there are no predicted changes to your account.",
       ),
     ).toBeDefined();
     expect(getByText('Request from')).toBeDefined();

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/Simulation.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  DecodingData,
+  DecodingDataChangeType,
+  DecodingDataStateChanges,
+  SignatureRequest,
+} from '@metamask/signature-controller';
+import useGetTokenStandardAndDetails from '../../../../../hooks/useGetTokenStandardAndDetails';
+import { typedSignV4ConfirmationState } from '../../../../../../../../util/test/confirm-data-helpers';
+import renderWithProvider from '../../../../../../../../util/test/renderWithProvider';
+import { memoizedGetTokenStandardAndDetails } from '../../../../../utils/token';
+import TypedSignV3V4Simulation from './Simulation';
+
+jest.mock('../../../../../hooks/useGetTokenStandardAndDetails');
+
+jest.mock('../../../../../../../../core/Engine', () => ({
+  context: {
+    NetworkController: {
+      findNetworkClientIdByChainId: () => 'mainnet',
+    },
+  },
+}));
+
+const stateChangesApprove = [
+  {
+    assetType: 'ERC20',
+    changeType: DecodingDataChangeType.Approve,
+    address: '0x3fc91a3afd70395cd496c647d5a6cc9d4b2b7fad',
+    amount: '12345',
+    contractAddress: '0x6b175474e89094c44da98b954eedeac495271d0f',
+  },
+];
+
+const mockState = (
+  mockStateChanges: DecodingDataStateChanges,
+  {
+    mockDecodingDataProps,
+    stubDecodingLoading = false,
+  }: {
+    mockDecodingDataProps?: Partial<DecodingData>;
+    stubDecodingLoading?: boolean;
+  } = {
+    mockDecodingDataProps: {},
+    stubDecodingLoading: false,
+  },
+) => {
+  const clonedMockState = cloneDeep(typedSignV4ConfirmationState);
+  const request = clonedMockState.engine.backgroundState.SignatureController
+    .signatureRequests[
+    'fb2029e1-b0ab-11ef-9227-05a11087c334'
+  ] as SignatureRequest;
+
+  request.decodingLoading = stubDecodingLoading;
+  request.decodingData = {
+    ...mockDecodingDataProps,
+    stateChanges: mockStateChanges,
+  };
+
+  return clonedMockState;
+};
+
+describe('PermitSimulation', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+
+    /** Reset memoized function using getTokenStandardAndDetails for each test */
+    memoizedGetTokenStandardAndDetails?.cache?.clear?.();
+  });
+
+  it('renders DecodedSimulation loader if decodingLoading is true', async () => {
+    const { queryByTestId } = renderWithProvider(<TypedSignV3V4Simulation />, {
+      state: mockState(stateChangesApprove, {
+        stubDecodingLoading: true,
+      }),
+    });
+
+    expect(await queryByTestId('confirm-v3v4-simulation-loader')).toBeDefined();
+  });
+
+  it('renders DecodingSimulation with "Unavailable" if decoding data is empty', async () => {
+    const { getByText } = renderWithProvider(<TypedSignV3V4Simulation />, {
+      state: mockState([]),
+    });
+
+    expect(await getByText('Estimated changes')).toBeDefined();
+    expect(await getByText('Unavailable')).toBeDefined();
+  });
+
+  it('renders DecodingSimulation for permits', async () => {
+    (
+      useGetTokenStandardAndDetails as jest.MockedFn<
+        typeof useGetTokenStandardAndDetails
+      >
+    ).mockReturnValue({
+      symbol: 'TST',
+      decimals: '4',
+      balance: undefined,
+      standard: 'ERC20',
+      decimalsNumber: 4,
+    });
+
+    const { getByText } = renderWithProvider(<TypedSignV3V4Simulation />, {
+      state: mockState(stateChangesApprove),
+    });
+
+    expect(await getByText('Estimated changes')).toBeDefined();
+    expect(await getByText('Spending cap')).toBeDefined();
+    expect(await getByText('1.235')).toBeDefined();
+  });
+
+  it('renders PermitSimulation if decoding api returns error', async () => {
+    (
+      useGetTokenStandardAndDetails as jest.MockedFn<
+        typeof useGetTokenStandardAndDetails
+      >
+    ).mockReturnValue({
+      symbol: 'TST',
+      decimals: '2',
+      balance: undefined,
+      standard: 'ERC20',
+      decimalsNumber: 4,
+    });
+
+    const { getByText } = renderWithProvider(<TypedSignV3V4Simulation />, {
+      state: mockState([], {
+        mockDecodingDataProps: {
+          error: { message: 'some error', type: 'SOME_ERROR' },
+        } as Partial<DecodingData>,
+      }),
+    });
+
+    expect(await getByText('Estimated changes')).toBeDefined();
+    expect(await getByText('Spending cap')).toBeDefined();
+    expect(await getByText('0.3')).toBeDefined();
+    expect(
+      await getByText(
+        "You're giving the spender permission to spend this many tokens from your account.",
+      ),
+    ).toBeDefined();
+  });
+});

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/Static/Static.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+import StaticSimulation from './Static';
+
+const mockProps = {
+  title: 'Test Title',
+  titleTooltip: 'Test Tooltip',
+  description: 'Test Description',
+  simulationElements: <></>,
+};
+
+describe('StaticSimulation', () => {
+  it('renders correctly with basic props', () => {
+    const { getByText } = render(<StaticSimulation {...mockProps} />);
+
+    expect(getByText('Test Title')).toBeDefined();
+    expect(getByText('Test Description')).toBeDefined();
+  });
+
+  it('shows loader when isLoading is true', () => {
+    const { queryByTestId } = render(
+      <StaticSimulation {...mockProps} isLoading />,
+    );
+
+    expect(queryByTestId('confirm-v3v4-simulation-loader')).toBeDefined();
+  });
+
+  it('shows simulation elements when not loading', () => {
+    const simulationElements = <Text>Test Simulation</Text>;
+    const { getByText } = render(
+      <StaticSimulation
+        {...mockProps}
+        simulationElements={simulationElements}
+        isLoading={false}
+      />,
+    );
+
+    expect(getByText('Test Simulation')).toBeDefined();
+  });
+});

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignDecoded/TypedSignDecoded.test.tsx

@@ -9,7 +9,11 @@ import {
 import { strings } from '../../../../../../../../../../locales/i18n';
 import { typedSignV4ConfirmationState } from '../../../../../../../../../util/test/confirm-data-helpers';
 import renderWithProvider from '../../../../../../../../../util/test/renderWithProvider';
-import TypedSignDecoded, { getStateChangeToolip, getStateChangeType, StateChangeType } from './TypedSignDecoded';
+import TypedSignDecoded, {
+  getStateChangeToolip,
+  getStateChangeType,
+  StateChangeType,
+} from './TypedSignDecoded';
 
 const stateChangesApprove = [
   {
@@ -75,9 +79,15 @@ const stateChangesNftBidding: DecodingDataStateChanges = [
   },
 ];
 
-const mockState = (mockStateChanges: DecodingDataStateChanges, stubDecodingLoading: boolean = false) => {
+const mockState = (
+  mockStateChanges: DecodingDataStateChanges,
+  stubDecodingLoading: boolean = false,
+) => {
   const clonedMockState = cloneDeep(typedSignV4ConfirmationState);
-  const request = clonedMockState.engine.backgroundState.SignatureController.signatureRequests['fb2029e1-b0ab-11ef-9227-05a11087c334'] as SignatureRequest;
+  const request = clonedMockState.engine.backgroundState.SignatureController
+    .signatureRequests[
+    'fb2029e1-b0ab-11ef-9227-05a11087c334'
+  ] as SignatureRequest;
   request.decodingLoading = stubDecodingLoading;
   request.decodingData = {
     stateChanges: mockStateChanges,
@@ -121,7 +131,11 @@ describe('DecodedSimulation', () => {
 
   it('renders label only once if there are multiple state changes of same changeType', async () => {
     const { getAllByText } = renderWithProvider(<TypedSignDecoded />, {
-      state: mockState([stateChangesApprove[0], stateChangesApprove[0], stateChangesApprove[0]]),
+      state: mockState([
+        stateChangesApprove[0],
+        stateChangesApprove[0],
+        stateChangesApprove[0],
+      ]),
     });
 
     expect(await getAllByText('12,345')).toHaveLength(3);
@@ -139,28 +153,34 @@ describe('DecodedSimulation', () => {
 
   describe('getStateChangeToolip', () => {
     it('return correct tooltip when permit is for listing NFT', () => {
-      const tooltip = getStateChangeToolip(
-        StateChangeType.NFTListingReceive,
+      const tooltip = getStateChangeToolip(StateChangeType.NFTListingReceive);
+      expect(tooltip).toBe(
+        strings('confirm.simulation.decoded_tooltip_list_nft'),
       );
-      expect(tooltip).toBe(strings('confirm.simulation.decoded_tooltip_list_nft'));
     });
 
     it('return correct tooltip when permit is for bidding NFT', () => {
-      const tooltip = getStateChangeToolip(
-        StateChangeType.NFTBiddingReceive,
+      const tooltip = getStateChangeToolip(StateChangeType.NFTBiddingReceive);
+      expect(tooltip).toBe(
+        strings('confirm.simulation.decoded_tooltip_bid_nft'),
       );
-      expect(tooltip).toBe(strings('confirm.simulation.decoded_tooltip_bid_nft'));
     });
   });
 
   describe('getStateChangeType', () => {
     it('return correct state change type for NFT listing receive', () => {
-      const stateChange = getStateChangeType(stateChangesNftListing, stateChangesNftListing[1]);
+      const stateChange = getStateChangeType(
+        stateChangesNftListing,
+        stateChangesNftListing[1],
+      );
       expect(stateChange).toBe(StateChangeType.NFTListingReceive);
     });
 
     it('return correct state change type for NFT bidding receive', () => {
-      const stateChange = getStateChangeType(stateChangesNftBidding, stateChangesNftBidding[1]);
+      const stateChange = getStateChangeType(
+        stateChangesNftBidding,
+        stateChangesNftBidding[1],
+      );
       expect(stateChange).toBe(StateChangeType.NFTBiddingReceive);
     });
   });

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignPermit/TypedSignPermit.test.tsx

@@ -19,7 +19,11 @@ describe('PermitSimulation', () => {
     });
 
     expect(getByText('Estimated changes')).toBeDefined();
-    expect(getByText('You’re giving the spender permission to spend this many tokens from your account.')).toBeDefined();
+    expect(
+      getByText(
+        "You're giving the spender permission to spend this many tokens from your account.",
+      ),
+    ).toBeDefined();
     expect(getByText('Spending cap')).toBeDefined();
     expect(getByText('3,000')).toBeDefined();
     expect(getByText('0xCcCCc...ccccC')).toBeDefined();

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import NativeValueDisplay from './NativeValueDisplay';
+import { backgroundState } from '../../../../../../../../../../util/test/initial-root-state';
+import renderWithProvider from '../../../../../../../../../../util/test/renderWithProvider';
+import { fireEvent } from '@testing-library/react-native';
+
+const mockInitialState = {
+  engine: {
+    backgroundState,
+  },
+};
+
+describe('NativeValueDisplay', () => {
+  it('renders component correctly', async () => {
+    const { findByText } = renderWithProvider(
+      <NativeValueDisplay
+        labelChangeType={'Spending Cap'}
+        value={'4321'}
+        chainId={'0x1'}
+      />,
+      { state: mockInitialState },
+    );
+
+    expect(await findByText('< 0.000001')).toBeDefined();
+    expect(await findByText('ETH')).toBeDefined();
+  });
+
+  it('displays modal when clicking on the value', async () => {
+    const { findByText } = renderWithProvider(
+      <NativeValueDisplay
+        labelChangeType={'Spending Cap'}
+        value={'4321'}
+        chainId={'0x1'}
+      />,
+      { state: mockInitialState },
+    );
+
+    const button = await findByText('< 0.000001');
+    fireEvent.press(button);
+
+    expect(await findByText('Spending Cap')).toBeDefined();
+  });
+});