test(upload): add test to check image upload in sign up

app/components/SignUp.tsx

@@ -10,17 +10,13 @@ import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
 import Text from "@/styles/Text.styled";
 
 const SignUp = () => {
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const [name, setName] = useState("");
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const [email, setEmail] = useState("");
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const [password, setPassword] = useState("");
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const [confirmPassword, setConfirmPassword] = useState("");
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const [picture, setPicture] = useState();
  const [showPassword, setShowPassword] = useState(false);
+ const [uploadedImageName, setUploadedImageName] = useState("");
  const [loading, setLoading] = useState(false);
  const [isError, setIsError] = useState("");
  const router = useRouter();
@@ -29,9 +25,10 @@ const SignUp = () => {
  setLoading(true);
  if (pic === undefined || pic === null) {
  setIsError("Please upload proper image");
- } else if (pic?.type === "image/jpeg" || pic?.type === "image/png") {
+ } else if (pic?.type === "image/jpeg" || pic?.type === "image/png" || pic?.type === "image/jpg") {
  const data = new FormData();
  data.append("file", pic);
+ setUploadedImageName("Profile picture uploaded successfully");
  data.append("upload_preset", "byteping");
  data.append("cloud_name", "dx21sien7");
  fetch("https://api.cloudinary.com/v1_1/dx21sien7/image/upload", {
@@ -229,8 +226,8 @@ const SignUp = () => {
  </Container>
  </Container>
 
- <label className="custom-file-upload">
- Upload your image
+ <label className="custom-file-upload" data-cy="signUpImageUploadLabel">
+ {uploadedImageName ? uploadedImageName : "Upload your image"}
  <Input
  placeholder="Your secret goes here..."
  $outline="0"

cypress/e2e/login.cy.ts

@@ -0,0 +1,64 @@
+/// <reference types="Cypress" />
+
+describe(
+ "sign up",
+ {
+ defaultCommandTimeout: 4000,
+ browser: "chrome"
+ },
+ () => {
+ beforeEach(() => {
+ cy.fixture("signUp.json").as("signUpJson");
+ cy.clock();
+ // cy.tick(2000);
+ cy.visit("/").then((win) => {
+ cy.get("@signUpJson").then((signUpJson) => {
+ cy.stub(win.navigator.geolocation, "getCurrentPosition")
+ .as("getUserPosition")
+ .callsFake((cb) => {
+ setTimeout(() => {
+ cb({ signUpJson });
+ }, 100);
+ });
+ });
+ });
+ });
+ cy.get("@getUserPosition").should("have.been.called");
+ it("should be able to click Register here ! for signing up to the application", () => {
+ cy.visit("http://localhost:3000/");
+ cy.task("seedDatabase", "arjunank.json").then((returnValue) => {
+ console.log(returnValue);
+ });
+ // cy.get(".signin-signup p span").click({ force: true });
+ cy.get("[data-cy='registerHereButton']").then((el) => {
+ expect(el.text("Register Here !"));
+ });
+ cy.get("[data-cy='registerHereButton']").click();
+ // cy.get("[data-cy='signInAndUpTitle']").should("have.text", "Sign Up");
+ // cy.get("[data-cy='signInAndUpTitle']").should("not.have.text", "Sign In");
+ // cy.submitForm();
+ cy.get("[data-cy='signUpSubmitButton']").as("submitButton");
+ cy.get("[data-cy='signUpName']").focus().blur();
+ cy.get("@submitButton")
+ .contains("Sign Up")
+ .click()
+ .then((el) => {
+ expect(el.text("Sign Up"));
+ });
+ cy.get("[data-cy='signUpErrorMessage']").should("have.class", "signUpErrorMessage");
+ 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{enter}");
+ // cy.get("[data-cy='signUpImageUpload']").selectFile("../../public/images/brad.jpg");
+ // cy.get("@submitButton").contains("Sign Up").click().and("have.text", "Loading");
+ cy.get("@submitButton")
+ .contains("Sign Up")
+ .click()
+ .then((el) => {
+ expect(el.text("Sign Up"));
+ });
+ cy.get("[data-cy='signUpErrorMessage']").should("have.class", "signUpErrorMessage");
+ });
+ }
+);

cypress/e2e/signUp.cy.ts

@@ -1,64 +1,41 @@
 /// <reference types="Cypress" />
 
-describe(
- "sign up",
- {
- defaultCommandTimeout: 10000,
- browser: "chrome"
- },
- () => {
- beforeEach(() => {
- cy.fixture("signUp.json").as("signUpJson");
- cy.clock();
- // cy.tick(2000);
- cy.visit("/").then((win) => {
- cy.get("@signUpJson").then((signUpJson) => {
- cy.stub(win.navigator.geolocation, "getCurrentPosition")
- .as("getUserPosition")
- .callsFake((cb) => {
- setTimeout(() => {
- cb({ signUpJson });
- }, 100);
- });
- });
- });
- });
- cy.get("@getUserPosition").should("have.been.called");
- it("should be able to click Register here ! for signing up to the application", () => {
- cy.visit("http://localhost:3000/");
- cy.task("seedDatabase", "arjunank.json").then((returnValue) => {
- console.log(returnValue);
- });
- // cy.get(".signin-signup p span").click({ force: true });
- cy.get("[data-cy='registerHereButton']").then((el) => {
- expect(el.text("Register Here !"));
- });
- cy.get("[data-cy='registerHereButton']").click();
- // cy.get("[data-cy='signInAndUpTitle']").should("have.text", "Sign Up");
- // cy.get("[data-cy='signInAndUpTitle']").should("not.have.text", "Sign In");
- // cy.submitForm();
- cy.get("[data-cy='signUpSubmitButton']").as("submitButton");
- cy.get("[data-cy='signUpName']").focus().blur();
- cy.get("@submitButton")
- .contains("Sign Up")
- .click()
- .then((el) => {
- expect(el.text("Sign Up"));
- });
- cy.get("[data-cy='signUpErrorMessage']").should("have.class", "signUpErrorMessage");
- 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{enter}");
- // cy.get("[data-cy='signUpImageUpload']").selectFile("../../public/images/brad.jpg");
- // cy.get("@submitButton").contains("Sign Up").click().and("have.text", "Loading");
- cy.get("@submitButton")
- .contains("Sign Up")
- .click()
- .then((el) => {
- expect(el.text("Sign Up"));
- });
- cy.get("[data-cy='signUpErrorMessage']").should("have.class", "signUpErrorMessage");
- });
- }
-);
+describe("sign up", { browser: "chrome" }, () => {
+ beforeEach(() => {
+ cy.fixture("signUp.json").as("signUpJson");
+ cy.clock();
+ cy.viewport(1500, 800);
+ cy.visit("/");
+ });
+ it("should test entire sign up functionalities", () => {
+ cy.get("[data-cy='registerHereButton']").should("have.text", "Register here !");
+ cy.get("[data-cy='registerHereButton']").click();
+ cy.get("[data-cy='signInAndUpTitle']").contains("Sign Up");
+ cy.get("[data-cy='signUpName']").focus().blur();
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Please type your name");
+ cy.get("[data-cy='signUpName']").type("Adrian");
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Please type your email");
+ cy.get("[data-cy='signUpEmail']").type("[email protected]");
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Please type your password");
+ cy.get("[data-cy='signUpPassword']").type("123456");
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Please confirm your password");
+ cy.get("[data-cy='signUpConfirmPassword']").type("adcdfe");
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Please upload your picture");
+ cy.get("[data-cy='signUpImageUploadLabel']").should("have.text", "Upload your image");
+ cy.get("[data-cy='signUpImageUpload']").selectFile("cypress/images/brad.jpg", { force: true });
+ cy.get("[data-cy='signUpImageUploadLabel']").should("have.text", "Profile picture uploaded successfully");
+ cy.get("[data-cy='signUpSubmitButton']").click({ force: true });
+ cy.get("[data-cy='signUpErrorMessage']").should("have.text", "Password is not matching");
+ cy.get("[data-cy='signUpConfirmPassword']").type("123456");
+ cy.get("[data-cy='signUpSubmitButton']").should("have.text", "Sign Up");
+ cy.get("[data-cy='signUpSubmitButton']").click();
+ cy.get("[data-cy='signUpSubmitButton']").should("have.text", "Loading");
+ cy.location("pathname").should("eq", "/chats");
+ cy.screenshot("signUp");
+ });
+});