Skip to content

Commit

Permalink
refactor: 편집기 컴포넌트 테스트 코드 리팩터링
Browse files Browse the repository at this point in the history 
[#184]

Co-Authored-By: 박유현 <[email protected]>
  • Loading branch information
@yunchaehyun @YuHyun-P
yunchaehyun and YuHyun-P committed Nov 30, 2023
1 parent 02bcd5d commit bb02c66
Showing 1 changed file with 111 additions and 74 deletions.
185 changes: 111 additions & 74 deletions packages/frontend/src/components/editor/__tests__/editor.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { render, screen } from "@testing-library/react";
// eslint-disable-next-line import/no-extraneous-dependencies
import userEvent from "@testing-library/user-event";

import { Editor } from "../Editor";
import { Editor, EditorProps } from "../Editor";
import "@testing-library/jest-dom";

const mockData = `
const mockInitialFileData = `
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
Expand All @@ -28,61 +28,79 @@ const mockData = `
# new file: .yarn/sdks/typescript/lib/tsc.js
`;

function renderComponent({ initialFile, onSubmit }: EditorProps) {
render(<Editor initialFile={initialFile} onSubmit={onSubmit} />);
}

afterEach(() => {
jest.clearAllMocks();
});

describe("Editor", () => {
const mockSubmitHandler = jest.fn();
const user = userEvent.setup();

describe("초기 데이터가 전달되면", () => {
it("편집기에 전달받은 초기 데이터를 보여준다.", () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);

expect(screen.getByTestId("textarea")).toHaveValue(mockData);
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
expect(screen.getByTestId("textarea")).toHaveValue(mockInitialFileData);
});

it("편집기는 명령 모드로 textarea에 입력이 안된다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
await user.type(
screen.getByTestId("textarea"),
"이 값을 타이핑해도 TextArea의 값이 바뀌지 않아야함.",
);

expect(screen.getByTestId("textarea")).toHaveValue(mockData);
expect(screen.getByTestId("textarea")).toHaveValue(mockInitialFileData);
});

it("편집기의 명령 모드로 명령어 입력 input에도 입력이 되지 않는다.", () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});

expect(screen.getByTestId("input")).toHaveAttribute("readonly");
});
});

describe("명령 모드에서 i를 누르면", () => {
it("편집기는 입력모드로 textarea에 입력이 가능하다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");
await user.type($textarea, "테스트");

expect($textarea).not.toHaveValue(mockData);
expect($textarea).not.toHaveValue(mockInitialFileData);
});

it("편집기의 textarea에 커서가 포커싱 되어야 한다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");

expect(document.activeElement).toEqual($textarea);
});

it('편집기는 입력모드로 input에는 "-- INSERT --" 이 입력 된다.', async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");
const $input = screen.getByTestId("input");
Expand All @@ -91,9 +109,10 @@ describe("Editor", () => {
});

it("편집기는 입력모드로 input은 입력이 되지 않는다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");
const $input = screen.getByTestId("input");
Expand All @@ -105,9 +124,10 @@ describe("Editor", () => {

describe("입력 모드에서 esc를 누르면", () => {
it("편집기는 명령모드로 input은 빈 값이다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");
await user.type($textarea, "i");
Expand All @@ -118,9 +138,10 @@ describe("Editor", () => {
});

it("편집기는 명령모드로 textarea에 커서가 포커싱 되어야 한다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");

Expand All @@ -129,34 +150,37 @@ describe("Editor", () => {
});

it("편집기는 명령모드로 textarea에 입력이 되지 않는다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, "i");

await user.keyboard("{Escape}");

await user.type($textarea, "테스트");
expect($textarea).toHaveValue(mockData);
expect($textarea).toHaveValue(mockInitialFileData);
});
});

describe("명령 모드에서 :(콜론)을 누르면 편집기는 라인 모드로 전환되며", () => {
it("편집기의 textarea는 입력이 불가능하다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
await user.type($textarea, ":");

expect($textarea).toHaveValue(mockData);
expect($textarea).toHaveValue(mockInitialFileData);
});

it("편집기의 input에는 초기값이 :(콜론)으로 들어간다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");
await user.type($textarea, ":");
Expand All @@ -165,9 +189,10 @@ describe("Editor", () => {
});

it("편집기의 input에 포커싱이 맞춰진다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");
await user.type($textarea, ":");
Expand All @@ -178,9 +203,10 @@ describe("Editor", () => {

describe("편집기 내용이 변경되고 라인 모드로 전환했을 때", () => {
it("q를 입력하면 에러 메시지가 뜨고, 커서가 textarea로 맞춰진다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");

Expand All @@ -202,9 +228,10 @@ describe("Editor", () => {
});

it("q!를 입력하면 변경사항이 적용되지 않은 상태로 onSubmit 함수를 실행시키고 종료된다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile={mockData} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile: mockInitialFileData,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");

Expand All @@ -218,19 +245,18 @@ describe("Editor", () => {
await user.type($input, "q!");
await user.keyboard("{Enter}");

expect(mockFn).toHaveBeenCalledWith(mockData);
expect(mockSubmitHandler).toHaveBeenCalledWith(mockInitialFileData);
});

it("wq를 입력하면 변경사항이 변경사항이 적용된 상태로 onSubmit 함수를 실행시키고 종료된다.", async () => {
const CHANGED_FILE = "테스트";
const mockFn = jest.fn();
render(<Editor initialFile="" onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({ initialFile: "", onSubmit: mockSubmitHandler });
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");

await user.type($textarea, "i");
await user.type($textarea, CHANGED_FILE);
expect($textarea).toHaveValue(CHANGED_FILE);

await user.keyboard("{Escape}");

Expand All @@ -239,14 +265,12 @@ describe("Editor", () => {
await user.type($input, "wq");
await user.keyboard("{Enter}");

expect(mockFn).toHaveBeenCalledWith(CHANGED_FILE);
expect(mockSubmitHandler).toHaveBeenCalledWith(CHANGED_FILE);
});

it("wq!를 입력하면 변경사항이 변경사항이 적용된 상태로 onSubmit 함수를 실행시키고 종료된다.", async () => {
const CHANGED_FILE = "테스트";
const mockFn = jest.fn();
render(<Editor initialFile="" onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({ initialFile: "", onSubmit: mockSubmitHandler });
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");

Expand All @@ -260,22 +284,39 @@ describe("Editor", () => {
await user.type($input, "wq!");
await user.keyboard("{Enter}");

expect(mockFn).toHaveBeenCalledWith(CHANGED_FILE);
expect(mockSubmitHandler).toHaveBeenCalledWith(CHANGED_FILE);
});
});

describe("편집기 내용이 변경이 되지 않았을 때 라인 모드로 전환했을 때", () => {
it.each([
{ initialFile: mockData, input: "q", expected: mockData },
{ initialFile: mockData, input: "q!", expected: mockData },
{ initialFile: mockData, input: "wq", expected: mockData },
{ initialFile: mockData, input: "wq!", expected: mockData },
{
initialFile: mockInitialFileData,
input: "q",
expected: mockInitialFileData,
},
{
initialFile: mockInitialFileData,
input: "q!",
expected: mockInitialFileData,
},
{
initialFile: mockInitialFileData,
input: "wq",
expected: mockInitialFileData,
},
{
initialFile: mockInitialFileData,
input: "wq!",
expected: mockInitialFileData,
},
])(
"$input를 입력했을 때 편집기 프로그램이 종료되고 초기 데이터가 서버에 전송된다",
async ({ initialFile, input, expected }) => {
const mockFn = jest.fn();
render(<Editor initialFile={initialFile} onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({
initialFile,
onSubmit: mockSubmitHandler,
});
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");

Expand All @@ -288,16 +329,14 @@ describe("Editor", () => {
await user.type($input, input);
await user.keyboard("{Enter}");

expect(mockFn).toHaveBeenCalledWith(expected);
expect(mockSubmitHandler).toHaveBeenCalledWith(expected);
},
);
});

describe("라인 모드에서 명령 모드로 전환했을 때", () => {
it("textarea에 커서가 맞춰진다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile="" onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({ initialFile: "", onSubmit: mockSubmitHandler });
const $textarea = screen.getByTestId("textarea");

await user.type($textarea, ":");
Expand All @@ -309,9 +348,7 @@ describe("Editor", () => {
});

it("input은 값이 비워진다.", async () => {
const mockFn = jest.fn();
render(<Editor initialFile="" onSubmit={mockFn} />);
const user = userEvent.setup();
renderComponent({ initialFile: "", onSubmit: mockSubmitHandler });
const $textarea = screen.getByTestId("textarea");
const $input = screen.getByTestId("input");
await user.type($textarea, ":");
Expand Down

0 comments on commit bb02c66

Please sign in to comment.