diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx index 1d5e919e..55e537b6 100644 --- a/src/components/Checkbox/Checkbox.test.tsx +++ b/src/components/Checkbox/Checkbox.test.tsx @@ -64,13 +64,19 @@ describe("렌더링", () => { expect(checkbox).toBeChecked(); }); - test("invalid가 true이면 aria-invalid가 설정된다.", () => { + test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => { + render(); + const checkbox = screen.getByRole("checkbox"); + expect(checkbox).toHaveAttribute("aria-invalid", "false"); + }); + + test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => { render(); const checkbox = screen.getByRole("checkbox"); expect(checkbox).toHaveAttribute("aria-invalid", "true"); }); - test("invalid가 false이면 aria-invalid가 false로 설정된다.", () => { + test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => { render(); const checkbox = screen.getByRole("checkbox"); expect(checkbox).toHaveAttribute("aria-invalid", "false"); @@ -142,13 +148,19 @@ describe("렌더링", () => { ).not.toBeInTheDocument(); }); - test("required가 true이면 aria-required가 true로 설정된다.", () => { + test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => { + render(); + const checkbox = screen.getByRole("checkbox"); + expect(checkbox).not.toHaveAttribute("aria-required"); + }); + + test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => { render(); const checkbox = screen.getByRole("checkbox"); expect(checkbox).toHaveAttribute("aria-required", "true"); }); - test("required가 false이면 aria-required가 설정되지 않는다.", () => { + test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => { render(); const checkbox = screen.getByRole("checkbox"); expect(checkbox).not.toHaveAttribute("aria-required"); diff --git a/src/components/PasswordInput/PasswordInput.test.tsx b/src/components/PasswordInput/PasswordInput.test.tsx index 731c6f26..0c5bdf53 100644 --- a/src/components/PasswordInput/PasswordInput.test.tsx +++ b/src/components/PasswordInput/PasswordInput.test.tsx @@ -82,6 +82,42 @@ test("접근성 속성을 제공한다 (aria-label, aria-pressed)", async () => expect(toggle).toHaveAttribute("aria-pressed", "true"); }); +test("invalid prop이 없을 때 aria-invalid 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).not.toHaveAttribute("aria-invalid"); +}); + +test("invalid가 true일 때 aria-invalid 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).toHaveAttribute("aria-invalid", "true"); +}); + +test("invalid가 false일 때 aria-invalid 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).not.toHaveAttribute("aria-invalid"); +}); + +test("required prop이 없을 때 aria-required 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).not.toHaveAttribute("aria-required"); +}); + +test("required가 true일 때 aria-required 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).toHaveAttribute("aria-required", "true"); +}); + +test("required가 false일 때 aria-required 속성이 올바르게 설정된다", () => { + render(); + const input = screen.getByLabelText(/패스워드/, { selector: "input" }); + expect(input).not.toHaveAttribute("aria-required"); +}); + test("키보드(Space/Enter)로 가시성을 토글할 수 있다", async () => { const user = userEvent.setup(); render(); diff --git a/src/components/PasswordInput/PasswordInput.tsx b/src/components/PasswordInput/PasswordInput.tsx index ab178574..8a48bf7c 100644 --- a/src/components/PasswordInput/PasswordInput.tsx +++ b/src/components/PasswordInput/PasswordInput.tsx @@ -23,6 +23,7 @@ export interface PasswordInputProps extends Omit< */ export function PasswordInput({ invalid = false, + required = false, disabled = false, placeholder = "패스워드를 입력해주세요.", ref, @@ -50,6 +51,7 @@ export function PasswordInput({ className={inputStyles()} aria-label="패스워드" aria-invalid={invalid ? true : undefined} + aria-required={required ? true : undefined} {...rest} />