-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Control): Control 테스트코드 작성 #135
Merged
Merged
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
b523b92
fix: checked, aria-checked 속성 추가
Brokyeom e01a1ad
feat: add Checkbox testcode
Brokyeom ef93e47
feat: add Radio testcode
Brokyeom 4c8a334
changeset
Brokyeom 7bc231b
add Toggle test code.
Brokyeom d46f8bd
fix: remove aria-checked attr
Brokyeom 40fe12b
fix: import expect
Brokyeom e4b21a7
fix: import it
Brokyeom a0a5685
add onClick event code component
Brokyeom 6775ba7
feat: add Toggle onClick event test code.
Brokyeom af75ed9
fix Toggle test code.
Brokyeom File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@sopt-makers/ui': patch | ||
--- | ||
|
||
add Control test code. |
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 |
---|---|---|
@@ -1,39 +1,33 @@ | ||
import type { InputHTMLAttributes } from "react"; | ||
import { forwardRef } from "react"; | ||
import { IconCheck } from "@sopt-makers/icons"; | ||
import theme from "../theme.css"; | ||
import { | ||
check, | ||
checkBox, | ||
checkBoxChecked, | ||
checkBoxInput, | ||
controlLabel, | ||
controlWrapper, | ||
} from "./style.css"; | ||
import type { InputHTMLAttributes } from 'react'; | ||
import { forwardRef } from 'react'; | ||
import { IconCheck } from '@sopt-makers/icons'; | ||
import theme from '../theme.css'; | ||
import { check, checkBox, checkBoxChecked, checkBoxInput, controlLabel, controlWrapper } from './style.css'; | ||
|
||
export interface CheckBoxProps | ||
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> { | ||
export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> { | ||
label?: string; | ||
size?: "sm" | "lg"; | ||
size?: 'sm' | 'lg'; | ||
checked?: boolean; | ||
color?: string; | ||
} | ||
|
||
const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>( | ||
({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => { | ||
({ checked = false, label, size = 'sm', color = theme.colors.gray10, ...props }, ref) => { | ||
return ( | ||
<label className={controlWrapper}> | ||
<input className={checkBoxInput} ref={ref} type="checkbox" {...props} /> | ||
<input checked={checked} className={checkBoxInput} ref={ref} type='checkbox' {...props} /> | ||
<div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}> | ||
{checked ? <IconCheck className={check[size]} /> : null} | ||
</div> | ||
{label ? ( | ||
<p className={controlLabel[size]} style={{ color }}>{label}</p> | ||
<p className={controlLabel[size]} style={{ color }}> | ||
{label} | ||
</p> | ||
) : null} | ||
</label> | ||
); | ||
} | ||
}, | ||
); | ||
CheckBox.displayName = "CheckBox"; | ||
CheckBox.displayName = 'CheckBox'; | ||
|
||
export default CheckBox; |
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,30 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import { describe } from 'vitest'; | ||
import type { CheckBoxProps } from 'Control/CheckBox'; | ||
import { CheckBox } from '../index'; | ||
|
||
describe('Checkbox의', () => { | ||
function renderCheckbox(props?: CheckBoxProps) { | ||
render(<CheckBox {...props} />); | ||
} | ||
|
||
describe('정상동작은 다음과 같다.', () => { | ||
it('Checkbox 컴포넌트가 정상적으로 렌더링 된다.', () => { | ||
renderCheckbox(); | ||
|
||
expect(screen.getByRole('checkbox')).toBeInTheDocument(); | ||
}); | ||
|
||
it('checked = true 이면 checkbox가 활성화된 상태로 렌더링된다.', () => { | ||
renderCheckbox({ checked: true }); | ||
|
||
expect(screen.getByRole('checkbox')).toBeChecked(); | ||
}); | ||
|
||
it('checked = false 이면 checkbox가 비활성화된 상태로 렌더링된다.', () => { | ||
renderCheckbox({ checked: false }); | ||
|
||
expect(screen.getByRole('checkbox')).not.toBeChecked(); | ||
}); | ||
}); | ||
}); |
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,30 @@ | ||
import type { RadioProps } from 'Control/Radio'; | ||
import { describe } from 'vitest'; | ||
import { render, screen } from '@testing-library/react'; | ||
import { Radio } from '../index'; | ||
|
||
describe('Radio의', () => { | ||
function renderRadio(props?: RadioProps) { | ||
render(<Radio {...props} />); | ||
} | ||
|
||
describe('기본 동작은 다음과 같다.', () => { | ||
it('Checkbox 컴포넌트가 정상적으로 렌더링 된다.', () => { | ||
renderRadio(); | ||
|
||
expect(screen.getByRole('radio')).toBeInTheDocument(); | ||
}); | ||
|
||
it('checked = true 이면 checkbox가 활성화된 상태로 렌더링된다.', () => { | ||
renderRadio({ checked: true }); | ||
|
||
expect(screen.getByRole('radio')).toBeChecked(); | ||
}); | ||
|
||
it('checked = false 이면 checkbox가 비활성화된 상태로 렌더링된다.', () => { | ||
renderRadio({ checked: false }); | ||
|
||
expect(screen.getByRole('radio')).not.toBeChecked(); | ||
}); | ||
}); | ||
}); |
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,24 @@ | ||
import { describe } from 'vitest'; | ||
import { render, screen } from '@testing-library/react'; | ||
import type { ToggleProps } from 'Control/Toggle'; | ||
import { Toggle } from '../index'; | ||
|
||
describe('Toggle의', () => { | ||
function renderToggle(props?: ToggleProps) { | ||
render(<Toggle {...props} />); | ||
} | ||
|
||
describe('기본 동작은 다음과 같다.', () => { | ||
it('on 상태로 렌더링 될 수 있다.', () => { | ||
renderToggle({ 'aria-checked': 'true' }); | ||
|
||
expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true'); | ||
}); | ||
|
||
it('off 상태로 렌더링 될 수 있다.', () => { | ||
renderToggle({ 'aria-checked': 'false' }); | ||
|
||
expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false'); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Comment에 남겼듯이 여기에
expect
를 추가해서 임시로 lint 오류를 우회하는 것도 좋아보입니다!!There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
40fe12b에서 expect import 하는 방식으로 일단 우회했습니다.
onClick 테스트 추가 후에 rerequest 드릴게요~