From aeba569c9c452cd56833168d5cbdd8db9a6ec899 Mon Sep 17 00:00:00 2001
From: Bagus Prabowo <bagus3621@gmail.com>
Date: Mon, 20 Sep 2021 11:09:50 +0700
Subject: [PATCH 1/2] IconForm & Spacer tests

---
 src/components/Forms/IconForm.tsx          | 12 +++--
 src/components/__tests__/IconForm.test.tsx | 63 ++++++++++++++++++++++
 src/components/__tests__/Spacer.test.tsx   | 17 ++++++
 3 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/components/__tests__/IconForm.test.tsx
 create mode 100644 src/components/__tests__/Spacer.test.tsx

diff --git a/src/components/Forms/IconForm.tsx b/src/components/Forms/IconForm.tsx
index 7580045..e2432e3 100644
--- a/src/components/Forms/IconForm.tsx
+++ b/src/components/Forms/IconForm.tsx
@@ -34,7 +34,7 @@ const IconForm = ({
       isFocused || text ? Colors.form.filled.bg : Colors.form.empty.bg;
   }
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID="Icon">
       {formTitle.length > 0 && (
         <View style={styles.titleContainer} testID="TitleContainer">
           <Text style={styles.formTitle} testID="Title">
@@ -58,8 +58,9 @@ const IconForm = ({
           shadowOpacity: isFocused ? 1 : 0,
           shadowRadius: isFocused ? 8 : 0,
         }}
+        testID="Container"
       >
-        <View style={styles.textContainer}>
+        <View style={styles.textContainer} testID="TextIcon">
           <TextInput
             onFocus={() => setIsFocused(true)}
             onEndEditing={() => setIsFocused(false)}
@@ -70,15 +71,20 @@ const IconForm = ({
             placeholderTextColor={Colors.text.disabled}
             editable={!disabled}
             secureTextEntry={showPass}
+            testID="Input"
           />
         </View>
-        <TouchableOpacity onPress={() => password && setShowPass(!showPass)}>
+        <TouchableOpacity
+          onPress={() => password && setShowPass(!showPass)}
+          testID="Touchable"
+        >
           <MaterialIcons
             name={
               password ? (showPass ? "visibility" : "visibility-off") : iconType
             }
             size={21}
             color={Colors.text.disabled}
+            testID="MaterialIcon"
           />
         </TouchableOpacity>
       </View>
diff --git a/src/components/__tests__/IconForm.test.tsx b/src/components/__tests__/IconForm.test.tsx
new file mode 100644
index 0000000..cf045ed
--- /dev/null
+++ b/src/components/__tests__/IconForm.test.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React, { useState } from "react";
+import { cleanup, render, fireEvent } from "@testing-library/react-native";
+import IconForm from "../Forms/IconForm";
+
+afterEach(cleanup);
+
+const IconFormWrapper = (props) => {
+  const [text, setText] = useState("Hello");
+  return <IconForm text={text} setText={setText} {...props} />;
+};
+
+describe("Icon Form Test", () => {
+  it("Should detect a form", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("Icon")).not.toBeNull();
+  });
+  it("Should detect a title container", () => {
+    const { getByTestId } = render(
+      <IconFormWrapper formTitle={"Title"} iconType="search" />
+    );
+    expect(getByTestId("TitleContainer")).not.toBeNull();
+  });
+  it("Should detect a title if given", () => {
+    const { getByTestId } = render(
+      <IconFormWrapper formTitle={"Title"} iconType="search" />
+    );
+    expect(getByTestId("Title")).not.toBeNull();
+  });
+  it("Should detect a form container", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("Container")).not.toBeNull();
+  });
+  it("Should detect a container for input and icon", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("TextIcon")).not.toBeNull();
+  });
+  it("Should detect a text input", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("Input")).not.toBeNull();
+  });
+  it("Should detect a touchable", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("Touchable")).not.toBeNull();
+  });
+  it("Should detect a MaterialIcon", () => {
+    const { getByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(getByTestId("MaterialIcon")).not.toBeNull();
+  });
+  it("Should not detect a container title", () => {
+    const { queryByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(queryByTestId("TitleContainer")).toBeNull();
+  });
+  it("Should not detect a form title", () => {
+    const { queryByTestId } = render(<IconFormWrapper iconType="search" />);
+    expect(queryByTestId("Title")).toBeNull();
+  });
+  it("Should detect a send form text", () => {
+    const { getByTestId } = render(<IconFormWrapper />);
+    fireEvent.changeText(getByTestId("Input"), "Hello");
+    expect(getByTestId("Input").props.value).toEqual("Hello");
+  });
+});
diff --git a/src/components/__tests__/Spacer.test.tsx b/src/components/__tests__/Spacer.test.tsx
new file mode 100644
index 0000000..a5a17b3
--- /dev/null
+++ b/src/components/__tests__/Spacer.test.tsx
@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React from "react";
+import { cleanup, render } from "@testing-library/react-native";
+import Spacer from "../Spacer/Spacer";
+
+afterEach(cleanup);
+
+const SpacerWrapper = () => {
+  return <Spacer variant="s" />;
+};
+
+describe("Spacer Test", () => {
+  it("Should detect a spacer", () => {
+    const { getByTestId } = render(<SpacerWrapper />);
+    expect(getByTestId("Spacer")).not.toBeNull();
+  });
+});
-- 
GitLab


From b29e260bfb03d107427f4b675642137174b15188 Mon Sep 17 00:00:00 2001
From: Bagus Prabowo <bagus3621@gmail.com>
Date: Mon, 20 Sep 2021 11:10:18 +0700
Subject: [PATCH 2/2] IconForm & Spacer tests

---
 src/components/Spacer/Spacer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx
index 6021228..9645d37 100644
--- a/src/components/Spacer/Spacer.tsx
+++ b/src/components/Spacer/Spacer.tsx
@@ -16,7 +16,7 @@ const Spacer = ({ variant }: props) => {
   } else if (variant == "xl") {
     height = 24;
   }
-  return <View style={{ height: height }} />;
+  return <View style={{ height: height }} testID="Spacer" />;
 };
 
 export default Spacer;
-- 
GitLab