Fakultas Ilmu Komputer UI

Commit 1abfae7b authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'commentinput' into 'master'

feat : add Commenti nput

See merge request !153
parents ef58e1e5 d99a6372
Pipeline #88909 passed with stage
in 9 minutes and 58 seconds
......@@ -13,9 +13,8 @@ type props = {
placeholder: string;
disabled?: boolean;
iconType?: React.ComponentProps<typeof MaterialIcons>["name"];
password?: boolean;
search?: boolean;
errorMessage?: string;
type?: "password" | "search" | "comment";
onPress?: () => void;
onEndEditing?: () => void;
};
......@@ -27,14 +26,13 @@ const IconForm = ({
placeholder,
disabled = false,
iconType,
password = false,
search = false,
type,
errorMessage,
onPress,
onEndEditing,
}: props) => {
const [isFocused, setIsFocused] = useState(false);
const [showPass, setShowPass] = useState(password);
const [showPass, setShowPass] = useState(true);
const [isError, setIsError] = useState(false);
let backgroundColor: string;
......@@ -58,7 +56,7 @@ const IconForm = ({
const endEdit = () => {
setIsFocused(false);
if (search || disabled) {
if (type === "search" || disabled) {
setIsError(false);
} else {
if (!validateEmpty(text)) {
......@@ -71,9 +69,11 @@ const IconForm = ({
};
let iconName: React.ComponentProps<typeof MaterialIcons>["name"];
if (search) {
if (type === "search") {
iconName = "search";
} else if (password) {
} else if (type === "comment") {
iconName = "send";
} else if (type === "password") {
if (showPass) {
iconName = "visibility";
} else if (!showPass) {
......@@ -120,15 +120,15 @@ const IconForm = ({
editable={!disabled}
secureTextEntry={showPass}
testID="Input"
autoCapitalize={password ? "none" : "sentences"}
autoCapitalize={type === "password" ? "none" : "sentences"}
/>
</View>
<TouchableOpacity
onPress={() => password && setShowPass(!showPass)}
onPress={() => type === "password" && setShowPass(!showPass)}
testID="Touchable"
>
{iconName === "search" && (
<TouchableOpacity onPress={() => onPress()}>
{(type === "comment" || type === "search") && (
<TouchableOpacity testID="TouchableIcon" onPress={() => onPress()}>
<MaterialIcons
name={iconName}
size={21}
......@@ -137,7 +137,7 @@ const IconForm = ({
/>
</TouchableOpacity>
)}
{iconName !== "search" && (
{!(type === "comment" || type === "search") && (
<MaterialIcons
name={iconName}
size={21}
......
......@@ -27,6 +27,12 @@ describe("Small Button Test", () => {
const { getByTestId } = render(<SmallButtonWrapper colors="secondary" />);
expect(getByTestId("Text")).not.toBeNull();
});
it("Should detect a disabled condition", () => {
const { getByTestId } = render(
<SmallButtonWrapper colors="primary" disabled={true} />
);
expect(getByTestId("Text")).not.toBeNull();
});
it("Should detect an onPress function", () => {
const { getByTestId } = render(<SmallButtonWrapper colors="primary" />);
fireEvent(getByTestId("Touchable"), "onPress");
......
......@@ -40,8 +40,12 @@ describe("Icon Form Test", () => {
const { getByTestId } = render(<IconFormWrapper />);
expect(getByTestId("Touchable")).not.toBeNull();
});
it("Should detect a MaterialIcon", () => {
const { getByTestId } = render(<IconFormWrapper />);
it("Should detect a MaterialIcon for password", () => {
const { getByTestId } = render(<IconFormWrapper type="password" />);
expect(getByTestId("MaterialIcon")).not.toBeNull();
});
it("Should detect a MaterialIcon for search or comment", () => {
const { getByTestId } = render(<IconFormWrapper type="comment" />);
expect(getByTestId("MaterialIcon")).not.toBeNull();
});
it("Should not detect a container title", () => {
......@@ -58,24 +62,24 @@ describe("Icon Form Test", () => {
expect(getByTestId("Input").props.value).toEqual("Hello");
});
it("Should detect a password form", () => {
const { getByTestId } = render(<IconFormWrapper password />);
const { getByTestId } = render(<IconFormWrapper type="password" />);
expect(getByTestId("Icon")).not.toBeNull();
});
it("Should detect a search form", () => {
const { getByTestId } = render(<IconFormWrapper search />);
const { getByTestId } = render(<IconFormWrapper type="search" />);
expect(getByTestId("Icon")).not.toBeNull();
});
it("Should detect a disabled form", () => {
const { getByTestId } = render(<IconFormWrapper disabled />);
const { getByTestId } = render(<IconFormWrapper type="disabled" />);
expect(getByTestId("Icon")).not.toBeNull();
});
it("Should detect a visible password form", () => {
const { getByTestId } = render(<IconFormWrapper password />);
const { getByTestId } = render(<IconFormWrapper type="password" />);
fireEvent(getByTestId("Touchable"), "onPress");
expect(getByTestId("Icon")).not.toBeNull();
});
it("Should not detect a visible password form", () => {
const { getByTestId } = render(<IconFormWrapper password />);
const { getByTestId } = render(<IconFormWrapper type="password" />);
fireEvent(getByTestId("Touchable"), "onPress");
fireEvent(getByTestId("Touchable"), "onPress");
expect(getByTestId("Icon")).not.toBeNull();
......@@ -103,7 +107,7 @@ describe("Icon Form Test", () => {
expect(getByTestId("Icon")).not.toBeNull();
});
it("Should not detect an error on a search form", () => {
const { getByTestId } = render(<IconFormWrapper search />);
const { getByTestId } = render(<IconFormWrapper type="search" />);
fireEvent(getByTestId("Input"), "onEndEditing");
expect(getByTestId("Icon")).not.toBeNull();
});
......
......@@ -6,8 +6,9 @@ type props = {
text: string;
colors: string;
onPress: () => void;
disabled?: boolean;
};
const SmallButton = ({ text, colors, onPress }: props) => {
const SmallButton = ({ text, colors, onPress, disabled }: props) => {
return (
<TouchableOpacity
onPress={() => onPress()}
......@@ -16,10 +17,13 @@ const SmallButton = ({ text, colors, onPress }: props) => {
{
backgroundColor:
colors === "primary"
? Colors.button.primary.bg
? disabled
? "rgba(7, 145, 249, 0.4)"
: Colors.button.primary.bg
: Colors.button.warning.bg,
},
]}
disabled={disabled}
testID="Touchable"
>
<Text
......
......@@ -55,7 +55,7 @@ const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
text={password}
setText={setPassword}
placeholder={"Masukkan Password"}
password
type="password"
errorMessage={"Silahkan masukkan password"}
/>
</View>
......
......@@ -119,7 +119,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
text={password}
setText={setPassword}
placeholder={"Masukkan Password"}
password
type="password"
errorMessage={"Tolong masukkan password"}
/>
</View>
......
......@@ -80,7 +80,7 @@ const CategoryEcosystemListScreen = ({
text={search}
setText={setSearch}
placeholder={"Cari di kategori ini"}
search
type="search"
onPress={onSearch}
onEndEditing={onSearch}
/>
......
......@@ -124,7 +124,7 @@ const EcosystemSearch = ({ route }: EcosystemStackScreenProps<"Search">) => {
text={search}
setText={setSearch}
placeholder={"Cari dengan kata kunci ini.."}
search
type="search"
onPress={onSearch}
onEndEditing={onSearch}
/>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment