Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

[FE] test: cypress를 이용한 e2e 테스트, CI 추가 #261

Merged
merged 28 commits into from
Aug 14, 2023

Conversation

yogjin
Copy link
Collaborator

@yogjin yogjin commented Aug 12, 2023

🛠️ Issue

✅ Tasks

  • cypress 설치
  • cypress 테스트 코드 추가
  • cypress CI 추가

⏰ Time Difference

  • 8 + 2

📝 Note

@yogjin yogjin added ⚙️ setting 프로젝트 세팅 🧪 test 테스트 코드 🧱 infra 인프라 🖥️ frontend 프론트엔드 작업 labels Aug 12, 2023
@yogjin yogjin self-assigned this Aug 12, 2023
@yogjin yogjin marked this pull request as ready for review August 12, 2023 13:21
@yogjin yogjin requested review from jeonjeunghoon and nangkyeonglim and removed request for jeonjeunghoon August 12, 2023 13:22
Copy link
Collaborator

@nangkyeonglim nangkyeonglim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿굿 좋네요!
드래그앤드롭으로 테스트 하는 것도 신기하네요! 많이 배워갑니다~
oAuth 기능이 완성되면 블로그 발행기능 까지 테스트하면 아주 좋을 것 같네요
고생하셨습니다!

frontend/cypress/fixtures/example.json Show resolved Hide resolved
@@ -9,12 +9,13 @@
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Node",
"sourceMap": true,
"sourceMap": false,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 false로 바꿔준 이유가 있나요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

10dbbb3 이거 때문이긴한데, 조금 찝찝하긴하네요

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 어떤 에러였는지 설명해주실 수 있나요?

.github/workflows/fe-test-e2e.yml Show resolved Hide resolved
Copy link
Member

@jeonjeunghoon jeonjeunghoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코멘트 확인만 해주세요!
고생하셨습니다 ㅎㅎ
나중에 글 삭제도 추가하면 좋을 것같네요~!

@@ -12,7 +12,7 @@
"start:prod": "cross-env NODE_ENV=production webpack serve --config webpack.prod.js",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"test": "jest --maxWorkers=50%"
"test": "cypress open"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

localhost:3000 여는 동작 추가하면 좋을 것같아요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가했습니다.
추후 production 테스트(8080)도 추가해야겠네요

$isDragging={isDragging}
$width={width}
$height={height}
aria-label='파일 업로드 존'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

파일 업로드 존 이라는 이름이 조금 어색한 것같아요.
파일 업로드 버튼 같은 이름은 어떨까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보이스오버에서 버튼은 자동으로 붙어서 파일 업로드 로 수정했습니다~

@yogjin yogjin merged commit 2394ba8 into develop Aug 14, 2023
1 check passed
@yogjin yogjin deleted the feature/cypress-255 branch August 14, 2023 01:25
HubCreator pushed a commit that referenced this pull request Aug 14, 2023
* chore: `cypress` 설치 및 설정파일 추가

* fix: cypress sourceMap 에러로 인해 `tsconfig` 설정에서 sourceMap 제거

* chore: `eslint-plugin-cypress` 설치

* test: `cypress` config `baseUrl` 옵션 추가

* test: `@testing-library/cypress` 설치 및 환경설정

* test: 글 가져오기 모달 창 열기 테스트 추가

* feat: 카테고리 추가 input에 `aria-label` 추가

* test: 카테고리 추가 테스트 추가

* chore: `cypress-real-events` 설치

실제 마우스 호버링 동작 재현을 위해 설치
호버링 말고도 많은 동작을 재현할 수 있음

* feat: 카테고리 이름 수정 입력 input `aria-label` 추가

* test: 카테고리 이름 수정 테스트 추가

* test: 카테고리 삭제 테스트 추가

* chore: 파일 업로드 테스트를 위한 `cypress-file-upload` 라이브러리 설치

* feat: 파일업로드 모달에 있는 파일 업로드 존 `aria-label` 추가

* test: 드래그 앤 드롭으로 마크다운 파일을 업로드하는 기능 테스트 추가

* test: 기본 카테고리에서 업로드한 글을 확인하는 테스트 추가

* refactor: test 성격에 맞게 describle 나누기

* test: cypress test CI 스크립트 추가

* refactor: conflict 해결

* chore: cypress test CI 스크립트 문법 수정

* chore: default run working-directory 수정

${{ vars.FE_DIRECTORY }} 인식 안되는 문제..

* chore: actions 개행 수정

* chore: e2e test CI `paths` 추가

* Update fe-test-e2e.yml

if: contains(github.event.pull_request.labels.*.name, 'frontend') 제거

* Update fe-test-e2e.yml

* chore: 서버 시작 후 테스트 하는 스크립트 추가

* chore: cypress 테스트 비디오 gitignore에 추가

* refactor: aria-label `파일 업로드 존` -> `파일 업로드`
echo724 pushed a commit that referenced this pull request Aug 18, 2023
* chore: `cypress` 설치 및 설정파일 추가

* fix: cypress sourceMap 에러로 인해 `tsconfig` 설정에서 sourceMap 제거

* chore: `eslint-plugin-cypress` 설치

* test: `cypress` config `baseUrl` 옵션 추가

* test: `@testing-library/cypress` 설치 및 환경설정

* test: 글 가져오기 모달 창 열기 테스트 추가

* feat: 카테고리 추가 input에 `aria-label` 추가

* test: 카테고리 추가 테스트 추가

* chore: `cypress-real-events` 설치

실제 마우스 호버링 동작 재현을 위해 설치
호버링 말고도 많은 동작을 재현할 수 있음

* feat: 카테고리 이름 수정 입력 input `aria-label` 추가

* test: 카테고리 이름 수정 테스트 추가

* test: 카테고리 삭제 테스트 추가

* chore: 파일 업로드 테스트를 위한 `cypress-file-upload` 라이브러리 설치

* feat: 파일업로드 모달에 있는 파일 업로드 존 `aria-label` 추가

* test: 드래그 앤 드롭으로 마크다운 파일을 업로드하는 기능 테스트 추가

* test: 기본 카테고리에서 업로드한 글을 확인하는 테스트 추가

* refactor: test 성격에 맞게 describle 나누기

* test: cypress test CI 스크립트 추가

* refactor: conflict 해결

* chore: cypress test CI 스크립트 문법 수정

* chore: default run working-directory 수정

${{ vars.FE_DIRECTORY }} 인식 안되는 문제..

* chore: actions 개행 수정

* chore: e2e test CI `paths` 추가

* Update fe-test-e2e.yml

if: contains(github.event.pull_request.labels.*.name, 'frontend') 제거

* Update fe-test-e2e.yml

* chore: 서버 시작 후 테스트 하는 스크립트 추가

* chore: cypress 테스트 비디오 gitignore에 추가

* refactor: aria-label `파일 업로드 존` -> `파일 업로드`
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🖥️ frontend 프론트엔드 작업 🧱 infra 인프라 ⚙️ setting 프로젝트 세팅 🧪 test 테스트 코드
Projects
None yet
Development

Successfully merging this pull request may close these issues.

cypress e2e 테스트 및 CI 추가 프론트엔드 테스트 자동화
3 participants