test: 첫번째 인적사항 페이지 테스트 코드 #167
Conversation
| it("사용자는 5글자가 넘는 이름을 입력할 시 앞의 5글자까지만 입력을 받는다.", () => { | ||
| cy.get("@nameInput") | ||
| .type("에코노베이션") | ||
| .should("have.value", "에코노베이") | ||
| .clear(); | ||
| }); |
There was a problem hiding this comment.
오... 바로 위의 코드로 저는 합칠 생각을 했었는데 이렇게 보니, 코드를 나누는 것이 더 좋아보입니다.
| cy.get("@phoneInput").type("01011"); | ||
| cy.get("@phoneInput") | ||
| .siblings() | ||
| .find("div") |
There was a problem hiding this comment.
이것도 괜찮지만, find 이후 exist로 테스트 하는 것도 의미상 괜찮아 보입니다.
There was a problem hiding this comment.
오호 넵 너무좋네요 감사합니다~!
| input: { | ||
| name: "김아무개", | ||
| contacted: "01012341234", | ||
| classOf: "123456", | ||
| registered: "재학", | ||
| grade: "4학년", | ||
| semester: "1학기", | ||
| }, |
There was a problem hiding this comment.
testSuite를 나타내는 객체인데요, 입력과 나와야하는 출력을 데이터로 구조화? 해보았습니다 ㅋㅋ
There was a problem hiding this comment.
사실... 이 데이터를 안써서 어떻게 되어 있나 의미상 넣어두었나 싶었어요 ㅋㅋㅋ(의미상 넣어둔거군요)
|
|
||
| it("모든 올바른 값을 입력한 뒤에는 작성한 값이 LocalStorage에 저장된다.", () => { | ||
| /* test 케이스 데이터 */ | ||
| const testSuite = { |
There was a problem hiding this comment.
저였으면, 단순히 하나씩 equal()에 그대로 박았을 것 같은데, 이렇게 묶는 것이 훨씬 가독성이 좋네요.. 저도 참고하도록 하겠습니다
| cy.get("@nameInput") | ||
| .type("에코노베이션") | ||
| .should("have.value", "에코노베이") | ||
| .clear(); |
There was a problem hiding this comment.
혹시.. 마지막 부분에 clear를 붙인 이유가 있나요?
There was a problem hiding this comment.
should로 assertion이 끝나서 값을 비워주려고 clear()를 호출하였습니다~!
| 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(); |
There was a problem hiding this comment.
이 내용은 commands.ts 파일에 Cypress.Commands.add를 이용해서 함수로 만들어 사용해 보는게 좋을 것 같아요 !
There was a problem hiding this comment.
네 좋습니다! 민보님이랑 건규님도 commands로 만드셔서 호출하신거 같은데, 여기서 구현하면 중복이 일어날 것 같으니 다 PR머지된 이후 새로 작성하겠습니다 ~
| cy.get("label").contains("선택없음").click(); | ||
| cy.get("button").contains(/다음/).click(); | ||
|
|
||
| cy.get("input").first().as("nameInput"); |
There was a problem hiding this comment.
아래 코드와 형식을 맞추기 위해서 first() -> eq(0)으로 변경하는 것도 좋아보여요. (이건 개인적인 생각입니다.)
| cy.on("window:alert", (text) => { | ||
| expect(text).to.equal("필수 질문을 작성해주세요."); | ||
| }); |
There was a problem hiding this comment.
이 부분은 건규님이 작성하는 함수로 대체하는게 좋아보이네요.
There was a problem hiding this comment.
#167 (comment) 와 같이 다음 PR에서 리팩토링 해보겠습니다!
| it("사용자는 연락처에 11자리 숫자만 기입할 수 있다. 숫자를 기입하면, 표준 연락처 형식에 맞게 값을 보여준다.", () => { | ||
| cy.get("@phoneInput") | ||
| .type("01011111111") | ||
| .should("have.value", "010-1111-1111") |
There was a problem hiding this comment.
조금 과한 액션일 수도 있는데 옆에 주석으로 정규식을 작성해보는 것도 좋을 것 같습니다 !
/^\d{3}-\d{4}-\d{4}$/
주요 변경사항
검증 스펙
관련 이슈
체크리스트
reviewers설정label설정milestone설정