feat: wrote tests for new learnMoreModal and InteractiveTimespanChart

app/components/UI/Stake/__mocks__/mockData.ts

@@ -67,17 +67,18 @@ export const MOCK_GET_POOLED_STAKES_API_RESPONSE: PooledStakes = {
   exchangeRate: '1.010906701603882254',
 };
 
-export const MOCK_GET_POOLED_STAKES_API_RESPONSE_HIGH_ASSETS_AMOUNT: PooledStakes = {
-  accounts: [
-    {
-      account: '0x0111111111abcdef2222222222abcdef33333333',
-      lifetimeRewards: '0',
-      assets: '99999999990000000000000',
-      exitRequests: [],
-    },
-  ],
-  exchangeRate: '1.010906701603882254',
-};
+export const MOCK_GET_POOLED_STAKES_API_RESPONSE_HIGH_ASSETS_AMOUNT: PooledStakes =
+  {
+    accounts: [
+      {
+        account: '0x0111111111abcdef2222222222abcdef33333333',
+        lifetimeRewards: '0',
+        assets: '99999999990000000000000',
+        exitRequests: [],
+      },
+    ],
+    exchangeRate: '1.010906701603882254',
+  };
 
 export const MOCK_GET_VAULT_RESPONSE: VaultData = {
   apy: '2.853065141088762750393474836309926',
@@ -112,6 +113,7 @@ export const MOCK_STAKING_API_SERVICE: Partial<StakingApiService> = {
   getPooledStakes: jest.fn(),
   getVaultData: jest.fn(),
   getPooledStakingEligibility: jest.fn(),
+  getVaultDailyApys: jest.fn(),
   baseUrl: 'https://staking.api.com',
 };
 

app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/__snapshots__/PlotLine.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`PlotLine render matches snapshot 1`] = `
     }
   }
   strokeWidth={1.75}
+  testID="InteractiveChartPlotLine"
 />
 `;
 
@@ -41,5 +42,6 @@ exports[`PlotLine supports customizing color 1`] = `
     }
   }
   strokeWidth={1.75}
+  testID="InteractiveChartPlotLine"
 />
 `;

app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/index.tsx

@@ -13,7 +13,6 @@ const PlotLine = ({
   line,
   doesChartHaveData,
   color,
-  // TODO: Determine if this is necessary or not. If it is, break it out into a constants file.
   testID = 'InteractiveChartPlotLine',
 }: Partial<LineProps>) => {
   const { colors: themeColors } = useTheme();

app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/index.tsx

@@ -211,11 +211,7 @@ const InteractiveTimespanChart = <T extends DataPoint>({
           color={color}
         />
       )}
-      <View
-        style={styles.chartContainer}
-        {...panResponder.panHandlers}
-        testID="AreaChartContainer"
-      >
+      <View style={styles.chartContainer} {...panResponder.panHandlers}>
         <AreaChart
           style={styles.chart}
           data={parsedDataPointValues}

app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.test.tsx

@@ -1 +1,75 @@
-// TODO: Add Tests
+import React from 'react';
+import PoolStakingLearnMoreModal from '.';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { MOCK_POOL_STAKING_SDK } from '../../__mocks__/mockData';
+import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context';
+import { screen } from '@testing-library/react-native';
+import { MOCK_VAULT_APRS, MOCK_VAULT_DAILY_APYS } from './mockVaultRewards';
+import { fireLayoutEvent } from './InteractiveTimespanChart/InteractiveTimespanChart.testUtils';
+
+jest.mock('@react-navigation/native', () => {
+  const actualReactNavigation = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualReactNavigation,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('../../hooks/useStakeContext', () => ({
+  __esModule: true,
+  useStakeContext: jest.fn(() => MOCK_POOL_STAKING_SDK),
+}));
+
+jest.mock('../../hooks/useVaultAprs', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultAprs: MOCK_VAULT_APRS,
+    isLoadingVaultAprs: false,
+  }),
+}));
+
+jest.mock('../../hooks/useVaultApys', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultApys: MOCK_VAULT_DAILY_APYS,
+    isLoadingVaultApys: false,
+  }),
+}));
+
+const initialMetrics: Metrics = {
+  frame: { x: 0, y: 0, width: 320, height: 640 },
+  insets: { top: 0, left: 0, right: 0, bottom: 0 },
+};
+
+describe('PoolStakingLearnMoreModal', () => {
+  let renderResult: ReturnType<typeof renderWithProvider>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    renderResult = renderWithProvider(
+      <SafeAreaProvider initialMetrics={initialMetrics}>
+        <PoolStakingLearnMoreModal />
+      </SafeAreaProvider>,
+    );
+
+    /**
+     * react-native-svg-charts components listen for onLayout changes before they render any data.
+     * You need to trigger these event handlers for each component in your tests.
+     */
+    fireLayoutEvent(screen.root, { width: 100, height: 100 });
+  });
+
+  afterEach(() => {
+    // Clear render state
+    renderResult = renderWithProvider(<></>);
+  });
+
+  it('render matches snapshot', () => {
+    const { toJSON } = renderResult;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});