test(input): add test to input dummy data for sign up

arjunan-k · Dec 1, 2023 · eec1de9 · eec1de9
1 parent 4e8d6e6
commit eec1de9
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 33 deletions.
diff --git a/app/components/LoginContainer.tsx b/app/components/LoginContainer.tsx
@@ -27,7 +27,7 @@ const LoginContainer = () => {
  <Text fontSize="16px" fontWeight="400" margin="0 0 4px 0" as={"p"}>
  {signIn ? "If you don’t have an account" : "If you already have an account"}
  </Text>
- <Text fontSize="16px" fontWeight="400" margin="0 0 40px 0" as={"p"}>
+ <Text fontSize="16px" fontWeight="400" margin="0 0 12px 0" as={"p"}>
  You can{" "}
  {signIn ? (
  <span onClick={() => setSignIn(!signIn)} className="dark-blue-span">

diff --git a/app/components/SignIn.tsx b/app/components/SignIn.tsx
@@ -17,6 +17,7 @@ const SignIn = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const { setUser } = ChatState()!;
+ const [isError, setIsError] = useState("");
  const router = useRouter();
 
  const { mutateAsync, isPending } = useMutation({
@@ -34,14 +35,15 @@ const SignIn = () => {
 
  const submitHandler = async () => {
  if (!email || !password) {
- // console.log("Fill email and password");
+ setIsError("Fill email & password");
  return;
  }
 
  const data = { email, password };
  try {
  await mutateAsync({ data });
  } catch (error) {
+ setIsError("Failed to sign in");
  // eslint-disable-next-line no-console
  console.error("Error:", error);
  return;
@@ -55,20 +57,26 @@ const SignIn = () => {
 
  return (
  <Flex flexDirection="column" gap="24px" width="75%" mWidth="100%" as={"main"} className="sign-in">
- <Input
- value={email}
- placeholder="Your mail goes here..."
- $outline="0"
- $border="0"
- borderBottom="2px solid black"
- padding="0 0 12px 0"
- $fontSize="16px"
- $fontWeight="400"
- type="email"
- onChange={(e) => setEmail(e.target.value)}
- width="100%"
- height="40px"
- />
+ <Flex flexDirection="column" gap="12px">
+ <Text fontSize="18px" fontWeight="400" color="#b60000" as={"h3"} $height="24px">
+ {isError ? isError : ""}
+ </Text>
+ <Input
+ value={email}
+ placeholder="Your mail goes here..."
+ $outline="0"
+ $border="0"
+ borderBottom="2px solid black"
+ padding="0 0 12px 0"
+ $fontSize="16px"
+ $fontWeight="400"
+ type="email"
+ onChange={(e) => setEmail(e.target.value)}
+ width="100%"
+ height="40px"
+ name="email"
+ />
+ </Flex>
  <Container $position="relative">
  <Input
  value={password}
@@ -83,6 +91,7 @@ const SignIn = () => {
  borderBottom="2px solid black"
  width="100%"
  height="40px"
+ name="password"
  />
  <Container
  cursor="pointer"
@@ -103,6 +112,7 @@ const SignIn = () => {
  onClick={submitHandler}
  border="2px solid black"
  hColor="white"
+ className="signInButton"
  >
  <Text fontWeight="600" fontSize="18px">
  {isPending ? "Submitting..." : "Login"}
@@ -117,6 +127,7 @@ const SignIn = () => {
  onClick={guestSubmitHandler}
  border="2px solid black"
  hColor="white"
+ className="guestPassword"
  >
  <Text fontWeight="600" fontSize="18px">
  Guest User

diff --git a/app/components/SignUp.tsx b/app/components/SignUp.tsx
@@ -22,13 +22,13 @@ const SignUp = () => {
  const [picture, setPicture] = useState();
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
+ const [isError, setIsError] = useState("");
  const router = useRouter();
 
  function postDetails(pic: File | undefined) {
  setLoading(true);
  if (pic === undefined || pic === null) {
- // eslint-disable-next-line no-console
- console.log("Please upload an image");
+ setIsError("Please upload proper image");
  } else if (pic?.type === "image/jpeg" || pic?.type === "image/png") {
  const data = new FormData();
  data.append("file", pic);
@@ -53,20 +53,23 @@ const SignUp = () => {
  } else {
  // eslint-disable-next-line no-console
  console.log("Please upload an image");
+ setIsError("Please upload proper image");
  }
  }
 
  const submitHandler = async () => {
  setLoading(true);
  if (!name || !email || !password || !picture || !confirmPassword) {
  setLoading(false);
+ setIsError("Fill all the fields");
  // eslint-disable-next-line no-console
  console.log("Fill all the fields");
  return;
  }
 
  if (password != confirmPassword) {
  setLoading(false);
+ setIsError("Password is not matching");
  // eslint-disable-next-line no-console
  console.log("Password is not matching");
  return;
@@ -105,29 +108,38 @@ const SignUp = () => {
  console.error("Error:", error);
  });
  } catch (error) {
+ setIsError("Something went wrong");
  // eslint-disable-next-line no-console
  console.error("Error:", error);
  } finally {
+ setIsError("");
  setLoading(false);
  }
  };
 
  return (
  <Flex flexDirection="column" gap="24px" width="75%" mWidth="100%" as={"main"} className="sign-up">
- <Input
- value={name}
- placeholder="Your name goes here..."
- $outline="0"
- $border="0"
- borderBottom="2px solid black"
- padding="0 0 12px 0"
- $fontSize="16px"
- $fontWeight="400"
- type="text"
- onChange={(e) => setName(e.target.value)}
- width="100%"
- height="40px"
- />
+ <Flex flexDirection="column" gap="12px">
+ <Text fontSize="18px" fontWeight="400" color="#b60000" as={"h3"} $height="24px">
+ {isError ? isError : ""}
+ </Text>
+ <Input
+ value={name}
+ placeholder="Your name goes here..."
+ $outline="0"
+ $border="0"
+ borderBottom="2px solid black"
+ padding="0 0 12px 0"
+ $fontSize="16px"
+ $fontWeight="400"
+ type="text"
+ onChange={(e) => setName(e.target.value)}
+ width="100%"
+ height="40px"
+ name="name"
+ data-cy="signUpName"
+ />
+ </Flex>
  <Input
  value={email}
  placeholder="Your mail goes here..."
@@ -141,6 +153,8 @@ const SignUp = () => {
  onChange={(e) => setEmail(e.target.value)}
  width="100%"
  height="40px"
+ name="email"
+ data-cy="signUpEmail"
  />
 
  <Container $position="relative">
@@ -157,6 +171,8 @@ const SignUp = () => {
  onChange={(e) => setPassword(e.target.value)}
  width="100%"
  height="40px"
+ name="password"
+ data-cy="signUpPassword"
  />
  <Container
  cursor="pointer"
@@ -183,6 +199,8 @@ const SignUp = () => {
  onChange={(e) => setConfirmPassword(e.target.value)}
  width="100%"
  height="40px"
+ name="confirmPassword"
+ data-cy="signUpConfirmPassword"
  />
  <Container
  cursor="pointer"
@@ -207,13 +225,15 @@ const SignUp = () => {
  $fontWeight="400"
  type="file"
  accept="image/*"
+ name="imageUpload"
  onChange={(e) => {
  if (e.target && e.target.files && e.target.files.length > 0) {
  postDetails(e.target.files[0]);
  }
  }}
  width="100%"
  height="40px"
+ data-cy="signUpImageUpload"
  />
  </label>
 
@@ -226,6 +246,7 @@ const SignUp = () => {
  onClick={submitHandler}
  border="2px solid black"
  hColor="white"
+ className="signUpSubmit"
  >
  <Text fontWeight="600" fontSize="18px">
  {loading ? "loading" : "Sign Up"}

diff --git a/app/styles/Text.styled.ts b/app/styles/Text.styled.ts
@@ -18,6 +18,7 @@ interface TextProps {
  textTransform?: string;
  opacity?: string;
  $cursor?: string;
+ $height?: string;
  hBg?: string;
  hColor?: string;
  hPadding?: string;
@@ -70,6 +71,7 @@ const Text = styled.p.withConfig({
  text-transform: ${({ textTransform }) => textTransform};
  opacity: ${({ opacity }) => opacity};
  cursor: ${({ $cursor }) => $cursor};
+ height: ${({ $height }) => $height};
 
  &:hover {
  background: ${({ hBg }) => hBg};

diff --git a/cypress/e2e/signUp.cy.ts b/cypress/e2e/signUp.cy.ts
@@ -1,11 +1,17 @@
 /// <reference types="Cypress" />
 
 describe("sign up", () => {
- it("should be able to sign up to the application", () => {
+ it("should be able to click Register here ! for signing up to the application", () => {
  cy.visit("http://localhost:3000/");
  // cy.get(".signin-signup p span").click({ force: true });
  cy.get(".signin-signup p span").contains("Register here !").click();
  cy.get(".signin-signup p:first-child").should("not.have.text", "Sign In");
  cy.get(".signin-signup p:first-child").should("have.text", "Sign Up");
+ cy.get("[data-cy='signUpName']").type("Lee");
+ cy.get("[data-cy='signUpEmail']").type("[email protected]");
+ cy.get("[data-cy='signUpPassword']").type("123456");
+ cy.get("[data-cy='signUpConfirmPassword']").type("123456");
+ cy.get("[data-cy='signUpImageUpload']").selectFile("../../public/images/brad.jpg");
+ cy.get(".sign-up .signUpSubmit").contains("Sign Up").click();
  });
 });
diff --git a/public/images/brad.jpg b/public/images/brad.jpg