-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: chip 테스트 코드 작성 * fix: test 코드 몇가지 에러 수정 * fix: export default 수정 * fix: 주석 제거 * fix: 타입에러 해결되는지 확인해보기 * fix: prev 타입 지정 * fix: Chip 컴포넌트에 as 추가 * fix: disabled 버튼 테스트 * fix: tsconfig 바꿔치기 * fix: tsconfig 원래대로 되돌리기 * fix: disabled 없애기 * fix: disabled 테스트 아예 지우기 * fix: jest config 변경 * fix: 절대경로 수정 테스트 * fix: 마지막 시도 * fix: 타입 단언 * fix: tsconfig 부분수정 * fix: 설정 오버로딩 * fix: 테스트 설정 찐 마무리 * fix: Chip UI 깨진거 수정 * fix: 전체 패키지 다시 깔기 * fix: core-js 가 범인인가? * fix: a11y test 시작이라도 * fix: Chip 접근성 테스트 정리 * fix: test 잘못된곳 수정 * fix : Checkbox 관련 스토리북, aria 속성 수정 * fix : switch 속성 수정, 스토리북 수정 * fix : checked 삭제 * fix : Switch 원복 * fix: 체크박스 aria-checked 속성 checked로 변경 * fix: 스위치 aria-checked 속성 checked로 변경 * fix: 스토리북 문서화 부분 수정 * fix: 쓸모없는 패키지 제거 * fix: test 워크플로우에 typescript 설치 과정 제거 * fix: prev 타입 자동추론 되는지 확인하기 * fix: 타입추론 제대로 되도록 수정 * fix: Jest RootDir 변경 * fix: jest 및 tsconfig 정상화 * fix: a11y 테스트 쉊ㅇ * fix: 찐 마지막 * fix: Chip 컴포넌트 최종수정 * fix: isChecked ischecked로 변경 * fix: 대문자 고치기 * fix: storybook 문서 ischecked로 변경 * fix: 스토리북 확장자 변경 --------- Co-authored-by: SeieunYoo <[email protected]> Co-authored-by: ghdtjgus76 <[email protected]>
- Loading branch information
3 people
authored
Jul 25, 2024
1 parent
4a861ed
commit 4a45ee6
Showing
12 changed files
with
2,979 additions
and
2,732 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { render, type RenderResult, waitFor } from "@testing-library/react"; | ||
| import { userEvent } from "@testing-library/user-event"; | ||
|
|
||
| import Chip from "@/components/Chip"; | ||
|
|
||
| describe("Chip rendering Test", () => { | ||
| let renderChip: RenderResult; | ||
| beforeEach(() => { | ||
| renderChip = render(<Chip as="div" label="Chip" />); | ||
| }); | ||
|
|
||
| it("should render Chip", () => { | ||
| const { getByText } = renderChip; | ||
| expect(getByText("Chip")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should render with attributes aria-disabled to be false by default", () => { | ||
| const chipComponent = renderChip.container.querySelector("div"); | ||
|
|
||
| expect(chipComponent).toHaveAttribute("aria-disabled", "false"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("Chip toggle Test", () => { | ||
| let renderChip: RenderResult; | ||
| beforeEach(() => { | ||
| renderChip = render(<Chip as="button" clickable={true} label="Chip" />); | ||
| }); | ||
|
|
||
| it("should toggle state when onClick event is fired", async () => { | ||
| const chipComponent = renderChip.getByRole("checkbox"); | ||
| const user = userEvent.setup(); | ||
|
|
||
| await user.click(chipComponent); | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "true"); | ||
| await user.click(chipComponent); | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "false"); | ||
| }); | ||
|
|
||
| it("should toggle state when Enter key is pressed", async () => { | ||
| const chipComponent = renderChip.getByRole("checkbox"); | ||
| userEvent.type(chipComponent, "{enter}"); | ||
| await waitFor(() => { | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "true"); | ||
| }); | ||
| userEvent.type(chipComponent, "{enter}"); | ||
| await waitFor(() => { | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "false"); | ||
| }); | ||
| }); | ||
|
|
||
| it("should toggle state when Space key is pressed", async () => { | ||
| const chipComponent = renderChip.getByRole("checkbox"); | ||
|
|
||
| await userEvent.type(chipComponent, "{space}"); | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "true"); | ||
| await userEvent.type(chipComponent, "{space}"); | ||
| expect(chipComponent).toHaveAttribute("aria-checked", "false"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("Chip disabled Test", () => { | ||
| let renderChip: RenderResult; | ||
| beforeEach(() => { | ||
| renderChip = render(<Chip disabled={true} label="Chip" />); | ||
| }); | ||
|
|
||
| it("should render with attributes aria-disabled to be true", () => { | ||
| const chipComponent = renderChip.container.querySelector("button"); | ||
|
|
||
| expect(chipComponent).toHaveAttribute("aria-disabled", "true"); | ||
| }); | ||
|
|
||
| it("should not allow focusing", () => { | ||
| const chipComponent = renderChip.container.querySelector("button"); | ||
| userEvent.click(chipComponent!!); | ||
|
|
||
| expect(chipComponent).not.toHaveFocus(); | ||
| }); | ||
| }); | ||
|
|
||
| describe("external control and events", () => { | ||
| let renderChip: RenderResult; | ||
|
|
||
| it("should fire external onClick event", async () => { | ||
| renderChip = render(<Chip clickable label="Chip" />); | ||
| const chipComponent = renderChip.getByRole("checkbox"); | ||
| const user = userEvent.setup(); | ||
| const onClickHandler = jest.fn(); | ||
| chipComponent.onclick = onClickHandler; | ||
|
|
||
| await user.click(chipComponent); | ||
| expect(onClickHandler).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("should fire external onKeyDown event", async () => { | ||
| renderChip = render(<Chip clickable as="button" label="Chip" />); | ||
| const user = userEvent.setup(); | ||
| const chipComponent = renderChip.getByRole("checkbox"); | ||
| const onKeyDownHandler = jest.fn(); | ||
| chipComponent.onkeydown = onKeyDownHandler; | ||
|
|
||
| await user.type(chipComponent, "{enter}"); | ||
| expect(onKeyDownHandler).toHaveBeenCalled(); | ||
| await user.type(chipComponent, "{space}"); | ||
| expect(onKeyDownHandler).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("should toggle external checked state when onClick event fired", async () => { | ||
| const user = userEvent.setup(); | ||
| let checked = false; | ||
| const handleChange = () => { | ||
| checked = !checked; | ||
| }; | ||
| const rendered = render(<Chip clickable as="button" label="Chip" />); | ||
| const chipComponent = rendered.getByRole("checkbox"); | ||
| chipComponent.onchange = handleChange; | ||
|
|
||
| await user.click(chipComponent); | ||
|
|
||
| expect(chipComponent).toHaveAttribute("aria-checked", "true"); | ||
| expect(chipComponent).toHaveAttribute("aria-disabled", "false"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.