[FE] playwright에 자동 로그인 기능과 탭과 질문 렌더링, 체크리스트 생성과 관련된 e2e 테스트를 추가한다. #849

ooherin · 2024-10-21T11:22:44Z

❗ Issue

[FE] e2e 테스트 코드를 보강한다. #749

✨ 구현한 기능

테스트 전 자동 로그인 기능(auth) 추가

playwright 테스트 전 자동으로 로그인하는 로직을 추가했습니다.
밑 사진의auth.setup.ts 의 authenticatie 가 자동으로 로그인되는 테스트입니다. 모든 테스트들이 이 테스트를 거치고 실행됩니다. authenticatie 는 로그인 완료 후 user.json 에 쿠키 정보를 저장하고, 이 인증정보를 요청에 사용하도록 해줍니다.
해당 기능을 공식문서를 참고해서 하다보니, 기존에 src 에 있던 e2e 폴더를 src 밖에 playwright 폴더로 이동하여 수정했습니다. 해당 폴더는 빌드 때 추가되지 않도록 할 수 있으며, 공식문서에서도 지향하는 방법이여서 적용했어요.
해당 테스트는 localhost:3000 및 실제 api 를 사용하기 때문에 cd 가 불가능합니다. 그래서 아깝지만..playwright.yml 을 삭제했습니다. 즉, 이 e2e 테스트는 수동으로 돌려야 합니다.

탭 렌더링 e2e 테스트 추가

탭과 질문들이 렌더링되는 것이 중요하고, 실제로 커버가 안되는 케이스를 봤기 때문에 이에 대한 테스트를 추가했습니다
각각 (생성 페이지 / 편집 페이지 / 질문 선택 페이지) 3 케이스이며, 현재 편집 페이지의 경우 테스트가 불가능해 skip 처리 해두었습니다. 나머지는 밑처럼 잘 통과합니다.

체크리스트 작성 후 생성 테스트 추가

기존에 '비어있는' 체크리스트를 생성하는 테스트가 있었지만, 실제로 주소 부분을 제외하고 입력값을 받은 후 체크리스트를 생성하는 테스트를 추가했습니다. 이 또한 아직 테스트가 불가능해 skip 처리 했으며, 제이드가 생성 페이지를 리팩토링하는 대로 실행해서 테스트 해주시면 될 것 같습니다!

피드백 반영 = `playwright.config` 분리

api, msw 환경에서 둘 다 테스트 하기 위해서 해당 config 를 분리해서 작업했습니다. package.json 안에 있는 명령어도 추가되었습니다. 이제는 cd 설정으로 인해 msw 의 테스트만 자동으로 테스트되고, api 테스트는 필요시 pr 명령어를 수동으로 쳐서 테스트 할 수 있습니다.

📢 논의하고 싶은 내용

⭐️ 중요

user.json 에는 민감한 쿠키 정보가 포함되어 있는 파일입니다. .gitignore 에 해당 파일을 추가해서 올라가지 않아 개별적으로 다음과 같이 playwright 에 폴더와 파일을 설정해주셔야 합니다.

//user.json
{
  "cookies": [
  ],
  "origins": []
}

또한 .env.dev 의 내용이 추가되었으니(테스트 계정 정보) env 를 업데이트하시길 바래요! 이 또한 노션에 업데이트해놓겠습니다.

🎸 기타

github-actions · 2024-10-21T11:23:42Z

🚀 storybook: https://669cc4025d9f500bb8c34778-nyrjrhxwre.chromatic.com/

github-actions · 2024-10-21T11:52:45Z

🚀 storybook: https://669cc4025d9f500bb8c34778-qkylwvixqy.chromatic.com/

ooherin · 2024-10-21T11:29:31Z

frontend/src/store/useChecklistStore.ts

@@ -60,8 +60,10 @@ const useChecklistStore = create<ChecklistState>()(
            })),
          }));

-          set({ checklistCategoryQnA });
-          get().actions._parseCategory();
+          if (checklistCategoryQnA.length) {


이 부분은 서버에서 categories : [] 로 올때 무한 렌더링을 방지하기 위해 추가한 코드입니다!

이부분에서 한번 처리를 해줘서 위에 조건식에서 빠진걸까요?

그거랑 별개긴 해요. 밑에다가 코멘트 달았습니다!

github-actions · 2024-10-21T11:57:56Z

🚀 storybook: https://669cc4025d9f500bb8c34778-ikjearamec.chromatic.com/

github-actions · 2024-10-21T12:06:08Z

🚀 storybook: https://669cc4025d9f500bb8c34778-saifjvfydc.chromatic.com/

healim01

확인했습니다~! 코멘트 하나있는지 맞게 이해한건지 확인해주세요~!

healim01 · 2024-10-21T17:24:40Z

frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx

@@ -12,7 +12,7 @@ const NewChecklistTab = () => {
  const { getTabsForChecklist } = useTabs();

  const categoryTabs = useMemo(() => {
-    if (isFetched && checklist && checklistStore.length) {


checklistStore.length 조건을 빼신 이유가 있을까요?

length 가 없는 경우 categories : [] 로 오는 경우 탭이 아예 렌더링 되지 않는 경우를 방지 하기 위함입니다! 해당 조건이 불필요한 조건이라고 생각했는데, 혹시 문제가 있을까요?

length 가 아예 없는 경우에 탭을 보여줘야 하는 이유가 뭘까요? 질문 하나도 없다면 기본 탭이 아니라 질문 추가를 유도하는 탭이 생성되어야 할거 같은데 리안은 어떻게 생각하시나요?

healim01 · 2024-10-21T17:26:35Z

frontend/src/store/useChecklistStore.ts

@@ -60,8 +60,10 @@ const useChecklistStore = create<ChecklistState>()(
            })),
          }));

-          set({ checklistCategoryQnA });
-          get().actions._parseCategory();
+          if (checklistCategoryQnA.length) {


이부분에서 한번 처리를 해줘서 위에 조건식에서 빠진걸까요?

skiende74 · 2024-10-22T01:14:43Z

playwright.yml 을 삭제했습니다.
음 처음듣는 얘기인데,
일단 이 pr은 skip으로 올려서 ci에러안뜨게하고 제가 이어서 둘다되게하기로했던거같습니다.

healim01 · 2024-10-22T01:15:37Z

.env.dev 추가된 내용이 어디있을까요? 노션에 반영이 안된거 같네요 확인 부탁드립니다~

skiende74

e2e 수고하셨습니다!

skiende74 · 2024-10-22T01:17:09Z

frontend/.eslintrc.json

-  "ignorePatterns": ["dist", "webpack.*.js", "tsconfig.json", "public", "assets", "*.config.js"]
+  "ignorePatterns": ["dist", "webpack.*.js", "tsconfig.json", "public", "assets", "*.config.js", "playwright/**"]


playwright/**추가를 해야하는 이유가 있으신가요?
eslint에 의한 문법검사가 되어야 좋을거같습니다.

같은 생각입니다. 하지만 import 문에 에러가 납니다. 아무래도 src 안에 import 문을 인식하지 못하는 것 같네요.

skiende74 · 2024-10-22T01:18:24Z

frontend/playwright.config.ts

-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from 'dotenv';
+
+dotenv.config({ path: './.env.development' });


가급적 __dirname은 유지해주세요

dirname을 유지했을 떄 어떤 장점이 있는지 알려주실 수 있을까요? 약간 절대 경로같은 느낌일까요?

그렇습니다

skiende74 · 2024-10-22T01:22:15Z

frontend/playwright.config.ts

    baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
-    actionTimeout: 5000, // await 타임아웃 :  5초로 설정


여긴 지우신 이유가있나요?

코드를 수정하는 과정에서 빠진 것 같아요 복구하겠습니다!!감사합니다

skiende74 · 2024-10-22T01:45:07Z

frontend/src/mocks/fixtures/checklistDetail.ts

-    station: '강남',
-    walkingTime: 10,


여기를 지우셨는데 checklistDetail 응답에도 station이 포함되지않나요?

이건 에러가 발생해서 지운 것 같은데, 아마 제이드의 type 이 머지되고 수정되면 문제 없을 것 같습니다!

그렇군요 주석쳐주시면 후속PR에서 보강 반영하겠습니다.

해당 주석 반영이 안된거 같네요 당장 머지가 급하시면 제이드에게 노티가 필요할거 같습니다.

skiende74 · 2024-10-22T01:45:34Z

frontend/src/constants/tabs.ts

-    name: '주거환경',
-  },
-  {
-    id: 6,
    name: '보안',
  },
-  {
-    id: 7,
-    name: '경제적',
-  },


skiende74 · 2024-10-22T01:50:28Z

frontend/src/pages/ChecklistDetailPage.tsx

@@ -47,7 +47,9 @@ const ChecklistDetailPage = () => {
        left={<Header.Backward onClick={handleClickBackward} />}
        right={
          <FlexBox.Horizontal gap="1.5rem">
-            <Header.TextButton onClick={handleEditButton}>편집</Header.TextButton>
+            <Header.TextButton onClick={handleEditButton} id="checklistEditButton">


e2e 테스트를 위해 id를 하드코딩으로 다넣어주는게 맞는걸까요..

"편집"이라는 글자가 들어있는 버튼을 select하는 방법으로 식별할수있지않을까요

저는 텍스트가 더욱 변화가능성이 크다고 생각했습니다(저희 텍스트가 자주 바뀌는 성격이라고 생각해요.) 또한 탐색하는 것도 id를 통해 찾는 것이 더 빠르다고 생각해서 넣어주었습니다. 실제로 dom 요소에 id 를 넣는 것은 정말 일반적인 방법이라고 생각합니다.

이 사항은 급하지 않아 다음 test pr 에서 수정하겠습니다.

skiende74 · 2024-10-22T01:52:08Z

frontend/tsconfig.json

-  "include": ["src/**/*", "*.ts"]
+  "include": ["src/**/*", "*.ts", "playwright/**/*"],
+  "exclude": ["playwright/**/*"]


include했다가 다시 exclude하는걸까요?

ooherin · 2024-10-22T01:54:01Z

체크리스트 post api 를 테스트하는게 msw 로 할 떄 어떤 의미가 있다고 생각하나요? 어짜피 200 status 를 보낼 것 같습니다.
탭 렌더링 같은 경우는 실제로 토큰이 없을 때도 렌더링이 되니까 cd 에 테스트를 포함시킬 수 있을 것 같은데, 위 post 테스트는 이해가 가지 않는 것 같아요.
지금 생각하는게 auth 가 필요한 테스트 / auth 가 필요없는 테스트를 분리해서 후자만 cd 에 포함시킬까 하는데 어떠신가요? 여기다가 msw 까지 결합하면 더 복잡해질 것 같고, msw 를 굳이 테스트 해야하나? 싶은 생각이 있는 것 같습니다.

지금 생각은 auth / noAuth 로 나눠서 토큰이 필요없는 테스트 (탭, 질문 렌더링의 경우) 는 noAuth 에 넣어서 이걸 통쨰로 cd 에 포함하는 게 어떨까 싶습니다. 어떠신가요?

=> 결론적으로, api, mock 으로 분리하는 것으로 정해졌습니다. mock 에 해당하는 테스트만 cd 가 돌아갑니다!

github-actions · 2024-10-22T06:33:09Z

🚀 storybook: https://669cc4025d9f500bb8c34778-gwgittxkzo.chromatic.com/

github-actions · 2024-10-22T06:37:09Z

🚀 storybook: https://669cc4025d9f500bb8c34778-virshrijcr.chromatic.com/

github-actions · 2024-10-22T06:39:11Z

🚀 storybook: https://669cc4025d9f500bb8c34778-zqijfhpvcn.chromatic.com/

skiende74 · 2024-10-22T06:40:10Z

frontend/package.json

+    "e2e:mock": "playwright test --config=playwright.mock.config.ts",
+    "e2e:ui-mock": "playwright test --config=playwright.mock.config.ts --ui",
+    "e2e:api": "playwright test --config=playwright.api.config.ts",
+    "e2e:api-mock": "playwright test --config=playwright.api.config.ts --ui",


ui-api의 오타인거같아요

그렇네요! 수정하겠습니다:)

ooherin · 2024-10-22T06:40:13Z

.env.dev 추가된 내용이 어디있을까요? 노션에 반영이 안된거 같네요 확인 부탁드립니다~

백엔드 db 문제로 업데이트가 늦었습니다 죄송해요

github-actions · 2024-10-22T06:47:38Z

🚀 storybook: https://669cc4025d9f500bb8c34778-cweieijemy.chromatic.com/

github-actions · 2024-10-22T06:53:13Z

🚀 storybook: https://669cc4025d9f500bb8c34778-ncixnbwtwj.chromatic.com/

skiende74 · 2024-10-22T06:54:31Z

frontend/webpack.common.js

-    host: 'localhost',
+    host: '0.0.0.0',


이건 무엇인가요?

접근성을 위해서 외부에서도 접근할 수 있게 한 코드입니다. 접근성 pr 이 끝나면 수정해놓아도 괜찮을까요?

healim01

코멘트 한번 확인해주시고 확인하시면 머지하셔도 될거 같습니다.
확인하신 사항은 이후 PR 에서 반영되어도 될거 같아요~!

healim01 · 2024-10-22T06:54:16Z

frontend/src/mocks/fixtures/checklistDetail.ts

-    station: '강남',
-    walkingTime: 10,


해당 주석 반영이 안된거 같네요 당장 머지가 급하시면 제이드에게 노티가 필요할거 같습니다.

healim01 · 2024-10-22T06:57:00Z

frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx

@@ -12,7 +12,7 @@ const NewChecklistTab = () => {
  const { getTabsForChecklist } = useTabs();

  const categoryTabs = useMemo(() => {
-    if (isFetched && checklist && checklistStore.length) {


length 가 아예 없는 경우에 탭을 보여줘야 하는 이유가 뭘까요? 질문 하나도 없다면 기본 탭이 아니라 질문 추가를 유도하는 탭이 생성되어야 할거 같은데 리안은 어떻게 생각하시나요?

ooherin · 2024-10-22T07:02:06Z

해당 주석 반영이 안된거 같네요 당장 머지가 급하시면 제이드에게 노티가 필요할거 같습니다.
=> 이건 위 메세지에도 알려드렸는데, 제이드 pr 변경하면 변경될 것 같아서 유지해도 될 것 같습니다.

length 가 아예 없는 경우에 탭을 보여줘야 하는 이유가 뭘까요? 질문 하나도 없다면 기본 탭이 아니라 질문 추가를 유도하는 탭이 생성되어야 할거 같은데 리안은 어떻게 생각하시나요?
=> 현재 백엔드 서버에서 간헐적으로 {categories : []} 가 발생하는 데 해당 length 조건을 추가하게 되면, 저렇게 올 때 기본정보, 옵션 탭이 아예 렌더링이 되지 않아요. 혹시 헤일리의 에러 바운더리 코드와 관련이 있나요?

skiende74 · 2024-10-22T07:18:15Z

playwright/.auth/user.json도
노션에 올려두었습니다.

ooherin added 5 commits October 18, 2024 15:27

feat: 탭 테스트 추가

c28b5b9

fix: 체크리스트 작성 테스트 추가

d752e19

feat: playwright 테스트 설정 및 auth 설정

dd47edf

fix: 체크리스트 질문 안올때 에러 해결

a3c6fdd

fix: 현재 작동되지 않는 테스트 skip 처리

02443ab

ooherin added 🔑 FE 😊 Feature 🧪 Test labels Oct 21, 2024

ooherin self-assigned this Oct 21, 2024

ooherin had a problem deploying to frontend-msw October 21, 2024 11:22 — with GitHub Actions Failure

ooherin had a problem deploying to frontend-msw October 21, 2024 11:52 — with GitHub Actions Failure

ooherin changed the title ~~[FE] 자동화된 e2e 테스트를 추가한다.~~ [FE] 탭과 질문 렌더링, 체크리스트 작성 후 생성과 관련된 e2e 테스트를 추가한다. Oct 21, 2024

ooherin commented Oct 21, 2024

View reviewed changes

fix: 불필요한 변경 사항 취소

9796379

ooherin force-pushed the feat/749-e2etest branch from 9add75f to 9796379 Compare October 21, 2024 11:57

ooherin had a problem deploying to frontend-msw October 21, 2024 11:57 — with GitHub Actions Failure

fix: playwright cd 파일 삭제

36f25b1

ooherin changed the title ~~[FE] 탭과 질문 렌더링, 체크리스트 작성 후 생성과 관련된 e2e 테스트를 추가한다.~~ [FE] playwright에 자동 로그인 기능과 탭과 질문 렌더링, 체크리스트 생성과 관련된 e2e 테스트를 추가한다. Oct 21, 2024

healim01 reviewed Oct 21, 2024

View reviewed changes

feat: 포커스 트랩 생성 및 모달 적용

34fbd99

skiende74 reviewed Oct 22, 2024

View reviewed changes

ooherin added 2 commits October 22, 2024 13:32

feat: playwright e2e 테스트 config 분리

5a99a15

fix: playwright cd 복원

f1959d6

ooherin temporarily deployed to frontend-msw October 22, 2024 06:32 — with GitHub Actions Inactive

chore: playwright ui test 명령어 추가

6c29ce4

ooherin force-pushed the feat/749-e2etest branch from bfa1605 to 6c29ce4 Compare October 22, 2024 06:36

ooherin temporarily deployed to frontend-msw October 22, 2024 06:36 — with GitHub Actions Inactive

fix: ts include 설정 변경

42e27bf

ooherin temporarily deployed to frontend-msw October 22, 2024 06:38 — with GitHub Actions Inactive

skiende74 reviewed Oct 22, 2024

View reviewed changes

ooherin temporarily deployed to frontend-msw October 22, 2024 06:46 — with GitHub Actions Inactive

fix: 리뷰 반영

ea29f07

ooherin force-pushed the feat/749-e2etest branch from 8230255 to ea29f07 Compare October 22, 2024 06:51

ooherin temporarily deployed to frontend-msw October 22, 2024 06:51 — with GitHub Actions Inactive

skiende74 approved these changes Oct 22, 2024

View reviewed changes

skiende74 reviewed Oct 22, 2024

View reviewed changes

healim01 reviewed Oct 22, 2024

View reviewed changes

ooherin merged commit a8af108 into dev-fe Oct 22, 2024
3 checks passed

ooherin deleted the feat/749-e2etest branch October 22, 2024 07:02

		"ignorePatterns": ["dist", "webpack..js", "tsconfig.json", "public", "assets", ".config.js"]
		"ignorePatterns": ["dist", "webpack..js", "tsconfig.json", "public", "assets", ".config.js", "playwright/**"]

[FE] playwright에 자동 로그인 기능과 탭과 질문 렌더링, 체크리스트 생성과 관련된 e2e 테스트를 추가한다. #849

[FE] playwright에 자동 로그인 기능과 탭과 질문 렌더링, 체크리스트 생성과 관련된 e2e 테스트를 추가한다. #849

Conversation

ooherin commented Oct 21, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

테스트 전 자동 로그인 기능(auth) 추가

탭 렌더링 e2e 테스트 추가

체크리스트 작성 후 생성 테스트 추가

피드백 반영 = playwright.config 분리

📢 논의하고 싶은 내용

⭐️ 중요

🎸 기타

github-actions bot commented Oct 21, 2024

github-actions bot commented Oct 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 21, 2024

github-actions bot commented Oct 21, 2024

healim01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skiende74 commented Oct 22, 2024

healim01 commented Oct 22, 2024

skiende74 left a comment

Choose a reason for hiding this comment

skiende74 Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

ooherin Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin commented Oct 22, 2024 • edited Loading

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

healim01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin commented Oct 22, 2024

skiende74 commented Oct 22, 2024 • edited Loading

ooherin commented Oct 21, 2024 •

edited

Loading

피드백 반영 = `playwright.config` 분리

ooherin Oct 22, 2024 •

edited

Loading

skiende74 Oct 22, 2024 •

edited

Loading

ooherin Oct 22, 2024 •

edited

Loading

ooherin Oct 22, 2024 •

edited

Loading

ooherin Oct 22, 2024 •

edited

Loading

ooherin commented Oct 22, 2024 •

edited

Loading

skiende74 commented Oct 22, 2024 •

edited

Loading