test: 첫번째 인적사항 페이지 테스트 코드 (#167)

frontend/cypress/e2e/application.personal_info.cy.ts

@@ -0,0 +1,172 @@
+const BASE_URL = "http://localhost:3000";
+
+describe("인적사항 첫번째 페이지 입력 검증 테스트: ", () => {
+  beforeEach(() => {
+    cy.visit(`${BASE_URL}/application`);
+    cy.clearAllLocalStorage();
+    cy.get("label").contains("개발자").click();
+    cy.get("label").contains("WEB").click();
+    cy.wait(100);
+    cy.get("label").contains("선택없음").click();
+    cy.get("button").contains(/다음/).click();
+
+    cy.get("input").first().as("nameInput");
+    cy.get("input").eq(1).as("phoneInput");
+    cy.get("input").eq(2).as("studentIdInput");
+    cy.get("input").eq(3).as("academicStatusInput");
+    cy.get("label").contains("4학년").as("fourthGradeLabel");
+  });
+
+  it("사용자는 이름을 5글자까지 입력할 수 있다.", () => {
+    cy.get("@nameInput").type("에").should("have.value", "에").clear();
+    cy.get("@nameInput").type("에코노").should("have.value", "에코노").clear();
+    cy.get("@nameInput").type("abcde").should("have.value", "abcde").clear();
+  });
+
+  it("사용자는 5글자가 넘는 이름을 입력할 시 앞의 5글자까지만 입력을 받는다.", () => {
+    cy.get("@nameInput")
+      .type("에코노베이션")
+      .should("have.value", "에코노베이")
+      .clear();
+  });
+
+  it("사용자는 연락처에 11자리 숫자만 기입할 수 있다. 숫자를 기입하면, 표준 연락처 형식에 맞게 값을 보여준다.", () => {
+    cy.get("@phoneInput")
+      .type("01011111111")
+      .should("have.value", "010-1111-1111")
+      .clear();
+  });
+
+  it('사용자가 연락처를 입력한 시점부터 연락처 형식에 맞게 작성을 완료하지 못한경우 "연락처를 입력해주세요." 라는 안내문구가 입력창에 나타난다.', () => {
+    cy.get("@phoneInput").type("01011");
+    cy.get("@phoneInput")
+      .siblings()
+      .find("div")
+      .should("have.text", "연락처를 입력해주세요.");
+  });
+
+  it("사용자는 학번에 6자리 숫자를 입력할 수 있다.", () => {
+    cy.get("@studentIdInput").type("1").should("have.value", "1").clear();
+    cy.get("@studentIdInput").type("123").should("have.value", "123").clear();
+    cy.get("@studentIdInput")
+      .type("123456")
+      .should("have.value", "123456")
+      .clear();
+  });
+
+  it("사용자는 학번에 6자리를 초과하는 숫자를 입력할 경우 앞의 6글자까지만 입력받는다.", () => {
+    cy.get("@studentIdInput")
+      .type("1234567")
+      .should("have.value", "123456")
+      .clear();
+  });
+
+  it('사용자는 학번을 입력한 시점부터 학번 형식에 맞게 작성을 완료하지 못한경우 "학번을 입력해주세요"라는 안내문구가 입력창에 나타난다.', () => {
+    cy.get("@studentIdInput").type("1");
+    cy.get("@studentIdInput")
+      .siblings()
+      .find("div")
+      .should("have.text", "학번을 입력해주세요.");
+  });
+
+  it("사용자는 학적상태(재학/휴학)을 입력할 수 있다.", () => {
+    cy.get("@academicStatusInput")
+      .type("재학중")
+      .should("have.value", "재학중")
+      .clear();
+    cy.get("@academicStatusInput")
+      .type("부트캠프로 인한 휴학. 2025년 1학기에 복학할 예정입니다.")
+      .should(
+        "have.value",
+        "부트캠프로 인한 휴학. 2025년 1학기에 복학할 예정입니다."
+      );
+  });
+
+  it("사용자는 학년을 선택한 후 학기를 1학기, 2학기 중 선택할 수 있다.", () => {
+    cy.get("@fourthGradeLabel").click();
+    cy.get("label").contains(/학기/).eq(0).click();
+
+    cy.getAllLocalStorage({ log: true }).then((result) => {
+      const ls = result[BASE_URL];
+      expect(ls["grade"]).to.match(/4학년/);
+      expect(ls["semester"]).to.match(/1학기/);
+    });
+  });
+});
+
+describe("인적사항 첫번째 페이지 전환 테스트:", () => {
+  beforeEach(() => {
+    cy.visit(`${BASE_URL}/application`);
+    cy.clearAllLocalStorage();
+    cy.get("label").contains("개발자").click();
+    cy.get("label").contains("WEB").click();
+    cy.wait(100);
+    cy.get("label").contains("선택없음").click();
+    cy.get("button").contains(/다음/).click();
+
+    cy.get("input").first().as("nameInput");
+    cy.get("input").eq(1).as("phoneInput");
+    cy.get("input").eq(2).as("studentIdInput");
+    cy.get("input").eq(3).as("academicStatusInput");
+    cy.get("label").contains("4학년").as("fourthGradeLabel");
+  });
+
+  it("모든 올바른 값을 입력한 뒤에는 작성한 값이 LocalStorage에 저장된다.", () => {
+    /* test 케이스 데이터 */
+    const testSuite = {
+      input: {
+        name: "김아무개",
+        contacted: "01012341234",
+        classOf: "123456",
+        registered: "재학",
+        grade: "4학년",
+        semester: "1학기",
+      },
+      answer: {
+        name: '"김아무개"',
+        contacted: '"010-1234-1234"',
+        classOf: '"123456"',
+        registered: '"재학"',
+        grade: '"4학년"',
+        semester: '"1학기"',
+      },
+    };
+    /* 폼 작성 */
+    cy.get("@nameInput").type("김아무개");
+    cy.get("@phoneInput").type("01012341234");
+    cy.get("@studentIdInput").type("123456");
+    cy.get("@academicStatusInput").type("재학");
+    cy.get("@fourthGradeLabel").click();
+    cy.get("label").contains(/학기/).eq(0).click();
+
+    /* 값 검증 */
+    cy.getAllLocalStorage({ log: true }).then((result) => {
+      // TODO: 중복 줄이기
+      const ls = result[BASE_URL];
+      expect(ls["name"]).to.equal(testSuite.answer.name);
+      expect(ls["contacted"]).to.equal(testSuite.answer.contacted);
+      expect(ls["classOf"]).to.equal(testSuite.answer.classOf);
+      expect(ls["registered"]).to.equal(testSuite.answer.registered);
+      expect(ls["grade"]).to.equal(testSuite.answer.grade);
+      expect(ls["semester"]).to.equal(testSuite.answer.semester);
+    });
+  });
+
+  it("질문 제목 네비게이션을 통해 이전 페이지로 이동 가능하다.", () => {
+    cy.get("button")
+      .contains(/프로젝트 희망 분야/)
+      .click();
+    cy.get("span")
+      .contains("2순위가 없다면 '없음'을 선택해주세요.")
+      .should("have.text", "2순위가 없다면 '없음'을 선택해주세요.");
+  });
+
+  it("현재 페이지가 제대로 작성되어있지 않은 상황에서 이후 질문 페이지로 이동 시 작성을 요청하는 alert창이 나타난다.", () => {
+    cy.get("button")
+      .contains(/기타 질문 사항/)
+      .click();
+    cy.on("window:alert", (text) => {
+      expect(text).to.equal("필수 질문을 작성해주세요.");
+    });
+  });
+});