Test/ Slider component interaction test #129

iyu88 · 2023-05-30T14:04:30Z

🤠 개요

Test: Slider 컴포넌트 E2E 테스트 #128
Slider 컴포넌트 스토리에 대해서 E2E 테스트를 진행합니다.

💫 설명

Storybook으로 작성한 Slider 컴포넌트의 각 스토리에 E2E 테스트 코드를 작성했습니다.
Default slider에 대한 테스트 코드를 기준으로 설명드리면,
- 🐭 마우스 이벤트
1. Click min value : slider track의 가장 왼쪽 혹은 아래쪽을 클릭했을 때 최솟값으로 설정되는지
2. Click max value : slider track의 가장 오른쪽 혹은 위쪽을 클릭했을 때 최댓값으로 설정되는지
- 🎹 키보드 이벤트
1. Increase with right arrow : ➡️ key를 한번 눌렀을 때, 1 (step) 만큼 증가하는지
2. Increase with up arrow : ⬆️ key를 한번 눌렀을 때, 1 (step) 만큼 증가하는지
3. Decrease with left arrow : ⬅️ key를 한번 눌렀을 때, 1 (step) 만큼 감소하는지
4. Decrease with down arrow : ⬇️ key를 한번 눌렀을 때, 1 (step) 만큼 감소하는지
5. Increase with page up : PageUp key를 눌렀을 때, 10% 증가하는지
6. Decrease with page down : PageDown key를 눌렀을 때, 10% 감소하는지
7. Set min with home key : Home key를 눌렀을 때, 최솟값으로 설정되는지
8. Set max with end key : End key를 눌렀을 때, 최댓값으로 설정되는지
그 외의 스토리에 대해서는 필요하다고 판단한 테스트 케이스만 추가했습니다.
추상화하지 않는 것이 테스트를 읽는 것에 더 도움이 될 것이라고 판단하여 일부러 반복되는 부분을 남겨둔 점도 있습니다.
cypress/support/commands.ts 파일에 커스텀 커맨드를 정의했습니다.

*커스텀 커맨드
Cypress에서 제공하는 커맨드(메서드)를 조합해서 커스텀할 수 있습니다.
Chaining해서 사용할 수 있는 함수를 정의했다고 보시면 될 것 같습니다.
cypress/support/index.d.ts 파일에 커스텀 커맨드 및 기타 함수에서 사용할 타입을 정의했습니다.

📷 스크린샷 (Optional)

➡️ 58개의 테스트를 작성했습니다.

함수 내부에서 getComputedStyle를 사용하여 window에서 표시되는 스타일 값으로 비교합니다.

prayinforrain

고생하셨습니다~ 너무 신기해요

근데 제 환경에서는 테스트가 간헐적으로 실패해요. 컴퓨터 성능에 따라 좀 갈리는 것 같긴 한데(제가 작업을 HDD에 하고 있어서 ㅎㅎ..) 모두 같은 지점에서 실패하는걸로 보아 스토리를 불러오는 게 오래 걸려서 타임아웃으로 alias 정의를 못하나봐요. 사실 제 컴퓨터에서 안되는건 상관이 없긴 한데 혹시 해결할 방법이 있나 찾아봐야겠어요.

Error: AssertionError: Timed out retrying after 4000ms: Expected to find element: `#story--components-slider--start-from-end`, but never found it. Queried from:

              > <body.sb-show-main.sb-main-fullscreen>

Because this error occurred during a `before each` hook we are skipping the remaining tests in the current suite: `Start From End slider`
    at Context.eval (webpack:///./cypress/support/commands.ts:7:0)

prayinforrain · 2023-05-31T08:09:30Z

cypress/e2e/components/slider.cy.ts

+    });
+
+    it('Increase with right arrow', () => {
+      cy.get("@thumb").trigger('keydown', { keyCode : 39 });


키보드 접근성 구현은 많은 컴포넌트에 되어 있으니 이것도 constants같은걸로 정의해서 쓰면 괜찮지 않을까 하는 생각이 들어요 ?ㅁ?
아직 직접 작성해보지 않아서 모르겠지만요 ㅎㅎ..

좋은 의견입니다.
상수 관리를 어떻게 할지 레퍼런스를 찾아볼게요

이미 constants에 key값 정의되어 있어서 그거 사용하면 컴포넌트 코드랑 통일성 유지 면에서도 좋지 않을까요? 어떤 테스트가 fail했을 때 어떤 부분을 확인해야 하는지 추적하기 편할 것 같아요. keycode는 deprecated property이기도 해서 사용 지양하는게 ..ㅎㅎ!

prayinforrain · 2023-05-31T08:11:53Z

cypress/e2e/components/slider.cy.ts

+    cy.get('@slider').find(THUMB_ID).as('thumb');
+  }
+
+  const shouldBeEqualPercentage = (dimension: FilledDimension, position: ThumbPosition) => {


이 함수들은 async-await을 사용하면 안되는 건가요? 아니면 then을 사용한 코드가 더 좋은 이유가 있다던가?
제가 쓰고 싶은 건 아니고 테스트 코드들을 보면 다 이랬던 것 같아서요 ㅋㅋ..

일단 공식 문서에서는 then 문법만 제시하고 있고
별도로 async-await을 적용하고 싶을 경우에는 cypress-promise를 적용해야 하는 걸로 파악했어요.
API 요청도 없어서 기본 기능 (일반 함수, alias) 내에서 작성할 수 있을 것 같아서 설치하진 않았어요.

근데 저도 아직 다 파악한건 아니라서 좋은거 찾으시면 알려주세요 ㅎㅎ..

prayinforrain · 2023-05-31T08:12:46Z

cypress/e2e/components/slider.cy.ts

+    cy.getStory('slider', storyName).as('slider');
+    cy.get('@slider').find(TRACK_ID).as('track');
+    cy.get('@slider').find(FILLED_ID).as('filled');
+    cy.get('@slider').find(THUMB_ID).as('thumb');


as('name')으로 선언하면 그 이후의 코드에서 @name이라는 alias로 참조할 수 있는 거 맞나요?

네 정확합니다 👍👍👍

iyu88 · 2023-05-31T09:24:23Z

Timed out 관련 문제가 있네요! 알아보겠습니다 ㅎㅎ

leesunmin1231

제 컴퓨터에서도 우재님이 말씀하신 것처럼 한번씩 테스트 통과가 안돼요.. 매번 통과 안되는 지점도 바뀌네요.
오류 메시지로 추측해봤을 때는 비동기로 동작하는 로직이 순서 보장이 안돼서 테스트 통과가 되었다 안되었다 하는거 같아요

leesunmin1231

제 컴퓨터에서도 우재님이 말씀하신 것처럼 한번씩 테스트 통과가 안돼요.. 매번 통과 안되는 지점도 바뀌네요.
오류 메시지로 추측해봤을 때는 비동기로 동작하는 로직이 순서 보장이 안돼서 테스트 통과가 되었다 안되었다 하는거 같아요

se030

실행해보니 다른 분들이랑 같은 이슈가 발생하기는 하는데, 선민님 말씀처럼 비동기 로직들의 순서가 보장되지 않아서 그런 것 같아요. 저도 공부해보고 뭔가 더 알게되면 공유할게요!

se030 · 2023-06-02T06:17:31Z

cypress/e2e/components/slider.cy.ts

+    });
+
+    it('Increase with right arrow', () => {
+      cy.get("@thumb").trigger('keydown', { keyCode : 39 });


이미 constants에 key값 정의되어 있어서 그거 사용하면 컴포넌트 코드랑 통일성 유지 면에서도 좋지 않을까요? 어떤 테스트가 fail했을 때 어떤 부분을 확인해야 하는지 추적하기 편할 것 같아요. keycode는 deprecated property이기도 해서 사용 지양하는게 ..ㅎㅎ!

스토리 Docs에서 iframe 내부에 있는 DOM 요소에 접근하는 방식으로 visitStory가 작성되어 있던 점을 수정합니다. 개별 스토리에 대한 iframe 내부로 바로 접근할 수 있도록 URL 주소를 수정합니다. 이로 인해서 getStory 커맨드는 더 이상 사용하지 않게 되어 삭제합니다. 더불어 initAlias 함수에서 스토리의 최상위 부모 요소인 #root로부터 하위 컴포넌트를 찾도록 변경합니다. 아울러 공통적으로 적용되는 beforeEach는 삭제합니다.

iyu88 added 17 commits May 29, 2023 16:07

feat: custom command 추가

7be522e

test: Slider Click 이벤트 테스트

089eb2f

feat: visitStory command 추가

05f9f28

refactor: 하위 컴포넌트 ID 수정

4985705

feat: alias 초기화 함수 선언

91fa0ce

feat: UI Paint 확인 함수 추가

8cc3956

test: Arrow Key 테스트 케이스 추가

015ec34

test: Arrow Key 테스트 케이스 (up, down) 추가

d2ab640

test: Page Up, Down 키보드 이벤트 추가

10fef6d

test: Home, End 테스트 케이스 추가

79785c6

feat: afterEach에서 shouldBeEqualPercentage 수행

1a86948

refactor: shouldBeEqualPercentage 수정

ecba372

함수 내부에서 getComputedStyle를 사용하여 window에서 표시되는 스타일 값으로 비교합니다.

test: min value variant 테스트 케이스 추가

3eca2cb

test: max value variant 테스트 케이스 추가

d27dc49

test: With steps 테스트 케이스 추가

e3bb685

test: Start variant 테스트 케이스 추가

396c281

test: Vertical 테스트 케이스 추가

4973916

github-actions bot requested review from dohun31, leesunmin1231, prayinforrain and se030 May 30, 2023 14:04

github-actions bot assigned iyu88 May 30, 2023

iyu88 added the 🧪 test 테슽 코드 label May 30, 2023

iyu88 changed the title ~~Test/ Slider Component interaction~~ Test/ Slider Component interaction test May 30, 2023

iyu88 changed the title ~~Test/ Slider Component interaction test~~ Test/ Slider component interaction test May 30, 2023

prayinforrain mentioned this pull request May 31, 2023

Config/ Cypress 설치 #127

Open

iyu88 changed the base branch from main to config/e2e-cypress May 31, 2023 07:13

prayinforrain approved these changes May 31, 2023

View reviewed changes

leesunmin1231 reviewed May 31, 2023

View reviewed changes

se030 reviewed Jun 2, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Test/ Slider component interaction test #129

Test/ Slider component interaction test #129

iyu88 commented May 30, 2023

prayinforrain left a comment

prayinforrain May 31, 2023

iyu88 May 31, 2023

se030 Jun 2, 2023

prayinforrain May 31, 2023

iyu88 May 31, 2023

iyu88 May 31, 2023

prayinforrain May 31, 2023

iyu88 May 31, 2023

iyu88 commented May 31, 2023

leesunmin1231 left a comment

leesunmin1231 left a comment

se030 left a comment

se030 Jun 2, 2023

Test/ Slider component interaction test #129

Are you sure you want to change the base?

Test/ Slider component interaction test #129

Conversation

iyu88 commented May 30, 2023

🤠 개요

💫 설명

📷 스크린샷 (Optional)

prayinforrain left a 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

iyu88 commented May 31, 2023

leesunmin1231 left a comment

Choose a reason for hiding this comment

leesunmin1231 left a comment

Choose a reason for hiding this comment

se030 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment