issue #207 test: communutiy page my group test code add

Selody-project · Jul 16, 2024 · 9b49248 · 9b49248
1 parent b27599f
commit 9b49248
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 8 deletions.
diff --git a/__test__/__mocks__/handlers/group/group.js b/__test__/__mocks__/handlers/group/group.js
@@ -0,0 +1,39 @@
+export const getMyGroupList = (req, res, ctx) => {
+	return res(
+		ctx.status(200),
+		ctx.json([
+			{
+				groupId: 1,
+				name: "그룹 이름 1",
+				description: "그룹 소개",
+				member: 1,
+				image:
+					"https://selody-images2.s3.ap-northeast-2.amazonaws.com/group/group.png",
+			},
+		]),
+	);
+};
+
+export const postGroup = (req, res, ctx) => {
+	try {
+		const { name, description, profileImg } = req.body;
+
+		if (!name) {
+			return res(
+				ctx.status(400),
+				ctx.json({ error: "형식에 맞지 않는 데이터" }),
+			);
+		}
+
+		return res(
+			ctx.status(201),
+			ctx.json({
+				name,
+				description,
+				profileImg,
+			}),
+		);
+	} catch (error) {
+		return res(ctx.status(500), ctx.json({ error: "Internal Server Error" }));
+	}
+};
diff --git a/__test__/__mocks__/server.js b/__test__/__mocks__/server.js
@@ -8,6 +8,7 @@ import {
 	getScheduleProposalsList,
 	// getSingleGroupSchedule,
 } from "./handlers/group/calendar";
+import { getMyGroupList, postGroup } from "./handlers/group/group";
 import { getInviteLink, postInviteLink } from "./handlers/group/inviteLink";
 import { getGroupMembers } from "./handlers/group/members";
 import {
@@ -67,6 +68,8 @@ export const handlers = [
 		getRecommendedProposals,
 	),
 	rest.post(`${BASE_URL}/api/group/:group_id/proposal`, enrollScheduleProposal),
+	rest.get(`${BASE_URL}/api/user/group`, getMyGroupList),
+	rest.post(`${BASE_URL}/api/group`, postGroup),
 ];
 
 export const server = setupServer(...handlers);
diff --git a/__test__/pagesTest/CommunityPage.test.jsx b/__test__/pagesTest/CommunityPage.test.jsx
@@ -1,18 +1,119 @@
 import React from "react";
+import ReactDOM from "react-dom";
 
 import "@testing-library/jest-dom/extend-expect";
 
+import { userEvent } from "@storybook/testing-library";
 import { screen } from "@testing-library/react";
 
 import { render } from "../../jest.setup.js";
+import GroupCreateModal from "../../src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.jsx";
+import Header from "../../src/components/Header/Header/Header.jsx";
 import CommunityPage from "../../src/pages/CommunityPage/CommunityPage.jsx";
 
-describe("Community", () => {
-	it("test initial render", () => {
-		render(<CommunityPage />);
+const GROUP_NAME = "그룹 이름 1";
 
-		expect(screen.getByText("내 그룹")).toBeInTheDocument();
-		expect(screen.getByText("내 그룹 피드")).toBeInTheDocument();
-		expect(screen.getByText("그룹 검색")).toBeInTheDocument();
+describe("Community 페이지 렌더링", () => {
+	beforeAll(() => {
+		ReactDOM.createPortal = jest.fn((element) => {
+			return element;
+		});
+		window.scrollTo = jest.fn();
+	});
+	describe("내 그룹 렌더링", () => {
+		describe("그룹이 없을 때", () => {
+			describe("그룹 추가하기 버튼 미클릭시", () => {
+				it("그룹 추가하기 버튼 렌더링", () => {
+					render(<CommunityPage />);
+
+					expect(screen.getByText("그룹 추가하기")).toBeInTheDocument();
+					expect(screen.getByTestId("group-add-button")).toBeInTheDocument();
+				});
+			});
+			describe("그룹 추가하기 버튼 클릭시", () => {
+				describe("그룹 추가하기 클릭시 그룹 생성 모달 오픈", () => {
+					it("모달 요소 렌더링", () => {
+						render(
+							<>
+								<CommunityPage />
+								<Header />
+							</>,
+							{
+								preloadedState: {
+									auth: { user: { userId: 1 } },
+									ui: { openedModal: null },
+								},
+							},
+						);
+
+						userEvent.click(screen.getByTestId("group-add-button"));
+
+						const createButton = screen.getByRole("button", {
+							name: "생성하기",
+						});
+						const imgInput = screen.getByTestId("group-img-input");
+						const nameInput = screen.getByPlaceholderText("그룹 이름");
+						const descriptionInput =
+							screen.getByPlaceholderText("그룹 상세 소개");
+
+						expect(nameInput).toBeInTheDocument();
+						expect(descriptionInput).toBeInTheDocument();
+						expect(createButton).toBeInTheDocument();
+						expect(imgInput).toBeInTheDocument();
+					});
+
+					it("그룹 생성하기 버튼 활성화", () => {
+						render(<GroupCreateModal />);
+
+						const nameInput = screen.getByPlaceholderText("그룹 이름");
+						const createButton = screen.getByRole("button", {
+							name: "생성하기",
+						});
+
+						expect(createButton).toBeDisabled();
+
+						userEvent.clear(nameInput);
+						userEvent.type(nameInput, GROUP_NAME);
+
+						expect(createButton).toBeEnabled();
+					});
+					it("그룹 생성", async () => {
+						render(
+							<>
+								<CommunityPage />
+								<Header />
+							</>,
+							{
+								preloadedState: {
+									auth: { user: { userId: 1 } },
+									ui: { openedModal: null },
+								},
+							},
+						);
+
+						userEvent.click(screen.getByTestId("group-add-button"));
+
+						const nameInput = screen.getByPlaceholderText("그룹 이름");
+						const createButton = screen.getByRole("button", {
+							name: "생성하기",
+						});
+
+						userEvent.clear(nameInput);
+						userEvent.type(nameInput, GROUP_NAME);
+
+						await userEvent.click(createButton);
+
+						expect(
+							await screen.findByRole("heading", {
+								name: GROUP_NAME,
+							}),
+						).toBeInTheDocument();
+					});
+				});
+			});
+		});
+		// describe("그룹이 있을 때", () => {
+
+		// })
 	});
 });
diff --git a/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.jsx b/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.jsx
@@ -68,7 +68,12 @@ const GroupCreateModal = () => {
 						<label htmlFor="profileImg">
 							<GroupImgAddIcon />
 						</label>
-						<input type="file" id="profileImg" onChange={handleChangeImg} />
+						<input
+							type="file"
+							id="profileImg"
+							onChange={handleChangeImg}
+							data-testid="group-img-input"
+						/>
 					</>
 				)}
 			</TopDiv>
@@ -80,6 +85,7 @@ const GroupCreateModal = () => {
 				onChange={(e) => setName(e.target.value)}
 				value={name}
 				maxLength={20}
+				placeholder="그룹 이름"
 			/>
 			<GroupDescriptionLabel htmlFor="description">
 				그룹 소개<span>{description.length}/100자</span>
@@ -89,6 +95,7 @@ const GroupCreateModal = () => {
 				onChange={(e) => setDescription(e.target.value)}
 				value={description}
 				maxLength={100}
+				placeholder="그룹 상세 소개"
 			/>
 			<ButtonWrapDiv>
 				<GroupCreateButton

diff --git a/src/components/Group/MyGroup/MyGroup.jsx b/src/components/Group/MyGroup/MyGroup.jsx
@@ -96,7 +96,10 @@ const MyGroup = () => {
 			<h3>내 그룹</h3>
 			{userGroupList.length === 0 ? (
 				<EmptyGroupDiv>
-					<EmptyMyGroupIcon onClick={() => dispatch(openCreateGroupModal())} />
+					<EmptyMyGroupIcon
+						onClick={() => dispatch(openCreateGroupModal())}
+						data-testid="group-add-button"
+					/>
 					<h4>그룹 추가하기</h4>
 				</EmptyGroupDiv>
 			) : (