Merge pull request #2 from Stringsaeed/Update-blurview-component-and-…

…tests

🔨 chore: update BlurView component and test snapshots

jest-setup.js

@@ -1,10 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import "react-native-gesture-handler/jestSetup";
 import "@testing-library/react-native/extend-expect";
+import React from "react";
 import { setUpTests } from "react-native-reanimated";
 import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
 
 setUpTests();
 
 jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);
 
+jest.mock("@gorhom/bottom-sheet", () => {
+  const RN = jest.requireActual("react-native");
+  const BottomSheetModal = ({
+    backdropComponent,
+    handleComponent,
+    footerComponent,
+    children,
+    ...props
+  }) => {
+    return (
+      <RN.View {...props}>
+        {backdropComponent && backdropComponent()}
+        {handleComponent && handleComponent()}
+        {children}
+        {footerComponent && footerComponent()}
+      </RN.View>
+    );
+  };
+  return {
+    __esModule: true,
+    ...jest.requireActual("@gorhom/bottom-sheet/mock"),
+    ...jest.requireActual("react-native-reanimated/mock"),
+    TouchableOpacity: jest.requireActual("react-native").TouchableOpacity,
+    BottomSheetBackdrop: jest.requireActual("react-native").View,
+    BottomSheetHandle: jest.requireActual("react-native").View,
+    BottomSheetFooter: jest.requireActual("react-native").View,
+    BottomSheetModal,
+  };
+});
+
 export {};

src/components/blur-view/__tests__/__snapshots__/blur.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlurView should render correctly 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "transparent",
+      },
+      undefined,
+    ]
+  }
+>
+  <ViewManagerAdapter_ExpoBlurView
+    blurReductionFactor={4}
+    experimentalBlurMethod="none"
+    intensity={50}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    tint="default"
+  />
+</View>
+`;

src/components/blur-view/__tests__/blur.test.tsx

@@ -0,0 +1,13 @@
+import { screen } from "@testing-library/react-native";
+import React from "react";
+
+import render from "utils/test";
+
+import BlurView from "../blur";
+
+describe("BlurView", () => {
+  it("should render correctly", () => {
+    render(<BlurView />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+});

src/components/bottom-sheet/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlurView should render correctly 1`] = `
+<View
+  backgroundStyle={
+    {
+      "backgroundColor": "#00000000",
+    }
+  }
+  bottomInset={32}
+  detached={true}
+  enableDynamicSizing={true}
+  enablePanDownToClose={true}
+  style={
+    [
+      undefined,
+      {
+        "borderRadius": 20,
+        "marginHorizontal": 16,
+      },
+    ]
+  }
+  topInset={0}
+>
+  <View
+    animatedStyle={
+      {
+        "value": {
+          "opacity": NaN,
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "opacity": NaN,
+      }
+    }
+    testID="blur-backdrop"
+  >
+    <View
+      animatedStyle={
+        {
+          "value": {},
+        }
+      }
+      collapsable={false}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+          },
+          {
+            "backgroundColor": "rgba(0,0,0,0.2)",
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+        ]
+      }
+    >
+      <ViewManagerAdapter_ExpoBlurView
+        blurReductionFactor={4}
+        experimentalBlurMethod="none"
+        intensity={NaN}
+        style={
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+        tint="dark"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "backgroundColor": "#000000",
+        "borderRadius": 20,
+        "paddingBottom": 18,
+        "paddingLeft": 18,
+        "paddingRight": 18,
+        "paddingTop": 18,
+        "shadowColor": "rgb(227,75,169)",
+        "shadowOffset": {
+          "height": -3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.2,
+        "shadowRadius": 5,
+      }
+    }
+  >
+    <Text>
+      Test
+    </Text>
+  </View>
+</View>
+`;

src/components/bottom-sheet/__tests__/index.test.tsx

@@ -0,0 +1,28 @@
+import { screen } from "@testing-library/react-native";
+import React from "react";
+import { Text } from "react-native";
+
+import render from "utils/test";
+
+import BottomSheet from "../index";
+
+describe("BlurView", () => {
+  it("should render correctly", () => {
+    render(
+      <BottomSheet>
+        <Text>Test</Text>
+      </BottomSheet>
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it("should renders backdrop", () => {
+    render(
+      <BottomSheet>
+        <Text>Test</Text>
+      </BottomSheet>
+    );
+
+    expect(screen.getByTestId("blur-backdrop")).toBeTruthy();
+  });
+});

src/components/bottom-sheet/blur-backdrop/index.tsx

@@ -23,7 +23,7 @@ export default function BlurBackdrop({
   }, [close]);
   const containerAnimatedStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
-      animatedIndex.value,
+      animatedIndex?.value,
       [-1, 0, 1],
       [0, 1, 1],
       Extrapolation.CLAMP
@@ -32,7 +32,7 @@ export default function BlurBackdrop({
   const animatedProps = useAnimatedProps(() => {
     return {
       intensity: interpolate(
-        animatedIndex.value,
+        animatedIndex?.value,
         [-1, 0, 1],
         [0, 10, 50],
         Extrapolation.CLAMP
@@ -48,7 +48,10 @@ export default function BlurBackdrop({
 
   return (
     <GestureDetector gesture={tapGesture}>
-      <Animated.View style={[style, containerAnimatedStyle]}>
+      <Animated.View
+        testID="blur-backdrop"
+        style={[style, containerAnimatedStyle]}
+      >
         <AnimatedBlurView
           tint="dark"
           animatedProps={animatedProps}