Skip to content
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

[Feature] TextField 컴포넌트 구현 #40

Merged
merged 29 commits into from
Jun 10, 2024
Merged
Changes from 1 commit
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
046f039
feat: TextField 컴포넌트 구현
ghdtjgus76 Jun 5, 2024
769b00e
chore: 텍스트 필드 자잘한 수정 사항 반영
ghdtjgus76 Jun 5, 2024
6651877
feat: 텍스트 필드 컴포넌트 스토리 코드 작성
ghdtjgus76 Jun 5, 2024
e1af0ed
fix: max length 관련 onChange 로직 수정
ghdtjgus76 Jun 5, 2024
cc5d84e
test: 텍스트필드 컴포넌트 테스트 코드 작성
ghdtjgus76 Jun 5, 2024
fe9e362
chore: 토큰 변경
ghdtjgus76 Jun 7, 2024
bcacf72
feat: TextField 빌드 세팅
ghdtjgus76 Jun 7, 2024
212a2b8
fix: a11y violation, incomplete 사항 해결
ghdtjgus76 Jun 7, 2024
0adf388
feat: 반응형 관련 breakpoint 추가
ghdtjgus76 Jun 7, 2024
07d5ae2
chore: token에서 breakpoint 가져오도록 변경
ghdtjgus76 Jun 7, 2024
46cf565
chore: label2 자간 수정사항 반영
ghdtjgus76 Jun 7, 2024
7b70ad2
chore: breakpoint 네이밍 변경
ghdtjgus76 Jun 7, 2024
9f0a341
refactor: 텍스트필드 반응형 토큰 사용
ghdtjgus76 Jun 7, 2024
8a172b6
chore: 불필요한 useEffect 삭제
ghdtjgus76 Jun 7, 2024
643006c
chore: panda codegen 실행
ghdtjgus76 Jun 7, 2024
972c22b
design: 글자 색 변경
ghdtjgus76 Jun 7, 2024
e8fa0fa
chore: useTextareaAutosize 훅에 useEffect 추가
ghdtjgus76 Jun 7, 2024
0c6a97a
fix: 텍스트필드 색상 대조 관련 웹 접근성 테스트 끄도록 설정 변경
ghdtjgus76 Jun 7, 2024
8318eb5
Merge branch 'main' into feature/text-field-component
ghdtjgus76 Jun 7, 2024
fef6914
chore: 포커스된 경우도 typing으로 처리하도록 변경
ghdtjgus76 Jun 7, 2024
08b135d
chore: 스토리북 테스트 러너 a11y rule 관련 설정 추가
ghdtjgus76 Jun 7, 2024
31663cd
chore: 변경된 빌드 설정 반영
ghdtjgus76 Jun 7, 2024
c2f411e
chore: placeholder 여러 줄인 경우도 수용하도록 수정
ghdtjgus76 Jun 9, 2024
0ed8a40
Merge branch 'main' into feature/text-field-component
ghdtjgus76 Jun 9, 2024
d07dc24
fix: 머지 에러 해결
ghdtjgus76 Jun 9, 2024
393dc42
refactor: 상수값 따로 분리
ghdtjgus76 Jun 9, 2024
4594a07
chore: props style로 네이밍 변경
ghdtjgus76 Jun 10, 2024
0655222
Merge branch 'main' into feature/text-field-component
ghdtjgus76 Jun 10, 2024
e69b6a7
chore: codegen 반영
ghdtjgus76 Jun 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test: 텍스트필드 컴포넌트 테스트 코드 작성
  • Loading branch information
ghdtjgus76 committed Jun 5, 2024
commit cc5d84ec3b56c4759f2ae23553811c084cc76afa
157 changes: 157 additions & 0 deletions packages/wow-ui/src/components/TextField/TextField.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
import { fireEvent, render, waitFor } from "@testing-library/react";
import { useState } from "react";

import TextField from "@/components/TextField";

describe("TextField component", () => {
it("should render label and placeholder", () => {
const { getByLabelText, getByPlaceholderText } = render(
<TextField label="Label" placeholder="Placeholder" />
);
const labelText = getByLabelText("Label");
const placeholderText = getByPlaceholderText("Placeholder");

expect(labelText).toBeInTheDocument();
expect(placeholderText).toBeInTheDocument();
});

it("should render with default value", () => {
const { getByLabelText } = render(
<TextField defaultValue="textField" label="Label" />
);
const textField = getByLabelText("Label");

expect(textField).toHaveValue("textField");
});

it("should render helperText", () => {
const { getByText } = render(
<TextField helperText="HelperText" label="Label" />
);
const helperText = getByText("HelperText");

expect(helperText).toBeInTheDocument();
});

it("should handle max length correctly", async () => {
const { getByLabelText } = render(
<TextField label="Label" maxLength={5} />
);
const textField = getByLabelText("Label") as HTMLTextAreaElement;

fireEvent.change(textField, { target: { value: "12345678910" } });

await waitFor(() => {
expect(textField.value).toHaveLength(5);
});
});

it("should apply typing style while typing", async () => {
const { getByLabelText, getByText } = render(<TextField label="Label" />);
const textField = getByLabelText("Label");
const label = getByText("Label");

fireEvent.change(textField, { target: { value: "12345" } });

await waitFor(() => {
expect(label).toHaveStyle("color: textBlack");
expect(textField).toHaveStyle("borderColor: primary");
expect(textField).toHaveStyle("color: textBlack");
});
});

it("should apply typed style after typing", async () => {
const { getByLabelText, getByText } = render(<TextField label="Label" />);
const textField = getByLabelText("Label");
const label = getByText("Label");

fireEvent.change(textField, { target: { value: "12345" } });
fireEvent.blur(textField);

await waitFor(() => {
expect(label).toHaveStyle("color: textBlack");
expect(textField).toHaveStyle("borderColor: sub");
expect(textField).toHaveStyle("color: textBlack");
});
});

it("should apply success style if success is true", () => {
const { getByLabelText, getByText } = render(
<TextField success label="Label" />
);
const textField = getByLabelText("Label");
const label = getByText("Label");

expect(label).toHaveStyle("color: textBlack");
expect(textField).toHaveStyle("borderColor: success");
expect(textField).toHaveStyle("color: textBlack");
});

it("should apply error style if error is true", () => {
const { getByLabelText, getByText } = render(
<TextField error label="Label" />
);
const textField = getByLabelText("Label");
const label = getByText("Label");

expect(label).toHaveStyle("color: textBlack");
expect(textField).toHaveStyle("borderColor: error");
expect(textField).toHaveStyle("color: textBlack");
});

it("should display error message with proper aria-describedBy", () => {
const { getByLabelText } = render(
<TextField error helperText="Error message" label="Label" />
);
const textField = getByLabelText("Label");

expect(textField).toHaveAttribute(
"aria-describedby",
expect.stringContaining("error-message")
);
});

it("should fire onFocus event when focused", () => {
const handleFocus = jest.fn();
const { getByLabelText } = render(
<TextField label="Label" onFocus={handleFocus} />
);
const textField = getByLabelText("Label");

fireEvent.focus(textField);

expect(handleFocus).toHaveBeenCalledTimes(1);
});

it("should fire onBlur event when focus is lost", () => {
const handleBlur = jest.fn();
const { getByLabelText } = render(
<TextField label="Label" onBlur={handleBlur} />
);
const textField = getByLabelText("Label");

fireEvent.click(textField);
fireEvent.blur(textField);

expect(handleBlur).toHaveBeenCalledTimes(1);
});
});

describe("external control and events", () => {
it("should fire external onChange event", () => {
const Component = () => {
const [value, setValue] = useState("initial value");
const handleChange = (newValue: string) => setValue(newValue);

return <TextField label="Label" value={value} onChange={handleChange} />;
};
const { getByLabelText } = render(<Component />);
const textField = getByLabelText("Label");

expect(textField).toHaveValue("initial value");

fireEvent.change(textField, { target: { value: "updated value" } });

expect(textField).toHaveValue("updated value");
});
});