temp: adding tests to for historic vault apy graph

MetaMask · Jan 10, 2025 · f98b00e · f98b00e
1 parent 0f1d3eb
commit f98b00e
Show file tree

Hide file tree

Showing 23 changed files with 1,231 additions and 35 deletions.
diff --git a/...Modal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx b/...Modal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import ChartTimespanButtonGroup, { ChartTimespanButtonGroupProps } from '.';
+import { CHART_BUTTONS } from '../InteractiveTimespanChart.constants';
+import { noop } from 'lodash';
+import { strings } from '../../../../../../../../locales/i18n';
+import { fireEvent } from '@testing-library/react-native';
+
+describe('ChartTimespanButtonGroup', () => {
+  it('render matches snapshot', () => {
+    const props: ChartTimespanButtonGroupProps = {
+      buttons: CHART_BUTTONS,
+      onTimePress: noop,
+    };
+
+    const { toJSON } = renderWithProvider(
+      <ChartTimespanButtonGroup {...props} />,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('updates active timespan button onPress', async () => {
+    const props: ChartTimespanButtonGroupProps = {
+      buttons: CHART_BUTTONS,
+      onTimePress: noop,
+    };
+
+    const { getByText } = renderWithProvider(
+      <ChartTimespanButtonGroup {...props} />,
+    );
+
+    const oneMonthButton = getByText(
+      strings('stake.interactive_chart.timespan_buttons.1M'),
+    ).parent;
+
+    const ACTIVE_COLOR = '#ffffff';
+    const INACTIVE_COLOR = '#9fa6ae';
+
+    // Inactive before press
+    expect(oneMonthButton.props.style.color).toBe(INACTIVE_COLOR);
+
+    fireEvent.press(oneMonthButton);
+
+    // Active after press
+    expect(oneMonthButton.props.style.color).toBe(ACTIVE_COLOR);
+  });
+});
diff --git a/...mespanChart/ChartTimespanButtonGroup/__snapshots__/ChartTimespanButtonGroup.test.tsx.snap b/...mespanChart/ChartTimespanButtonGroup/__snapshots__/ChartTimespanButtonGroup.test.tsx.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartTimespanButtonGroup render matches snapshot 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": 12,
+      "justifyContent": "center",
+      "marginTop": 24,
+      "paddingBottom": 16,
+      "paddingHorizontal": 16,
+    }
+  }
+>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#0376c9",
+        "borderRadius": 8,
+        "color": "#ffffff",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 34,
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      7D
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "color": "#9fa6ae",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 34,
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#9fa6ae",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      1M
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "color": "#9fa6ae",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 34,
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#9fa6ae",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      3M
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "color": "#9fa6ae",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 34,
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#9fa6ae",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      6M
+    </Text>
+  </TouchableOpacity>
+</View>
+`;
diff --git a/...nts/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx b/...nts/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx
@@ -32,7 +32,7 @@ const ChartTimespanButton = ({
   );
 };
 
-interface ChartTimespanButtonGroupProps {
+export interface ChartTimespanButtonGroupProps {
   buttons: ChartButton[];
   onTimePress: (numDaysToDisplay: number) => void;
 }

diff --git a/...nts/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/DataGradient.test.tsx b/...nts/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/DataGradient.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import DataGradient, { DataGradientProps } from '.';
+
+const MOCK_DATA_POINTS = [
+  2.6293099000355724, 2.8917589155691483, 2.7419089818104134, 3.539389365276984,
+  2.4752501611359663, 2.7702575807540017, 2.646738155404836,
+];
+
+describe('DataGradient', () => {
+  it('render matches snapshot', () => {
+    const props: DataGradientProps = {
+      dataPoints: MOCK_DATA_POINTS,
+    };
+
+    const { toJSON } = renderWithProvider(<DataGradient {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('supports customizing color', () => {
+    const props: DataGradientProps = {
+      dataPoints: MOCK_DATA_POINTS,
+      color: 'blue',
+    };
+
+    const { toJSON } = renderWithProvider(<DataGradient {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/...nMoreModal/InteractiveTimespanChart/DataGradient/__snapshots__/DataGradient.test.tsx.snap b/...nMoreModal/InteractiveTimespanChart/DataGradient/__snapshots__/DataGradient.test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGradient render matches snapshot 1`] = `
+<RNSVGDefs>
+  <RNSVGLinearGradient
+    gradient={
+      [
+        0,
+        857506356,
+        1,
+        872415231,
+      ]
+    }
+    gradientTransform={null}
+    gradientUnits={0}
+    name="dataGradient"
+    x1={0}
+    x2={0}
+    y1={0}
+    y2="100%"
+  />
+</RNSVGDefs>
+`;
+
+exports[`DataGradient supports customizing color 1`] = `
+<RNSVGDefs>
+  <RNSVGLinearGradient
+    gradient={
+      [
+        0,
+        855638271,
+        1,
+        872415231,
+      ]
+    }
+    gradientTransform={null}
+    gradientUnits={0}
+    name="dataGradient"
+    x1={0}
+    x2={0}
+    y1={0}
+    y2="100%"
+  />
+</RNSVGDefs>
+`;
diff --git a/...take/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/index.tsx b/...take/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/index.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Defs, LinearGradient, Stop } from 'react-native-svg';
 import { useTheme } from '../../../../../../../util/theme';
 
-interface DataGradientProps {
+export interface DataGradientProps {
   dataPoints: number[];
   color?: string;
 }

diff --git a/...nents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx b/...nents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import GraphCursor, { GraphCursorProps } from '.';
+
+describe('GraphCursor', () => {
+  const MOCK_DATA = [
+    2.6293099000355724, 2.8917589155691483, 2.7419089818104134,
+    3.539389365276984, 2.4752501611359663, 2.7702575807540017,
+    2.646738155404836,
+  ];
+  const MOCK_CURRENT_X = 2;
+  const MOCK_X = () => 73;
+  const MOCK_Y = () => 33.17441726994484;
+  const MOCK_COLOR = '#1c8234';
+
+  it('render matches snapshot', () => {
+    const props: GraphCursorProps = {
+      data: MOCK_DATA,
+      currentX: MOCK_CURRENT_X,
+      x: MOCK_X,
+      y: MOCK_Y,
+      color: MOCK_COLOR,
+    };
+
+    const { toJSON } = renderWithProvider(<GraphCursor {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('supports customizing color', () => {
+    const props: GraphCursorProps = {
+      data: MOCK_DATA,
+      currentX: MOCK_CURRENT_X,
+      x: MOCK_X,
+      y: MOCK_Y,
+      color: MOCK_COLOR,
+    };
+
+    const { toJSON } = renderWithProvider(<GraphCursor {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});