[FE] issue201: 스터디 개설 페이지 폼 유효성 테스트 추가 #202
Conversation
|
|
||
| export default defineConfig({ | ||
| e2e: { | ||
| setupNodeEvents(on, config) { |
There was a problem hiding this comment.
https://docs.cypress.io/api/commands/task#Read-a-file-that-might-not-exist 이런식으로 사용하는것 같은데, 지금은 필요 없어보이네요!
There was a problem hiding this comment.
이거 cypress open하고 설정하면 자동으로 생기는 파일이에요!
|
|
||
| const minText = 'a'; | ||
| const maxText30 = 'abcdefghijklmnopqrstuvwxyzabcd'; | ||
| const redOutlineCss = 'rgb(255, 0, 0) solid 2px'; |
There was a problem hiding this comment.
| const redOutlineCss = 'rgb(255, 0, 0) solid 2px'; | |
| const redOutlineCss = 'rgb(255, 0, 0) solid 2px'; |
.invalid class가 있는지 확인하는건 어떨까요?
className보다는 css가 더 바뀔 가능성이 높아 보여서요!
There was a problem hiding this comment.
저희 클래스네임 없애기로 하지 않았나요?!
There was a problem hiding this comment.
아 맞네요!
그러면 조금 다른 방법을 찾아보도록 하고, 우선 머지 하겠습니다!
| }); | ||
|
|
||
| it(`스터디 제목이 ${TITLE_LENGTH.MAX.VALUE}글자를 초과하면 초과한 글자는 입력되지 않는다.`, () => { | ||
| cy.findByPlaceholderText('스터디 이름').type(maxText30 + 'a'); |
There was a problem hiding this comment.
placeholder보다 element에 test-id attribute를 넣어서 찾는건 어떨까요?
test-id보다 placeholder가 더 바뀌기 쉬운 부분 같아서요!
There was a problem hiding this comment.
test-id 안 쓴 이유가 코드에 테스트만을 위한 코드를 넣기가 싫어서 그렇습니다! 게다가 이번 테스트코드는 임시로 작성한 것이기도 하고..
물론 placeholder는 자주 바뀔 수 있지만 변수로 관리한다면 바뀌어도 크게 깨지지는 않을 것 같습니다
| }); | ||
|
|
||
| it(`스터디 제목이 ${TITLE_LENGTH.MIN.VALUE}글자 미만이면 개설하기 버튼을 눌렀을 때 입력창 테두리가 빨갛게 된다.`, () => { | ||
| cy.findByPlaceholderText('스터디 이름').type(minText).clear(); |
There was a problem hiding this comment.
cypress로 찾은 element를 변수에 담아서 사용하는건 어떨까요?
반복적으로 찾아서 쓰는게 비효율적으로 보여서요!
https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Sharing-Context
| } | ||
| } | ||
|
|
||
| Cypress.Commands.add('mount', mount); |
There was a problem hiding this comment.
Cypress.Commands.add('mount', mount);
이거슨,,무엇인가요?
There was a problem hiding this comment.
기본 설정입니다. 저렇게 하면 컴포넌트 테스트에서 mount할 때 항상 mount를 import하지 않아도 돼요!
| @@ -71,7 +71,7 @@ export const CreateStudyPage = styled.div` | |||
| border-radius: 4px; | |||
| border: 1px solid ${theme.colors.secondary.dark}; | |||
| background-color: ${theme.colors.white}; | |||
| color: ${theme.colors.black} | |||
| color: ${theme.colors.black}; | |||
frontend/tsconfig.json
Outdated
| @@ -41,7 +41,8 @@ | |||
| "@pages": ["pages/index.ts"], | |||
| "@pages/*": ["pages/*"] | |||
| }, | |||
| "typeRoots": ["src/custom-types"] | |||
| "typeRoots": ["src/custom-types"], | |||
| "types": ["cypress", "@testing-library/cypress"] | |||
There was a problem hiding this comment.
| "types": ["cypress", "@testing-library/cypress"] | |
| "types": ["cypress", "@testing-library/cypress"] # https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfig-json |
설정한 이유를 링크로 남기는건 어떨까요?
| }, | ||
| "include": ["src"] | ||
| "include": ["src", "node_modules/cypress", "cypress/**/*.cy.ts", "cypress/**/*.cy.tsx"] |
There was a problem hiding this comment.
| "include": ["src", "node_modules/cypress", "cypress/**/*.cy.ts", "cypress/**/*.cy.tsx"] | |
| "include": ["src", "node_modules/cypress", "cypress/**/*.cy.ts", "cypress/**/*.cy.tsx"] |
node_modules/cypress도 include 해야 하나요?
| setupNodeEvents(on, config) { | ||
| // implement node event listeners here | ||
| }, | ||
| baseUrl: 'http://localhost:3000', |
| }, | ||
|
|
||
| component: { | ||
| devServer: { |
There was a problem hiding this comment.
webpackConfig 옵션도 명시적으로 넣어주면 좋을것 같아요!
https://docs.cypress.io/guides/component-testing/component-framework-configuration#React-with-Webpack
There was a problem hiding this comment.
프로젝트에 아직 webpack.config 파일이 없습니다!
요약
cypress를 사용하여 스터디 개설 페이지에 폼 유효성 테스트를 추가했습니다.
세부사항
close #201