test: Added more unit test cases

package.json

@@ -87,7 +87,8 @@
     ],
     "collectCoverage": true,
     "collectCoverageFrom": [
-      "**/*.{js,jsx,ts,tsx}",
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!**/index.ts",
       "!App.tsx",
       "!**/*.{json,md}",
       "!commitlint.config.js",

src/__snapshots__/pearl.spec.tsx.snap

@@ -74,7 +74,9 @@ exports[`pearl/basic passes the snapshot test for a <Text> component 1`] = `
   <Text
     style={{}}
   >
-    asdasd
+    <Text>
+      asdasd
+    </Text>
   </Text>
 </View>
 `;

src/components/atoms/box/__snapshots__/box.spec.tsx.snap

@@ -9,16 +9,60 @@ exports[`Atoms/Box passes the basic snapshot test 1`] = `
   }
 >
   <View
-    animate={{}}
+    animate={
+      {
+        "height": 10,
+        "width": 10,
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "height": 10,
+          "width": 10,
+        },
+      }
+    }
+    collapsable={false}
+    style={
+      {
+        "height": 10,
+        "width": 10,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`Atoms/Box renders correctly with different props 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "backgroundColor": "#ff0000",
+      }
+    }
     animatedStyle={
       {
-        "value": {},
+        "value": {
+          "backgroundColor": "#ff0000",
+        },
       }
     }
     collapsable={false}
-    style={{}}
+    style={
+      {
+        "backgroundColor": "#ff0000",
+      }
+    }
   >
-    asdasd
+    Test Text
   </View>
 </View>
 `;

src/components/atoms/box/box.spec.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Box from "./box";
+import Text from "../text/text";
 import { render } from "@testing-library/react-native";
 import { ThemeProvider } from "../../../theme/src/theme-context";
 
@@ -9,7 +10,27 @@ describe("Atoms/Box", () => {
   it("passes the basic snapshot test", () => {
     const tree = render(
       <ThemeProvider>
-        <Box>asdasd</Box>
+        <Box w={10} h={10} />
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("renders the correct text", () => {
+    const { getByText } = render(
+      <ThemeProvider>
+        <Box>
+          <Text>Test Text</Text>
+        </Box>
+      </ThemeProvider>
+    );
+    expect(getByText("Test Text")).toBeTruthy();
+  });
+
+  it("renders correctly with different props", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Box bgColor="red">Test Text</Box>
       </ThemeProvider>
     ).toJSON();
     expect(tree).toMatchSnapshot();

src/components/atoms/collapse/__snapshots__/collapse.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Collapse passes the snapshot test when show is false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+/>
+`;
+
+exports[`Atoms/Collapse passes the snapshot test when show is true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "height": "auto",
+        "opacity": 1,
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "height": 0,
+          "opacity": 0,
+        },
+      }
+    }
+    collapsable={false}
+    exit={
+      {
+        "height": 0,
+        "opacity": 0,
+      }
+    }
+    exitTransition={
+      {
+        "dampingRatio": 1,
+        "duration": 150,
+        "easing": [Function],
+        "type": "spring",
+      }
+    }
+    from={
+      {
+        "height": 0,
+        "opacity": 0,
+      }
+    }
+    style={
+      {
+        "height": 0,
+        "opacity": 0,
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 150,
+        "easing": [Function],
+        "type": "spring",
+      }
+    }
+  >
+    <View
+      animate={{}}
+      animatedStyle={
+        {
+          "value": {},
+        }
+      }
+      collapsable={false}
+      onLayout={[Function]}
+      style={{}}
+    >
+      <Text
+        accessibilityRole="text"
+        accessible={true}
+        allowFontScaling={true}
+        animate={
+          {
+            "color": "#1A2138",
+          }
+        }
+        animatedStyle={
+          {
+            "value": {
+              "color": "#1A2138",
+            },
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "color": "#1A2138",
+            "fontFamily": "Poppins-Regular",
+            "fontSize": 16.099999999999998,
+            "fontStyle": "normal",
+            "fontWeight": "400",
+            "includeFontPadding": false,
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        This is a test
+      </Text>
+    </View>
+  </View>
+</View>
+`;

src/components/atoms/collapse/collapse.spec.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import Collapse from "./collapse";
+import Text from "../text/text";
+import { ThemeProvider } from "../../../theme/src/theme-context";
+
+jest.useFakeTimers();
+
+describe("Atoms/Collapse", () => {
+  it("passes the snapshot test when show is true", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Collapse show={true}>
+          <Text>This is a test</Text>
+        </Collapse>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("passes the snapshot test when show is false", () => {
+    const tree = render(
+      <ThemeProvider>
+        <Collapse show={false}>
+          <Text>This is a test</Text>
+        </Collapse>
+      </ThemeProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/atoms/fade/__snapshots__/fade.spec.tsx.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atoms/Fade passes the snapshot test when show is false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+/>
+`;
+
+exports[`Atoms/Fade passes the snapshot test when show is true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    animate={
+      {
+        "opacity": 1,
+      }
+    }
+    animatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    collapsable={false}
+    exit={
+      {
+        "opacity": 0,
+      }
+    }
+    exitTransition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+    from={
+      {
+        "opacity": 0,
+      }
+    }
+    style={
+      {
+        "opacity": 0,
+      }
+    }
+    transition={
+      {
+        "dampingRatio": 1,
+        "duration": 100,
+        "type": "spring",
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      accessible={true}
+      allowFontScaling={true}
+      animate={
+        {
+          "color": "#1A2138",
+        }
+      }
+      animatedStyle={
+        {
+          "value": {
+            "color": "#1A2138",
+          },
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "color": "#1A2138",
+          "fontFamily": "Poppins-Regular",
+          "fontSize": 16.099999999999998,
+          "fontStyle": "normal",
+          "fontWeight": "400",
+          "includeFontPadding": false,
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      This is a test
+    </Text>
+  </View>
+</View>
+`;